Using the Product Reviews app
After you've installed the Product Reviews app, you can add review forms to your product pages, and review score badges to your product and collection pages.
The steps for this tutorial differ depending on whether you are using a sectioned or a non-sectioned theme. A sectioned theme is a newer theme that lets you drag and drop to arrange the layout of your store's pages.
To figure out whether your theme supports sections, go to the theme's Edit code page. If there are files in the Sections directory, you are using a sectioned theme. Non-sectioned themes were released before October 2016, and do not have files in the Sections directory.
If you are using a sectioned theme, then click the Sectioned themes button and follow the instructions. If you are using an older, non-sectioned theme, then click the Non-sectioned themes button and follow the instructions.
Add reviews and a review form to your product page in sectioned themes
To add review forms to your product pages:
From your Shopify admin, go to Online Store > Themes.
Find the theme you want to edit, and then click Actions > Edit code.
From the Shopify app, tap Store.
In the Sales channels section, tap Online Store.
Tap Manage themes.
Find the theme you want to edit, and then click Actions > Edit code.
From the Shopify app, tap Store.
In the Sales channels section, tap Online Store.
Tap Manage themes.
Find the theme you want to edit, and then click Actions > Edit code.
In the Sections directory, open
product-template.liquid
.Find the area in the code where you want your reviews to appear. Usually, this is below the product description. To find your product description in the file, search for the
{{ product.description }}
Liquid tag.-
Below the code that contains the
{{ product.description }}
Liquid tag, paste the following snippet:<div id="shopify-product-reviews" data-id="{{product.id}}">{{ product.metafields.spr.reviews }}</div>
Your code placement might look something like this:
<div class="product-single__description rte" itemprop="description"> {{ product.description }} </div> <div id="shopify-product-reviews" data-id="{{product.id}}">{{ product.metafields.spr.reviews }}</div>
Click Save.
Add review score badges to your collection pages in sectioned themes
Steps:
From your Shopify admin go to Online Store > Themes.
Find the theme that you want to edit, and then click Actions > Edit code.
-
In the Snippets directory, open
product-grid-item.liquid
file.In some themes, this file has a different name. If you cannot find
product-grid-item.liquid
, then look for one of the following:-
product-card.liquid
-
product-card-item.liquid
-
product-block.liquid
-
product-item.liquid
-
Find the area in the code where you want your review score badges to appear. Usually, this is somewhere below the product title. To find your product title in the file, search for the
{{ product.title }}
Liquid tag.-
On a new line below the code that contains the
{{ product.title }}
Liquid tag, paste the following snippet:<span class="shopify-product-reviews-badge" data-id="{{ product.id }}"></span>
Your code placement might look something like this:
<div class="grid-view-item{% unless product.available %} product-price--sold-out grid-view-item--sold-out{% endunless %}"> <a class="grid-view-item__link" href="{{ product.url | within: collection }}"> <img class="grid-view-item__image" src="{{ product.featured_image.src | img_url: grid_image_width, scale: grid_image_scale }}" alt="{{ product.featured_image.alt }}"> <div class="h4 grid-view-item__title">{{ product.title }}</div> {% 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> <span class="shopify-product-reviews-badge" data-id="{{ product.id }}"> </span> </a> </div>
You can experiment with putting the code in different places in the file to see where you like it best.
Click Save.
Add review score badges to your product page in sectioned themes
To add review score badges to your product pages:
From your Shopify admin, go to Online Store > Themes.
Find the theme you want to edit, and then click Actions > Edit code.
From the Shopify app, tap Store.
In the Sales channels section, tap Online Store.
Tap Manage themes.
Find the theme you want to edit, and then click Actions > Edit code.
From the Shopify app, tap Store.
In the Sales channels section, tap Online Store.
Tap Manage themes.
Find the theme you want to edit, and then click Actions > Edit code.
In the Sections directory, open
product-template.liquid
.Find the area in the code where you want your review score badges to appear. Usually, this is just below the product title. To find your product title in the file, search for the
{{ product.title }}
Liquid tag.-
On a new line below the code that contains the
{{ product.title }}
Liquid tag, paste the following snippet:<span class="shopify-product-reviews-badge" data-id="{{ product.id }}"></span>
Your code placement might look something like this:
<h1 itemprop="name" class="product-single__title">{{ product.title }}</h1> <span class="shopify-product-reviews-badge" data-id="{{ product.id }}"></span>
You can experiment with putting the code in different places in the file to see where you like it best.
Click Save.
Add review score badges to your featured product in sectioned themes
To add review score badges to your featured product on the home page:
From your Shopify admin, go to Online Store > Themes.
Find the theme you want to edit, and then click Actions > Edit code.
From the Shopify app, tap Store.
In the Sales channels section, tap Online Store.
Tap Manage themes.
Find the theme you want to edit, and then click Actions > Edit code.
From the Shopify app, tap Store.
In the Sales channels section, tap Online Store.
Tap Manage themes.
Find the theme you want to edit, and then click Actions > Edit code.
In the Sections directory, open
featured-product.liquid
file.Find the area in the snippet where you want your review score badges to appear. Usually, this is somewhere below the product title. To find your product title in the file, search for the
{{ title }}
Liquid tag. If you can't find{{ title }}
tag, then search for{{ product.title }}
tag.-
On a new line below the code that contains the
{{ product.title }}
Liquid tag, paste the following snippet:<span class="shopify-product-reviews-badge" data-id="{{ product.id }}"></span>
Your code placement might look something like this:
<div class="grid__item product-single__meta--wrapper medium--five-twelfths large--five-twelfths"> {% if section.settings.show_vendor %} <h2 class="product-single__vendor" itemprop="brand">{{ vendor }}</h2> {% endif %} <h1 class="product-single__title" itemprop="name">{{ title }}</h1> <span class="shopify-product-reviews-badge" data-id="{{ product.id }}"></span> <div itemprop="offers" itemscope itemtype="http://schema.org/Offer"> {% comment %}
You can experiment with putting the code in different places in the file to see where you like it best.
Click Save.
Add reviews and a review form to your product page in non-sectioned themes
To add review forms to your product pages:
From your Shopify admin, go to Online Store > Themes.
Find the theme you want to edit, and then click Actions > Edit code.
From the Shopify app, tap Store.
In the Sales channels section, tap Online Store.
Tap Manage themes.
Find the theme you want to edit, and then click Actions > Edit code.
From the Shopify app, tap Store.
In the Sales channels section, tap Online Store.
Tap Manage themes.
Find the theme you want to edit, and then click Actions > Edit code.
In the Templates directory, open
product.liquid
.Find the area in the code where you want your reviews to appear. Usually, this is below the product description. To find your product description in the file, search for the
{{ product.description }}
Liquid tag.-
Below the code that contains the
{{ product.description }}
Liquid tag, paste the following snippet:<div id="shopify-product-reviews" data-id="{{product.id}}">{{ product.metafields.spr.reviews }}</div>
Your code placement might look something like this:
<div class="product-single__description rte" itemprop="description"> {{ product.description }} </div> <div id="shopify-product-reviews" data-id="{{product.id}}">{{ product.metafields.spr.reviews }}</div>
Click Save.
Add review score badges to your collection pages in non-sectioned themes
To add review score badges to your collection pages:
From your Shopify admin, go to Online Store > Themes.
Find the theme you want to edit, and then click Actions > Edit code.
From the Shopify app, tap Store.
In the Sales channels section, tap Online Store.
Tap Manage themes.
Find the theme you want to edit, and then click Actions > Edit code.
From the Shopify app, tap Store.
In the Sales channels section, tap Online Store.
Tap Manage themes.
Find the theme you want to edit, and then click Actions > Edit code.
-
In the Snippets directory, open
product-grid-item.liquid
.In some themes, this file has a different name. If you cannot find
product-grid-item.liquid
, then look for one of the following:-
product-card.liquid
-
product-card-item.liquid
-
product-block.liquid
If your theme doesn't have any of the above files, then your product grid code might be found in the
collection.liquid
file in the Templates directory. -
Find the area in the code where you want your review score badges to appear. Usually, this is somewhere below the product title. To find your product title in the file, search for the
{{ product.title }}
Liquid tag.-
On a new line below the code that contains the
{{ product.title }}
Liquid tag, paste the following snippet:<span class="shopify-product-reviews-badge" data-id="{{ product.id }}"></span>
Your code placement might look something like this:
<div class="grid-view-item{% unless product.available %} product-price--sold-out grid-view-item--sold-out{% endunless %}"> <a class="grid-view-item__link" href="{{ product.url | within: collection }}"> <img class="grid-view-item__image" src="{{ product.featured_image.src | img_url: grid_image_width, scale: grid_image_scale }}" alt="{{ product.featured_image.alt }}"> <div class="h4 grid-view-item__title">{{ product.title }}</div> {% 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> <span class="shopify-product-reviews-badge" data-id="{{ product.id }}"> </span> </a> </div>
You can experiment with putting the code in different places in the file to see where you like it best.
Click Save.
Add review score badges to your product page in non-sectioned themes
To add review score badges to your product pages:
From your Shopify admin, go to Online Store > Themes.
Find the theme you want to edit, and then click Actions > Edit code.
From the Shopify app, tap Store.
In the Sales channels section, tap Online Store.
Tap Manage themes.
Find the theme you want to edit, and then click Actions > Edit code.
From the Shopify app, tap Store.
In the Sales channels section, tap Online Store.
Tap Manage themes.
Find the theme you want to edit, and then click Actions > Edit code.
In the Templates directory, open
product.liquid
.Find the area in the code where you want your review score badges to appear. Usually, this is just below the product title. To find your product title in the file, search for the
{{ product.title }}
Liquid tag.-
On a new line below the code that contains the
{{ product.title }}
Liquid tag, paste the following snippet:<span class="shopify-product-reviews-badge" data-id="{{ product.id }}"></span>
Your code placement might look something like this:
<h1 itemprop="name" class="product-single__title">{{ product.title }}</h1> <span class="shopify-product-reviews-badge" data-id="{{ product.id }}"></span>
You can experiment with putting the code in different places in the file to see where you like it best.
Click Save.