Installing the app, main widget and script on Shopify 2.0 Themes

Stamped.io seamlessly integrates with major eCommerce platforms and offers applications for a smoother experience.

Additionally, Stamped.io offers StampedIQ, a set of AI-powered features that helps analyze, review content, generate topics, derive insights, assist reviewers to write better and quality reviews.

*Using the previous version of Shopify?
Please find the installation guide here.


In This Guide


In this article, we explain how to load the script and embed Stamped.io’s core widgets in Shopify theme files.

Note:

  • Before you get started, make sure the app is installed from Shopify’s app store - https://apps.shopify.com/product-reviews-addon.
  • In most of the themes, installing the app adds the script and the core widgets automatically. If you see the main widget on the product page, you can skip to step III to add the star rating badge.
  • For Shopify users without Shopify Product Review(SPR) app installed in the theme, it can be more challenging to install the codes as every theme has a different set of files and codes involved. If you have SPR installed currently in your theme, please use this guide instead.
  • Please note that these instructions will be a general guideline and the examples of code placement may not reflect exactly in your theme. You can also customize the position of the codes to fit your website should you wish to.
  • If you require assistance with installation, we do provide the service for users on paid plans, simply send us an email at hello@stamped.io.

Step I - Installing Stamped.io’s Script in Theme.liquid

In order to add the widgets to Shopify stores, Stamped.io’s script needs to be loaded. For that:

  1. Login to the Shopify admin panel, e.g., store.myshopify.com/admin
  2. On the left, click Online Store and then click Themes
  3. In the Current theme block, click Actions and then click Edit code from the actions dropdown

  4. Look for theme.liquid on the left
  5. Copy the following code into theme.liquid template of your Shopify theme
  6. Paste the copied script just before the closing </body> tag and click Save
  7. <!-- Stamped - Begin Script-->
    <script async type="text/javascript" data-api-key="" id="stamped-script-widget" src="https://cdn-stamped-io.azureedge.net/files/widget.min.js"></script>
    <!-- Stamped - End Script -->
    	

Core Widgets

Basically, we offer two widgets: a) Main Widget to showcase reviews and b) Star Rating Badge to show review count on your product pages.

Step II - Installing Main widget in product templates

The Main Widget is designed to showcase reviews on product pages specific to each product with an option to write a review.

The look and feel can be customized to fit your branding. Store owners and designated staff members can configure the UGC & Reviews app to change the way main widget functions.

There are several ways to install the Main Review widget including through a) Product Page liquid and b) Theme customizer.

II.a Adding the main widget code through product page liquid file

  1. Look for product.json under Templates on the left or use the search box to find the template, then look for the name of the product liquid file.
  2. Copy the following Main Widget code 
    <!--Stamped - Begin Main Widget -->
    <div 
    id="stamped-main-widget"   
    data-product-id="{{ product.id }}"   
    data-name="{{ product.title | escape }}"   
    data-url="{{ shop.url }}{{ product.url }}"   
    data-image-url="{{ product.featured_image | product_img_url: "large" |replace: '?', '%3F' | replace: '&','%26'}}" 
    data-description="{{ product.description | escape }}"   
    data-product-sku="{{product.handle}}"
    data-product-title="{{product.title}}" 
    data-product-type="{{product.type}}">   
    {{product.metafields.stamped.reviews}}   
    </div>
    <!-- Stamped - End Main Widget -->
    	
  3. Paste the copied code at the bottom of the liquid file below closing </section> tag or above product recommendation section if any:
  4. Click Save

    Note: Some themes have different structures and you may have to add the widget codes in a different template. Some of the templates you can look for are:
    • main-product.liquid
    • product.liquid
    • reviews.liquid
    • templates/product-template.liquid
    • sections/product-template.liquid

II.b Adding the main widget code through theme customizer

  1. In the Current theme block, click Customize
  2. Choose to customize the Products page.
  3. Click "Add Section"
    Choose "Custom Liquid"
  4. Copy the following Main Widget code to the Custom liquid block 
    <!--Stamped - Begin Main Widget -->
    <div 
    id="stamped-main-widget"   
    data-product-id="{{ product.id }}"   
    data-name="{{ product.title | escape }}"   
    data-url="{{ shop.url }}{{ product.url }}"   
    data-image-url="{{ product.featured_image | product_img_url: "large" |replace: '?', '%3F' | replace: '&','%26'}}" 
    data-description="{{ product.description | escape }}"   
    data-product-sku="{{product.handle}}"
    data-product-title="{{product.title}}" 
    data-product-type="{{product.type}}">   
    {{product.metafields.stamped.reviews}}   
    </div>
    <!-- Stamped - End Main Widget -->
    	

Voila! The main widget is now installed and that shows up on product pages.

Step III - Installing Star Rating Badge in the product template

Star Rating Badge is used to show review count on your product pages and indicate the rating with the average number of stars. The badge code is usually installed in the same file as where the main widget code is located.

For that,

  1. Look for the product.title tag in the product page template found on product.json. You can use the search box to find the template.
  2. Copy the following code
  3. <!-- Stamped - Begin Star Rating Badge -->
    <span 
    class="stamped-product-reviews-badge stamped-main-badge" 
    data-id="{{ product.id }}" 
    data-product-sku="{{ product.handle }}" 
    data-product-title="{{product.title}}" 
    data-product-type="{{product.type}}" 
    style="display: block;">
    {{product.metafields.stamped.badge}}
    </span>
    <!-- Stamped - End Star Rating Badge --><br>
    	
  4. Paste the copied code under Product Title code. It looks something like this,
    <h1>{{product.title}}</h1><br>or<br><h1 class="product__title" {{ block.shopify_attributes }}>
    {{ product.title | escape }}</h1>
    	
  5. Some themes have different structures and you may have to add the widget codes in a different template. Some of the templates you can look for are:
    • snippets/product-template.liquid
    • section/product-template.liquid
    • product-form.liquid
    • product-meta.liquid
  6. Click Save

Voila! The star rating badge is now installed and that shows up on product pages.

The installed star rating badge will look something like this:

Step IV - Installing Star Rating Badges in collection pages and product grids

Stamped.io lets you show the review count related to each product in product grids and indicate the rating with the average number of stars.

To Install the Star rating widget on product grids,

  1. Go to the product-card.liquid
  2. Find the product.title line
  3. Copy the Star Rating Badge code
  4. <!-- Stamped - Begin Star Rating Badge -->
    <span 
    class="stamped-product-reviews-badge" 
    data-id="{{ product.id }}"
    data-product-sku="{{ product.handle }}" 
    data-product-type="{{product.type}}" 
    data-product-title="{{product.title}}" 
    style="display:block;">
    {{product.metafields.stamped.badge}}
    </span>
    <!-- Stamped - End Star Rating Badge -->
    	
  5. Paste the copied code under product.title line which looks something like,
    <div class="card__content"><h2 class="card__text h3">{{ product_card_product.title }}</h2></div>
    ##Insert code here##<br>
    	

Note: If you are unable to find the title tag in product-card.liquid or product-grid-item.liquid, please look for the tag in any of the following files and paste in any one of the templates:

  • product-card.liquid
  • product-thumbnail.liquid
  • product-loop.liquid
  • product-item.liquid
  • product-block.liquid
  • Product-info.liquid

Voilà! You now have the star rating badge on the collection pages.


How do I stop loading the star rating badge or the main widget?

You can simply go to the templates where you added the widgets originally or refer the step #2 and step #3 to find the widgets and manually comment out or remove them.

Update/Change Theme

Any change/update of the theme may remove Stamped.io's widget codes, they can be reinstalled in the live theme by:

  1. Heading over to Settings => Widgets => Main Widget => Install: https://go.stamped.io/v3/#/settings/widgets/main/
  2. Click on the "Apply Main widget" button.

Please note that the Star rating badges on the product page and the collection pages need to be manually installed by following step III and step IV.

I am unable to find the widgets I added earlier on my theme. What do I do?

Any change/update of the theme may remove Stamped.io's widget codes, they can be reinstalled in the live theme by heading over to Settings > Widgets > Main Widget => Install: https://go.stamped.io/v3/#/settings/widgets/main/.

The Star rating badges on the product page and the collection pages need to be manually installed by following step #3 and step #4.

How can I embed the main widget on the homepage and other non-product pages?

Simply copy the following code wherever you would like to:

<div id="stamped-main-widget"></div>
	

Please note that the main widget on non-product pages loses its Write a review functionality. However, you can link the self-hosted Write a review page on the top of the widget and the visitors/customers can submit a general review.

Please take a look at this article for directions on how to install the widget in different places of your Shopify store.