Using the Product Reviews app

Product Reviews app icon Go to the app store to install Product Reviews for Shopify

Product Reviews makes adding reviews to your website quick and easy.

The steps for this tutorial differ depending on whether you are using a sectioned or a non-sectioned theme. To figure out whether your theme supports sections, go to the theme's Edit HTML/CSS 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 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

  1. Find the theme you want to edit, click the ... button, and then click Edit HTML/CSS.

  2. In the Sections directory, open product-template.liquid

  3. 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.

  4. 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 should 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>
    
  5. Click Save.

Add review score badges to your collection pages in sectioned themes

  1. Find the theme you want to edit, click the ... button, and then click Edit HTML/CSS.

  2. In the Snippets directory, open product-grid-item.liquid file.

    In some themes, this file will have a different name. If you cannot find product-grid-item.liquid, look for one of the following:

    • product-card.liquid
    • product-card-item.liquid
    • product-block.liquid
  3. Find the area in the code where you want your star ratings 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.

  4. 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 should 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.

  5. Click Save.

Add review score badges to your product page in sectioned themes

  1. Find the theme you want to edit, click the ... button, and then click Edit HTML/CSS.

  2. In the Sections directory, open product-template.liquid

  3. Find the area in the code where you want your star ratings 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.

  4. 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 should 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.

  5. Click Save.

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

  1. Find the theme you want to edit, click the ... button, and then click Edit HTML/CSS.

  2. In the Templates directory, open product.liquid

  3. 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.

  4. 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 should 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>
    
  5. Click Save.

Add review score badges to your collection pages in non-sectioned themes

  1. Find the theme you want to edit, click the ... button, and then click Edit HTML/CSS.

  2. In the Snippets directory, open product-grid-item.liquid.

    In some themes, this file will have a different name. If you cannot find product-grid-item.liquid, 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, your product grid code might be found in the collection.liquid file in the Templates directory.

  3. Find the area in the code where you want your star ratings 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.

  4. 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 should 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.

  5. Click Save.

Add review score badges to your product page in non-sectioned themes

  1. Find the theme you want to edit, click the ... button, and then click Edit HTML/CSS.

  2. In the Templates directory, open product.liquid.

  3. Find the area in the code where you want your star ratings 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.

  4. 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 should 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.

  5. Click Save.

Want to discuss this page?

Visit the Shopify Community

Ready to start selling online with Shopify?

Try it free