Installing the app, main widget and script on Shopify

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.

We have a video tutorial which will run you through the entire installation process: https://youtu.be/IbX-WA-CPcU


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 Actionsand then click Editcode from the actions dropdown

  4. Look for theme.liquid on the left
  5. Copy the following code into theme.liquidtemplate 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.

Adding the main widget code

  1. Look for product.liquid under Templateson the left or use the search box to find the template
  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 on top of this:
    {% section 'product-recommendations' %}<br><br>
    or
    {% include 'related-products' %}
    	
  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:
    • product-details.liquid
    • snippets/product-template.liquid
    • templates/product-template.liquid
    • sections/product-template.liquid

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-template.liquid template on the left or 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 that. It looks something like this,
    <h1>{{product.title}}</h1>
    ##Insert code here##<br>
    	
  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. Look for product-card.liquid on the left or use the search box to find the template
  2. Copy the Star Rating Badge code
  3. <!-- 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 -->
    	
  4. Paste the copied code under product.title something like,
    <div class="h4 grid-view-item__title">{{ product.title }}</div>
    ##Insert code here##
    {% if section.settings.show_vendor %}
    <div class="grid-view-item__vendor">{{ product.vendor }}</div>
    {% endif %}
    <div class="grid-view-item__meta">
    {% include 'product-price' %}
    </div><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 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.