One effective way to enhance the visual appeal and informative value of your Shopify collection page is by incorporating review rating numbers and the corresponding feedback count for each product. This simple customization not only adds a professional touch but also provides potential customers with valuable insights into product popularity and quality. This guide will walk you through the process of displaying total review counts using the Product Review App.

Here’s a step-by-step breakdown of how to achieve this:

  1. Access your Shopify admin panel and navigate to “Online Store.”
  2. Within the “Online Store” section, select “Themes.”
  3. Identify the theme you wish to edit and click on “Actions” for that theme.
  4. From the dropdown menu, choose “Edit Code.”
  5. In the code editor, locate the “product-grid-item.liquid” file within the “Snippets” directory. Note that some themes may have variations of this file with different names, such as:
    • product-card.liquid
    • product-card-item.liquid
    • product-block.liquid
  6. In the code, look for the area where you want to show the total review count. Typically, you will want to do this in the middle of the product title. Search for {{ product.title }} to find the product title.
  7. Paste the following code on a new line under the code containing the product title Liquid tag. 
<span class="shopify-product-reviews-badge" data-id="{{ product.id }}"></span>

If you want to add total review counts to any other place on the page, you can add the code in various places until you like its positions. Finally, click Save. 

Here’s how the final code should look like. 

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

Displaying total review counts in Shopify

Since this is a Shopify app, it offers a wide range of capabilities. To explore its full potential, we recommend reading the app’s manual, which provides detailed insights into its features and functionalities.