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 instructions for your Shopify theme type.

Key Notes

• Before you get started, make sure the Stamped 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 and use the jump links below to find the right guide for your store.
• Please note that these instructions are general guidelines, and the code placement examples may not match your theme exactly. You can also customize the code's position to fit your website, if you wish.
• You must add the Stamped script to your theme manually. It is not injected automatically, and this applies to Shopify 2.0 and Vintage themes alike. Nothing renders until it is in place.
• A Shopify install has two separate parts: the script, which loads Stamped and renders everything, and the widget placements, which decide where things appear. See Installation Process.
• Widgets do not render on the Free plan.

In This Guide

• Installation Process
• For all Shopify Themes
  • Step 1: Add the Stamped script to theme.liquid
  • Step 2: Star Rating Badges on collection pages
• Widget Installation: Shopify 2.0
  • Main Widget
  • Star Rating Badge on product pages
  • Star Rating Badge on featured products
• Widget Installation: Shopify Vintage
  • Main Widget
  • Star Rating Badge on product pages
• Advanced custom installation for Shopify 2.0
• Check your install worked
• Troubleshooting
• Managing your install
  • Removing the Star Rating Badge or Main Widget
  • Updating or changing your theme
  • Embedding the main widget on non-product pages

Installation Process

A Stamped install has two parts. Most installation problems come from having one without the other, so it is worth understanding the split before you start.

1. The script (widget.min.js), added to theme.liquid. This is the engine: it loads Stamped on your storefront and renders every widget. You must add it manually, and the steps are identical on Shopify 2.0 and Vintage. Without it, nothing displays anywhere, no matter what else you have added.
2. The placements. These are the containers that tell Stamped where to render: the Main Widget and Star Rating app blocks on Shopify 2.0, or widget code in your theme files on Vintage. On their own, they are empty containers.

The most common misunderstanding: on Shopify 2.0, adding the Stamped app block is placement only. It does not load the script. If you added the app block and see nothing on your product page, the script is missing.

Install the script first, then follow the widget section for your theme type.

For all Shopify Themes

These two steps are the same whether you are on a Shopify 2.0 or a Vintage theme. Complete step 1 before anything else.

Step 1: Add the Stamped script to theme.liquid

This step is required for every store. The Stamped script is not added to your theme automatically, so it must be installed by hand before any Stamped widget will render, on both Shopify 2.0 and Vintage themes.

Check first if you are unsure whether it is already there. Open a product page on your storefront, view the page source and search for widget.min.js. If it already appears once, the script is in place and you can move on. Only add it if it does not appear at all: a second copy causes widgets to load intermittently or hang on a loading spinner.

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. Paste the code below just before the closing </body> tag, then click Save
6. Replace YOUR PUBLIC API KEY and YOUR STORE HASH with your actual keys, found at https://go.stamped.io/#/settings/api

7. <!-- Stamped -->
   <script>
     function myInit(){
       StampedFn.init({
         apiKey: 'YOUR PUBLIC API KEY',
         sId: 'YOUR STORE HASH'
       });
     }
   </script>
   <script async onload="myInit()" type="text/javascript" src="https://cdn1.stamped.io/files/widget.min.js"></script>
   <!-- End Stamped -->

    

Once saved, load a product page and search the page source for widget.min.js to confirm it is present exactly once. Then continue to the widget section for your theme type.

Step 2: 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.

3. Copy the Star Rating Badge code:

<!-- Stamped - Begin Collection 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;">
</span>
<!-- Stamped - End Star Rating Badge -->
	

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>
	

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:

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

You now have the Star Rating Badge on collection pages!

Widget Installation: Shopify 2.0

With the script in place, add the Main Widget and Star Rating Badge. The steps below are for Shopify 2.0 themes. If you are not sure which version your store uses, see Shopify's help article.

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.

You can customize the look and feel to fit your branding. Store owners and designated staff members can configure the Main Widget appearance from within the Stamped application dashboard.

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. In the Apps section list, find "Main Widget" from Stamped and click it.

   

5. Once done, the widget should appear on the page automatically; hover over the "Apps" item and click Save after moving it to the desired position.

   

6. The main widget is now installed and will show up on product pages.

Installing 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 for a given product. The Star Rating Badge code is usually installed in the same file as the Main Widget code. Follow the instructions below to install in your theme:

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 in the Apps section list and click the item.

   

4. Once done, the widget should appear on the page automatically; hover over the "Star Rating" item and move it to the desired position.

   

5. Click Save

Installing the Star Rating Badge on featured products (non-product pages)

The Star Rating Badge shows the review count on your product pages and indicates the average star rating. For installation on a non-product page the steps are the same as section b. However there is one major key difference for non-product pages. 

In Advanced Settings, you'll see a checkbox option titled Is Featured Product. You need to enable this and add a Product Handle to this badge for the product. A Product Handle is the end of a product page URL. Example: https://stamped-demo.com/products/relaxed-fit-coat -> relaxed-fit-coat in this case is the Product Handle.

Once complete the badge will display on any featured product placed on non-product pages.

Widget Installation: Shopify Vintage

The directions below are for Shopify Vintage users. If you are uncertain which version of Shopify your website uses, please refer to Shopify's help article.
 

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. It 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 Main Widget appearance from the Stamped application dashboard.
 

For a Vintage Theme, look for product.liquid or main-product.liquid under Templates on the left or use the search box to find the template.

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-type="{{product.type}}">     
</div>
<!-- Stamped - End Main Widget -->
	

Paste the copied code above this:

{% section 'product-recommendations' %}<br><br>
or
{% include 'related-products' %}<br><br>
	

Once copied, click Save.

Note: Some themes have different structures and you may have to add the widget code in a different template. Reach out to Stamped support for guidance.

Some of the templates you can look for are:

• product-details.liquid

• snippets/product-template.liquid

• templates/product-template.liquid

• sections/product-template.liquid

Installing the Star Rating Badge in the product template

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

For a Vintage theme, look for the product.title tag in the product-template.liquid, product.liquid or main-product.liquid template on the left or use the search box to find the template.

Copy the following code:

<!-- 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;">
</span>
<!-- Stamped - End Star Rating Badge --><br>
	

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>
	

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

Some of the templates to look for are:

• snippets/product-template.liquid

• section/product-template.liquid

• product-form.liquid

• product-meta.liquid

Click Save.

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

Advanced custom installation for Shopify 2.0

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.
 

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:

<!--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-type="{{product.type}}">    
</div>
<!-- Stamped - End Main Widget -->
	

Paste the copied code at the point in the file where you want the widget to appear, typically at the bottom of the product section or immediately above the product recommendations block:</body> tag or above the product recommendation section if any:

Once copied, click Save.
Note: 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:

• main-product.liquid
• product.liquid
• reviews.liquid
• templates/product-template.liquid
• sections/product-template.liquid

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 Badge.

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.

Copy the following code:

<!-- 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;">
</span>
<!-- Stamped - End Star Rating Badge --><br>
	

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>
	

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

Click Save.

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

Check your install worked

Open a product page on your live storefront and confirm all three:

1. In the page source, widget.min.js appears exactly once.
2. The star rating badge appears under the product title.
3. The main widget appears further down the page.

Conduct a test on a product that already has at least one review. A product with no reviews displays an empty widget, which appears to indicate a failed installation but is not.

Troubleshooting

• Nothing is rendering anywhere. The script may be missing. Confirm widget.min.js is in the page source, as the app block alone does not load it.
• Widgets appear on some page loads but not others, or hang on a loading spinner. The script may be installed twice. Search your theme for widget.min.js and remove the duplicate. This is timing-dependent, which is why it can look like it fixes itself. The
• Widgets vanished after a theme change. Confirm the widget.min.js script is present in your theme.liquid file
• You placed a Stamped block in a page builder (PageFly, or similar) and nothing renders. Page builders list Stamped blocks from the app directory even when the Stamped theme extension is not active on your theme, so the block resolves to nothing. Use a Custom HTML element containing the raw widget code instead, or contact support to confirm your install type.
• Reviews show in the dashboard but not on the storefront. Check the reviews are published. Please note that widgets do not render on the Free plan.

Managing your install

Removing 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":

Updating or changing your theme

Themes are independent copies. Publishing a new theme carries nothing over from the old one.

That includes the Stamped script in theme.liquid as well as every widget placement, so a new theme starts with no Stamped install at all until you rebuild it.

Before you publish a new or updated theme:

1. Search the current theme's files for stamped and note every placement you find, including any commented-out code.
2. Set the new theme up unpublished: add the script to theme.liquid first, then re-add the app blocks or widget code.
3. Preview the new theme and confirm the widgets render, and that widget.min.js appears exactly once in the page source.
4. Publish, and keep the old theme available for a couple of weeks as a rollback.

Your reviews are stored in Stamped, not in your theme, so nothing is lost during a theme change. Only the display code needs rebuilding.

Embedding 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 refer to this article for directions on how to install the Widget in different places of your Shopify store.