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 a general guideline and the examples of code placement may not reflect exactly in your theme. You can also customize the position of the code to fit your website should you wish to.
• Stamped offers limited support for this installation process and support is offered to paid users only.

In This Guide

• For all Shopify Themes
  
  • Installing the Star Rating Badge On Collection Pages
• Shopify 2.0 Installation
  
  • Adding Stamped’s Script to Shopify in Theme.liquid 
  • Main Widget
  • Star Rating Badge On Product Page
  • Star Rating Badge On Featured Product
• Shopify Vintage Installation
  • Adding Stamped’s Script to Shopify in Theme.liquid 
  • Main Widget
  • Star Rating Badge On Product Page
• Advanced Custom Installation for Shopify 2.0 
  • Main Widget
  • Star Rating Badge On Product Page
• How do I remove the Star Rating Badge or the Main Widget?
• What happens if I update or change my theme?
• How can I embed the main widget on the homepage, and other non-product pages?

For all Shopify Themes

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.

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 -->
	Copy Code

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>
	Copy Code

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!

Shopify 2.0 Installation

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.

Adding Stamped Script to Shopify in Theme.liquid

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 the theme.liquid template of your Shopify theme
6. Paste the copied script just before the closing </body> tag and click Save
   You must replace YOUR PUBLIC API KEY and YOUR STORE HASH with your actual keys found here: https://go.stamped.io/#/settings/api

<!-- 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 -->Copy Code

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 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. Find "Main Widget" from Stamped on the list of the Apps section and click the item. 
   
5. 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.
6. The main widget is now installed and will show up on product pages!

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

The star rating badge is now installed and will show up on product pages!

Install 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 the Advanced Settings, there will be a checkbox option titled Is Featured Product. You will need to both enable this and add a Product Handle to this badge for the given product. A Product Handle is the tail end of the URL of a product page. 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.

Shopify Vintage Installation

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. 

Adding Stamped Script to Shopify in Theme.liquid

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. 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 the theme.liquid template of your Shopify theme
   6. Paste the copied script just before the closing </body> tag and click Save
      You must replace YOUR PUBLIC API KEY and YOUR STORE HASH with your actual keys found here: https://go.stamped.io/#/settings/api

<!-- 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 --> Copy Code

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 -->
	Copy Code

Paste the copied code above this:

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

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.liquidCopy Code

  • snippets/product-template.liquidCopy Code

  • templates/product-template.liquidCopy Code

  • sections/product-template.liquidCopy Code

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, 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>
	Copy Code

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>
	Copy Code

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.liquidCopy Code

  • section/product-template.liquidCopy Code

  • product-form.liquidCopy Code

  • product-meta.liquidCopy Code

Click Save.

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

Advanced Installation for Shopify 2.0 Users 

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 -->
	Copy Code

Paste the copied code at the bottom of the liquid file below the closing </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>
	Copy Code

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>
	Copy Code

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!

How do I remove 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 or update of your current theme may remove Stamped's widget codes. If this happens, you will need to reinstall your Stamped widgets in the live theme by following the appropriate 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>
Copy Code

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.