Shopify: Installing the app, main widget and script

Stamped seamlessly integrates with all Shopify themes. This article teaches you how to install the Stamped app, Main Widget, and script for Shopify 2.0 and Shopify Vintage themes.

Use the jump links below to navigate to the correct Shopify architecture.


In This Guide


Note:

  • Before you get started, make sure the app is installed from Shopify’s app store
  • If you are not sure if your store is using Shopify 2.0 or Vintage, please read Shopify’s help article. Use the jump links above to find the right guide for your store.
  • 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 the Main Widget step and continue to add the star rating badge.
  • Please note that these instructions are 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.
  • Stamped offers limited support for this installation process. Support will be offered to paid users only.

Adding Stamped Script to Shopify in Theme.liquid (All Shopify Users)

For most Shopify users, the Stamped script will automatically install into the theme.liquid file. If it does not, follow the instructions below, as this must be completed to add Stamped Widgets to Shopify sites.

  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="YOUR_PUBLIC-API-KEY" id="stamped-script-widget" src="https://cdn1.stamped.io/files/widget.min.js"></script>
    <!-- Stamped - End Script --><br>
    	


Installing Stamped’s Main Widget & Star Rating Badge on Shopify 2.0

Once you have installed the theme.liquid script to your Shopify store, your next step is to add Stamped’s Main Widget and Star Rating Badge. The directions below are for Shopify 2.0 users. If you are uncertain which version of Shopify your site uses, please refer to Shopify’s help article.

a. Installing the Main widget in Product Templates

The Main Widget showcases product reviews on specific product pages and includes an option to write a review for the product.

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 the main widget functions.

  1. Go to Online Store - Themes - Customize within your Shopify Dashboard
  2. Look for the Product Template in the top menu of the Theme customizer.
  3. Click "Add Section" at the bottom of the left panel of the screen.

  4. Find "Main Widget" from Stamped on the list of the Apps section and click the item. 
    Once done, the widget should automatically appear on the page, and you can move the widget to the desired position by hovering the cursor on the "Apps" item and clicking Save.
  5. Voila! The main widget is now installed and shows up on product pages.

b. Install the Star Rating Badge On Product Pages

The Star Rating Badge shows the review count on your product pages and indicates the average star rating. The Badge code is usually installed in the same file as the Main Widget code.

For that:

  1. Find the product template in the theme customizer by following steps 1-2 above.
  2. Find the "Product Information" section on the left panel of the screen, then click "Add Block"
  3. Find "Star Rating" from Stamped on the list of the Apps section and click the item.
  4. Once done, the widget should automatically appear on the page, and you can move the widget to the desired position by hovering the cursor on the "Star Rating" item and clicking "Save".
  5. Click Save

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


Installing Stamped’s Main Widget & Star Rating Badge on Shopify Vintage

Once you have installed the theme.liquid script to your Shopify store, your next step is to add Stamped’s Main Widget and Star Rating Badge. The directions below are for Shopify Vintage users. If you are uncertain which version of Shopify your site uses, please refer to Shopify’s help article

a. Installing the Main widget in product templates

The Main Widget showcases product reviews on specific product pages and includes an option to write a review for the product.  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 the Main Widget functions.

  1. For Vintage Theme, look for product.liquid under Templates on 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. For the Vintage theme, paste the copied code on top of this:
    {% section 'product-recommendations' %}<br><br>
    or
    {% include 'related-products' %}<br><br>
    	
  4. Once copied, click Save

    Note: Some themes have different structures and you may have to add the widget codes in a different template.

    For Vintage theme, some of the templates you can look for are:
    • product-details.liquid
    • snippets/product-template.liquid
    • templates/product-template.liquid
    • sections/product-template.liquid

b. Installing Star Rating Badge in the product template

The Star Rating Badge shows your review count on product pages and indicates ratings with the average number of stars. The Badge code is usually installed in the same file as the Main Widget code is located under the product title information.

  1. For Vintage theme, look for the product.title tag in the product-template.liquid or product.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 the title section. It looks something like this for vintage and Shopify 2.0 themes
    <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.

    For Vintage themes, some of the templates to 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.


Advanced Installation for Shopify 2.0 Users 

a. Installing the Main Widget: 

In the rare case that you are using Shopify 2.0 but doing a custom install, please use the directions below to install the Main Widget. 

  1. For Shopify 2.0, 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. Copy the following Main Widget code:
  2. <!--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 the closing </body> tag or above the product recommendation section if any:
  4. Once copied, click Save
    Note: Some themes have different structures and you may have to add the Widget codes in a different template.

  5. For Shopify 2.0, Some of the templates you can look for are:
    • main-product.liquid
    • product.liquid
    • reviews.liquid
    • templates/product-template.liquid
    • sections/product-template.liquid

b. Installing the Star Rating Badge

In the rare case you are using Shopify 2.0 but doing a custom install, please use the directions below to install the Star Rating.

  1. For Shopify 2.0, 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:

    <!-- Stamped - Begin Star Rating Badge -->
    <span class="stamped-product-reviews-Badgebadge 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>
    	
  3. Paste the copied code under the title section. It looks something like this for vintage and Shopify 2.0 themes

    <h1>{{product.title}}</h1>
    ##Insert code here##<br>
    	
  4. Some themes have different structures and you may have to add the Widget codes in a different template. For Shopify 2.0, some of the templates you can look for are:
    • snippets/product-template.liquid
    • section/product-template.liquid
    • product-form.liquid
    • product-meta.liquid
  5. Click Save

Voila! The Star Rating Badge is now installed and that shows up on product pages.


Installing Star Rating Badges on Collection Pages

Stamped lets you show the review count related to each product in product grids and indicate the rating with the average number of stars. This process is the same for all Shopify users.
For both Vintage Theme and Shopify 2.0, the Star Rating on the collection page is installed within the theme files.

To install the Star rating widget on product grids,

  1. For Vintage Theme and Shopify 2.0, look for product-card.liquid on the left or use the search box to find the template.
  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,
    <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>
    	
  6. For Vintage Theme and Shopify 2.0, 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?

For theme file installation, you can find 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.

For Shopify 2.0, you can simply go to
Online Store - Themes - Customize find, the product templates and click "remove block" or "remove section" 


Update/Change Theme

Any change/update of the theme may remove Stamped's Widget codes. If this happens, they can be reinstalled in the live theme by following the installation steps above.


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 on non-product pages, the Main Widget loses its Write a Review functionality. However, you can link the self-hosted Write a Review page on the top of the Widget to allow customers to 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.