Use this guide to integrate the Shopify Product Reviews app with Pixel Union's themes. Add the app, then follow the theme-specific guides below to complete the installation.
Select your theme
Empire
Empire is integrated with the app by default. There are no code changes necessary. To activate the app in the theme, go to Customize > Theme settings > Products > Enable product reviews and ratings
Empire's theme settings: Products
Atlantic
Step 1: Access the theme files
Go to your Online Store and locate your Atlantic theme. Select Actions, then Edit code to open the theme files.
Step 2: Add the product page review snippet
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.
Step 3: 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.scss.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
Step 1: Access the theme files
Go to your Online Store and locate your Grid theme. Select Actions, then Edit code to open the theme files.
Step 2: Add the product page review snippet
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.
Step 3: 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.
Pacific
Step 1: Access the theme files
Go to your Online Store and locate your Pacific theme. Select Actions, then Edit code to open the theme files.
Step 2: Add the product page review snippet
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.
Step 3: 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.
Superstore
Superstore is integrated with the app by default. There are no code changes necessary. To activate the app in the theme, go to Customize > Theme settings > Products > Enable product reviews and ratings
Activating the Product Reviews app
Startup
Step 1: Access the theme files
Go to your Online Store and locate your Startup theme. Select Actions, then Edit code to open the theme files.
Step 2: Add the product page review snippet
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.
Step 3: 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
Step 1: Access the theme files
Go to your Online Store and locate your Launch theme. Select Actions, then Edit code to open the theme files.
Step 2: Add the product page review snippet
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.
Step 3: 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.
Reach
Step 1: Access the theme files
Go to your Online Store and locate your Reach theme. Select Actions, then Edit code to open the theme files.
Step 2: Add the product page review snippet
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.
Step 3: 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.
Handy
Step 1: Access the theme files
Go to your Online Store and locate your Handy theme. Select Actions, then Edit code to open the theme files.
Step 2: Add the product page review snippet
Locate the Sections folder to open the static-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.
Step 3: 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 vendor codes. Between these blocks, add the code snippet, then Save.
Product page badge
Back in the product.liquid file, locate the product vendor and title code blocks. Between these code blocks, add the code, then Save.
Vogue
Step 1: Access the theme files
Go to your Online Store and locate your Vogue theme. Select Actions, then Edit code to open the theme files.
Step 2: Add the product page review snippet
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.
Step 3: 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, include 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.
Editions
Step 1: Access the theme files
Go to your Online Store and locate your Editions theme. Select Actions, then Edit code to open the theme files.
Step 2: Add the product page review snippet
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.
Step 3: 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.
