Use this guide to connect the Shopify Product Reviews app with Pixel Union's themes. Add the app, then activate and customize the app's blocks through the theme editor.
For more premium review apps, such as Stamped, use their latest installation instructions to connect their app with your theme.
Install the app
Before activating any theme settings, add the Product Reviews app or a premium alternative.
Add blocks to templates and sections
Open the theme editor (Customize), then open a template or section.
Select (+) Add block, then Reviews.
The Reviews block is where reviews will be submitted and displayed for the product.
Select (+) Add block, then Star rating.
The Star rating block shows the total stars out of five the product is rated.
Vintage themes
Most vintage theme versions require theme file adjustments to complete the installation.
Contact Shopify Support for assistance installing the app for vintage themes
Go to your Online Store and locate your theme. Select Actions, then Edit code to open the theme files.
Atlantic
Locate the Snippets folder to open the product.liquid file. At the very end of this file, add the following code:
<div id="shopify-product-reviews" data-id="{{product.id}}">{{ product.metafields.spr.reviews }}</div>
Save the file.
Add the review badge snippet
Include an average review rating badge on the collection page and product page by adding the following code:
<span class="shopify-product-reviews-badge" data-id="{{ product.id }}"></span>Collection page badge
In the Snippets, open the product-item.liquid file. In this file, locate this line of code:
{% capture product_card_details_overlay %}
Below this code, add the code snippet, then Save.
Badge not appearing?
Depending on the Colors setup, you may need to add an additional code to change the color of the badge to reveal it in the storefront. If this is the case, go to the Assets folder to access the theme.css.liquid file. At the very bottom of this file, add this code:
.spr-badge {color: #fff;font-size:16px;}
Product page badge
Back in the product.liquid file, locate the product title and price code blocks. Between these code blocks, add the code, then Save.
Grid
Locate the Snippets folder to open the product.liquid file. At the very end of this file, add the following code:
<div id="shopify-product-reviews" data-id="{{product.id}}">{{ product.metafields.spr.reviews }}</div>
Save the file.
Add the review badge snippet
Include an average review rating badge on the collection page and product page by adding the following code:
<span class="shopify-product-reviews-badge" data-id="{{ product.id }}"></span>Collection page badge
In the Snippets, open the product-list-item.liquid file. In this file, locate the product title and price codes. Between these blocks, add the code snippet, then Save.
Product page badge
Back in the product.liquid file, locate the product title and price code blocks. Between these code blocks, add the code, then Save.
Badge not appearing?
Depending on the Colors setup, you may need to add an additional code to change the color of the badge to reveal it in the storefront. If this is the case, go to the Assets folder to access the theme.css.liquid file. At the very bottom of this file, add this code:
.spr-summary{
font-size: 16px
}
.spr-form-label+.spr-form-input{
font-size: 16px;
}
.spr-form-message-success{
font-size: 16px;
}
Pacific
Locate the Snippets folder to open the product-description.liquid file. At the very end of this file, add the following code:
<div id="shopify-product-reviews" data-id="{{product.id}}">{{ product.metafields.spr.reviews }}</div>
Save the file.
Add the review badge snippet
Include an average review rating badge on the collection page and product page by adding the following code:
<span class="shopify-product-reviews-badge" data-id="{{ product.id }}"></span>Collection page badge
In the Snippets, open the product-list-item.liquid file. In this file, locate the product title and price codes. Between these blocks, add the code snippet, then Save.
Product page badge
Open the page-header.liquid in the Snippets folder to look for this block of code:
{% if template contains 'product' %}
<div class="product-details">
<h1 class="page-title" itemprop="name">{{ product.title }}</h1>
<a class="product-vendor vendor" href="{{ product.vendor | url_for_vendor }}">{{ product.vendor }}</a>
</div>
Place the code between the page title and vendor link.
Startup
Locate the Snippets folder to open the product-additional-information.liquid file. At the very end of this file, add the following code:
<div id="shopify-product-reviews" data-id="{{product.id}}">{{ product.metafields.spr.reviews }}</div>
Save the file.
Add the review badge snippet
Include an average review rating badge on the collection page and product page by adding the following code:
<span class="shopify-product-reviews-badge" data-id="{{ product.id }}"></span>Collection page badge
In the Snippets, open the product-list-item.liquid file. In this file, locate the product vendor and title codes. Between these blocks, add the code snippet, then Save.
Product page badge
Open the product-details.liquid file to locate the product title and vendor code blocks. Between these code blocks, add the code, then Save.
Launch
Locate the Snippets folder to open the product-main.liquid file. Locate the product description code block.
At the end of this code block with be an {% endif %} control tag. On the line below this add the following code:
<div id="shopify-product-reviews" data-id="{{product.id}}">{{ product.metafields.spr.reviews }}</div>
Save the file.
Add the review badge snippet
Include an average review rating badge on the collection page and product page by adding the following code:
<span class="shopify-product-reviews-badge" data-id="{{ product.id }}"></span>Collection page badge
In the Snippets, open the product-list-item.liquid file. In this file, locate the product title and price codes. Between these blocks, add the code snippet, then Save.
Product page badge
Back in the product-main.liquid file, locate the product title code block. Searching for the H1 tags, locate the closing H1 tag:
</h1>
Between the closing tag and the </div> below it, add the code, then Save.
Vogue
Locate the Snippets folder to open the product.liquid file. At the very end of this file, add the following code:
<div id="shopify-product-reviews" data-id="{{product.id}}">{{ product.metafields.spr.reviews }}</div>
Save the file.
Using the single product view?
Add this code to the product-details.liquid in Snippets instead
Add the review badge snippet
Include an average review rating badge on the collection page and product page by adding the following code:
<span class="shopify-product-reviews-badge" data-id="{{ product.id }}"></span>Collection page badge
In the Snippets, open the product-item.liquid file. In this file, look for this block of code:
<div class="product-list-item-details {% if item.price %}has-price{% endif %}">
<h1 class="product-list-item-title">
Between these two lines, add the provided code, then Save.
Product page badge
Open the product-details.liquid file to locate the product vendor and title code blocks. Between these code blocks, add the code, then Save.
Reach
Locate the Snippets folder to open the product.liquid file. At the very end of this file, add the following code:
<div id="shopify-product-reviews" data-id="{{product.id}}">{{ product.metafields.spr.reviews }}</div>
Save the file.
Add the review badge snippet
Include an average review rating badge on the collection page and product page by adding the following code:
<span class="shopify-product-reviews-badge" data-id="{{ product.id }}"></span>Collection page badge
In the Snippets, open the product-item.liquid file. In this file, locate the product title and price codes. Between these blocks, add the code snippet, then Save.
Product page badge
Back in the product.liquid file, locate the product title and vendor code blocks. Between these code blocks, add the code, then Save.
Editions
Locate the Snippets folder to open the product.liquid file. At the very end of this file, add the following code:
<div id="shopify-product-reviews" data-id="{{product.id}}">{{ product.metafields.spr.reviews }}</div>
Save the file.
Add the review badge snippet
Include an average review rating badge on the collection page and product page by adding the following code:
<span class="shopify-product-reviews-badge" data-id="{{ product.id }}"></span>Collection page badge
In the Snippets, open the small-product-item.liquid file. In this file, locate the product title and price codes. Between these blocks, add the code snippet, then Save.
Product page badge
Open the product-title.liquid file to locate the product title and vendor code blocks. Between these code blocks, add the code, then Save.
Try Stamped
Interested in taking customer reviews to the next level? Stamped can import your current reviews to hit the ground running with a premium product reviews app.
Show me how to transfer current reviews to Stamped
