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
- Adding Stamped’s Script to Shopify in Theme.liquid (All Shopify Users)
- Installing Stamped’s Main Widget & Star Rating Badge on Shopify 2.0
- Installing Stamped’s Main Widget & Star Rating Badge on Shopify Vintage Themes
- Advanced Installation for Shopify 2.0
- Installing the Star Rating Badge On Collection Pages (All Shopify Users)
- How do I remove the Star Rating Badge or the Main Widget?
- Update/Change Theme
- How can I embed the main widget on the homepage, and other non-product pages?
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 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 code to fit your website should you wish to.
- Stamped offers limited support for this installation process. Support is 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.
- Login to the Shopify admin panel, e.g., store.myshopify.com/admin
- On the left, click Online Store and then click Themes
- In the Current theme block, click Actions and then click Edit code from the actions dropdown
- Look for theme.liquid on the left
- Copy the following code into the theme.liquid template of your Shopify theme
- Paste the copied script just before the closing </body> tag and click Save
** You must replace YOUR_PUBLIC-API-KEY with your actual API key
found here: https://go.stamped.io/#/settings/api
<!-- Stamped --> <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> <!-- End Stamped -->
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 Main Widget appearance from within the Stamped application dashboard.
- Go to Online Store - Themes - Customize within your Shopify Dashboard
- Look for the Product Template in the top menu of the Theme customizer.
- Click "Add Section" at the bottom of the left panel of the screen.
- 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.
- The main widget is now installed and will show 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 for a given product. The Badge code is usually installed in the same file as the Main Widget code.
For that:
- Find the product template in the theme customizer by following steps 1-2 above.
- Find the "Product Information" section on the left panel of the screen, then click "Add Block"
- Find "Star Rating" 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 "Star Rating" item and clicking "Save".
- Click Save
The star rating badge is now installed and will show up on product pages!
c. 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'll 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.
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. 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 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}}">
{{product.metafields.stamped.reviews}}
</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
-
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, and is located under the product title information.
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.
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;">
{{product.metafields.stamped.badge}}
</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 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.
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}}">
{{product.metafields.stamped.reviews}}
</div>
<!-- Stamped - End Main Widget -->
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
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 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;">
{{product.metafields.stamped.badge}}
</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!
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:
For Vintage Theme and Shopify 2.0, look for product-card.liquid on the left or use the search box to find the template.
Copy the Star Rating Badge code:
<!-- 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 -->
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:
- 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!
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/update of the theme may remove Stamped's Widget code. If this happens, reinstall 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.