Using 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 your theme architecture version.

Click the button for your theme architecture version then follow the instructions to add review elements to your online store.

On this page

Add reviews and a review form in Online Store 2.0 themes
Add star ratings in Online Store 2.0 themes
Add reviews and a review form to your product page in sectioned themes
Add review score badges to your collection pages in sectioned themes
Add review score badges to your product page in sectioned themes
Add review score badges to your featured product in sectioned themes
Add reviews and a review form to your product page in non-sectioned themes
Add review score badges to your collection pages in non-sectioned themes
Add review score badges to your product page in non-sectioned themes

Add reviews and a review form in Online Store 2.0 themes

You can add the review and review form app block as a section on your product template, or as a block in the main product section of the product template. These options are available in all Online Store 2.0 themes from the Shopify Theme Store. You might be able to add them to other templates or sections, depending on your theme.

Add reviews and the review form as a section

From your Shopify admin, go to Online Store > Themes.
Find the theme that you want to edit, and then click Customize.
Navigate to the product template where you want to add the review and review form section.
Click Add section.
From the drop-down menu, in the Apps section, select the Reviews app block.
Optional: Move the app section to the place you want it on the page.
Click Save.

From the Shopify app, tap the … button.
In the Sales channels section, tap Online Store.
Tap Manage all themes.
Find the theme that you want to edit, and then tap Customize.
Tap Edit.
Navigate to the product template where you want to add the review and review form section.
Click Add section.
From the drop-down menu, in the Apps section, select the Reviews app block.
Optional: Move the app section to the place you want it on the page.
Click Save.

From the Shopify app, tap the … button.
In the Sales channels section, tap Online Store.
Tap Manage all themes.
Find the theme that you want to edit, and then tap Customize.
Tap Edit.
Navigate to the product template where you want to add the review and review form section.
Click Add section.
From the drop-down menu, in the Apps section, select the Reviews app block.
Optional: Move the app section to the place you want it on the page.
Click Save.

Add reviews and the review form as a block

From your Shopify admin, go to Online Store > Themes.
Find the theme that you want to edit, and then click Customize.
Navigate to the page and section where you want to add the review and review form block.
Click Add block.
From the drop-down menu, in the Apps section, select the Reviews app block.
Optional: Move the Reviews block to the place you want it in the section.
Click Save.

From the Shopify app, tap the … button.
In the Sales channels section, tap Online Store.
Tap Manage all themes.
Find the theme that you want to edit, and then tap Customize.
Tap Edit.
Navigate to the page and section where you want to add the review and review form block.
Click Add block.
From the drop-down menu, in the Apps section, select the Reviews app block.
Optional: Move the Reviews block to the place you want it in the section.
Click Save.

From the Shopify app, tap the … button.
In the Sales channels section, tap Online Store.
Tap Manage all themes.
Find the theme that you want to edit, and then tap Customize.
Tap Edit.
Navigate to the page and section where you want to add the review and review form block.
Click Add block.
From the drop-down menu, in the Apps section, select the Reviews app block.
Optional: Move the Reviews block to the place you want it in the section.
Click Save.

Add star ratings in Online Store 2.0 themes

You can add star ratings as a block in the main product section of the product template. This option is available in all Online Store 2.0 themes from the Shopify Theme Store. You might be able to add them to other sections and templates, depending on your theme.

Steps:

From your Shopify admin, go to Online Store > Themes.
Find the theme that you want to edit, and then click Customize.
Navigate to the page and section where you want to add the star rating.
Click Add block.
From the drop-down menu, in the Apps section, select the Star rating app block.
Optional: Move the Star rating block to the place you want it in the section, or customize the star color, size, alignment, and context.
Click Save.

From the Shopify app, tap the … button.
In the Sales channels section, tap Online Store.
Tap Manage all themes.
Find the theme that you want to edit, and then tap Customize.
Tap Edit.
Navigate to the page and section where you want to add the star rating.
Click Add block.
From the drop-down menu, in the Apps section, select the Star rating app block.
Optional: Move the Star rating block to the place you want it in the section, or customize the star color, size, alignment, and context.
Click Save.

From the Shopify app, tap the … button.
In the Sales channels section, tap Online Store.
Tap Manage all themes.
Find the theme that you want to edit, and then tap Customize.
Tap Edit.
Navigate to the page and section where you want to add the star rating.
Click Add block.
From the drop-down menu, in the Apps section, select the Star rating app block.
Optional: Move the Star rating block to the place you want it in the section, or customize the star color, size, alignment, and context.
Click Save.

Add reviews and a review form to your product page in sectioned themes

From your Shopify admin, go to Online Store > Themes.
Find the theme you want to edit, click the … button to open the actions menu, and then click 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.

From the Shopify app, tap the … button.
In the Sales channels section, tap Online Store.
Tap Manage themes.
Find the theme you want to edit, click the … button to open the actions menu, and then click 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.

From the Shopify app, tap the … button.
In the Sales channels section, tap Online Store.
Tap Manage themes.
Find the theme you want to edit, click the … button to open the actions menu, and then click 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

From your Shopify admin go to Online Store > Themes.
Find the theme that you want to edit, and then click the ... button > 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-grid.liquid
- 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

From your Shopify admin, go to Online Store > Themes.
Find the theme you want to edit, click the … button to open the actions menu, and then click 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.

From the Shopify app, tap the … button.
In the Sales channels section, tap Online Store.
Tap Manage themes.
Find the theme you want to edit, click the … button to open the actions menu, and then click 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.

From the Shopify app, tap the … button.
In the Sales channels section, tap Online Store.
Tap Manage themes.
Find the theme you want to edit, click the … button to open the actions menu, and then click 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

From your Shopify admin, go to Online Store > Themes.
Find the theme you want to edit, click the … button to open the actions menu, and then click 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.

From the Shopify app, tap the … button.
In the Sales channels section, tap Online Store.
Tap Manage themes.
Find the theme you want to edit, click the … button to open the actions menu, and then click 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.

From the Shopify app, tap the … button.
In the Sales channels section, tap Online Store.
Tap Manage themes.
Find the theme you want to edit, click the … button to open the actions menu, and then click 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

From your Shopify admin, go to Online Store > Themes.
Find the theme you want to edit, click the … button to open the actions menu, and then click 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.

From the Shopify app, tap the … button.
In the Sales channels section, tap Online Store.
Tap Manage themes.
Find the theme you want to edit, click the … button to open the actions menu, and then click 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.

From the Shopify app, tap the … button.
In the Sales channels section, tap Online Store.
Tap Manage themes.
Find the theme you want to edit, click the … button to open the actions menu, and then click 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

From your Shopify admin, go to Online Store > Themes.
Find the theme you want to edit, click the … button to open the actions menu, and then click 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-itemimage" src="{{ product.featured_image.src | img_url: grid_image_width, scale: grid_image_scale }}" alt="{{ product.featured_image.alt }}">
    <div class="h4 grid-view-itemtitle">{{ product.title }}</div>
      {% if section.settings.show_vendor %}
    <div class="grid-view-itemvendor">{{ 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.

From the Shopify app, tap the … button.
In the Sales channels section, tap Online Store.
Tap Manage themes.
Find the theme you want to edit, click the … button to open the actions menu, and then click 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-itemimage" src="{{ product.featured_image.src | img_url: grid_image_width, scale: grid_image_scale }}" alt="{{ product.featured_image.alt }}">
    <div class="h4 grid-view-itemtitle">{{ product.title }}</div>
      {% if section.settings.show_vendor %}
    <div class="grid-view-itemvendor">{{ 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.

From the Shopify app, tap the … button.
In the Sales channels section, tap Online Store.
Tap Manage themes.
Find the theme you want to edit, click the … button to open the actions menu, and then click 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-itemimage" src="{{ product.featured_image.src | img_url: grid_image_width, scale: grid_image_scale }}" alt="{{ product.featured_image.alt }}">
    <div class="h4 grid-view-itemtitle">{{ product.title }}</div>
      {% if section.settings.show_vendor %}
    <div class="grid-view-itemvendor">{{ product.vendor }}</div>
      {% endif %}
    <div class="grid-view-itemmeta">
      {% 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

From your Shopify admin, go to Online Store > Themes.
Find the theme you want to edit, click the … button to open the actions menu, and then click 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.

From the Shopify app, tap the … button.
In the Sales channels section, tap Online Store.
Tap Manage themes.
Find the theme you want to edit, click the … button to open the actions menu, and then click 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.

From the Shopify app, tap the … button.
In the Sales channels section, tap Online Store.
Tap Manage themes.
Find the theme you want to edit, click the … button to open the actions menu, and then click 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.