Shopify widget / PRC implementation guide

Owned by Faisal Iftikhar (Unlicensed)
Last updated: Nov 25, 2021 by Adriyana Grotseva (Unlicensed)
4 min read

In order to implement eKomi Smart Widgets in a Shopify store, first contact eKomi support team or your onboarding agent. They will provide you the JavaScript code snippet, which needs to be embed into the code of your Shopify shop. Following is an example guide on how to implement eKomi seller slider widget and the seal widget. It is similar process of implementing other eKomi widgets but depending on those you might need to work with some variables and placeholders, also depending on the shop theme you use. Follow the steps to access the code and display the eKomi seller slider and seal widgets.

Note: The following guide is written with the assumption that the person who does the implementation is familiar with at least a little bit of code guidelines and liquid templates.

Seller widget implementation:

  1. After login to the admin panel click on “Online Store” from the left menu, see screenshot:

2. There it will be displayed the selected “Live theme” of your store. Choose “Edit Code” from Actions drop-down menu button:

 

3. Now you can see the code structure and file system of the front-end store, see below:

 

4. In this example we want to display the seller widget in header & footer.

5. Then choose and open footer.liquid and header.liquid files under the heading of “Sections“ from the left menu.

6. Place the widget code snippet in that particular file with the position where you want to display the widget in the front store.

7. In this example we want to display the widget in the home page - somewhere in the middle of the home page.

7.1. For that purpose, choose and open settings_data.json file under the section of “Config”, see the screenshot below:

7.2. Create a new section block/key in the json format and add that key into “content_for_index“. The key should be unique, which represents the section in the home page:

 

PRC widget implementation:

Keep in mind that the following guide is just an example of PRC widget implementation in default theme in Shopify platform. Implementation can vary.

  1. Follow the Step 1 and Step 2 same as mention in the Seller Widget Implementation

  2. Once you are in the edit theme file mode you have to click on Sections and a drop-down will open you from where you have to open product-template.liquid file as shown in the picture below.



  3. Once the file is opened up you have to place the PRC widget code right before the following code
    {% if collection %}

     

  4. Please make sure that you edit the PRC code and place the placeholder inside the PRC widget code for product_id

  5. In our case for this file the placeholder will be
    {{ product.id }}

  6. After editing the PRC code it will look something like below.

     

  7. Once you have placed the widget code in the file. The file will look something like as shown in the screenshot below.

 

Note:

  • There is a possibility that the filenames wouldn’t be same as above because those depend on the theme structure that is used for the store. But predominantly the above naming is followed and used to implement the widgets by default in Shopify ecommerce store.

  • The positioning of the widget can change according to the client’s demand.

  • The PRC widget may not be displayed if there are no reviews.