Activate widget on your store
1 What is Theme app Extension
Theme app extensions allow merchants to easily add dynamic elements to their themes without having to interact with Liquid templates or code. For example, dynamic elements can include product reviews, prices, ratings, or interactive 3D models of products. Theme app extensions can integrate with Online Store 2.0 themes. To find out more details, please visit shopify documentation
The app theme extension support two type of blocks which refers to the liquid files that act an entry point to inject specific liquid code onto the store. These two block types are:
App embeds block => Named as CI Engine and its used to embed the recommendation functionality within the merchant store
App block => Names as CI Widget Helps Merchant to select the location where the recommendations will be displayed on individual pages
2 App Embeds Block - [CI Engine]
Shopify app embed block allows merchants to add Ci recommendations to your Shopify store. By default, app embed blocks are deactivated after an app is installed. Merchants need to activate app embed blocks in the theme editor, from Theme Settings > App embeds
App embed blocks enables injection of code package in modular blocks, giving merchants more control. Code is not only inserted or removed in an easier way, but this new framework also makes themes easier to support and troubleshoot.
To find out more about app embed blocks, please visit shopify documentation
2.1 How to Configure app embed block for Ci app?
After Installing the application (Customer intelligence extension), you will be redirected to the registration page: https://ci.zapyan.com/register
Once you create the account, you will be navigated to the dashboard.
A Notification screen will appear at the top of the dashboard page
4. Configure the app embed block by clicking on the link in the first step i.e. Please click here to embed the recommendation
5. This will redirect you to your shopify store landing at the app store theme settings on the app embed tab
6. Locate the app embedded block CI Engine and switch the toggle to the on position.
Tip: Please see the step by step video below.
2.2 How to Activate or Deactivate App Embed block?
From your Shopify admin, go to Online Store > Themes.
Find the theme that you want to edit, and then click Customize.
Click at the Theme settings.
Naviage to the App embeds tab.
Select the app embed that you want to activate or click the Search bar and enter a search term to search through your installed apps.
Beside the app embed block that you want to activate or deactivate, click the toggle to activate or deactivate it.
Tip: All app embed blocks are automatically deactivated and removed from your store upon installation of the app.
2.3 Which templates app embed blocks can be added to?
Shopify app embed mode is available for all Shopify stores. You do not have to have an Online Store theme 2.0 installed.
3 App Block [CI Widget]
Our app block let you place the recommendation block exactly where you want in your theme. You can add, remove, preview, reposition, and customize app blocks through the theme editor.
To find out more about app embed blocks, please visit shopify documentation
Note: The Following configuration of CI Widget app block is optional as CI Engine has predefined placeholders where the recommendation block will be displayed for each page category. Following the steps below you can overwrite those default placeholders or define new ones where non standard shopify store theme has been used.
3.1 How to add and configure CI Widget app block?
From your Shopify admin, go to Online Store > Themes.
Find the theme that you want to edit, and then click Customize.
Navigate to the page and section where you want to add the app block.
Click Add Section.
From the drop-down menu, in the Apps section, select the CI Widget app block.
Drag and drop the section the the exact position on the page where the recommendation block should be displayed
In the CI Widget block configuration on the right hand panel select from drop down the reference value of the widget position
Note: The refference values (Top, Middle, Bottom) are then used in campaign configuration flow to target specific placement on your page
Note: The Widget displays during the configuration as an empty section within your page as its hidden when not in use
Click Save.
Tip: Repeat this configuration for every page category such as home page, product page, collection page etc.
3.2 How to Remove CI Widget App block?
From your Shopify admin, go to Online Store > Themes.
Find the theme that you want to edit, and then click Customize.
Navigate to the page and section where you want to add the app block.
Locate the CI Widget app block, which you want to remove and click in the right hand side panel (App block configuration panel) on the 3 dots selecting the option to Remove
Click Save.
Tip: The app block does not have to be removed but only temporarily hidden by clicking at the eye icon next to the CI Widget section
3.3 How to Reorder App block?
From your Shopify admin, go to Online Store > Themes.
Find the theme that you want to edit, and then click Customize.
Navigate to the page and section where you want to add the app block.
Locate the CI Widget app block, which you want to reorder and drag and drop the section to the desired location on the page
Click Save.
Note: Please remember to update the Widget page position within the app block configuration panel
3.4 Which templates app blocks can be added to?
Shopify app block is available for all Shopify stores. You do not have to have an Online Store theme 2.0 installed.
Tips: There are prerequisites to access all your organisations via Ci application which includes:
Installation: Install our Ci application on each e-commerce platform where you wish to deliver our advanced product and content recommendations.
Consistent Email Address: During the authentication process while installing the Ci application on each platform, it's essential to use the same email address. This ensures a streamlined experience and centralizes your access to our features, making it easier to manage recommendations and monitor performance across various e-commerce platforms.
Still need help?
If your visitors still have questions, provide contact information or another resource for more help.