Build a mobile app and win BFCM 2019

x
Menu Close

How to add reviews to Shopify

You can add review to:

  • Product
  • Collection pages
  • Product Page

Steps to add reviews to Product:

  • Login to Shopify admin—-> Online Store —-> Themes
  • Select the theme you want to edit, click Actions, and then click Edit Code
  • Open “product-grid-item.liquid” file from the snippets directory

The file could have different names in different themes. It could have the following names:

  1. product-card.liquid
  2. product-card-item.liquid
  3. product-block.liquid
  • In the code, point the area in which you want the star rating badges to show up. Usually its found below the product title, so you can look for {{product.title}} Liquid tag to find the product title in the file
  • Paste the following snippet, below the line which includes code containing {{product.title}}

<span class=”shopify-product-reviews-badge” data-id=”{{ product.id }}”></span>

  • The code should appear something similar to 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>

 

  • The code can put to different places in the file to make it look different
  • Click Save

 

Steps to add reviews to Collection Pages:

  • Login to Shopify admin—-> Online Store —-> Themes
  • Select the theme you want to edit, click Actions, and then click Edit Code
  • Open “product-grid-item.liquid” file from the snippets directory

The file could have different names in different themes. It could have the following names:

  1. product-card.liquid
  2. product-card-item.liquid
  3. product-block.liquid
  • In the code, point the area in which you want the star rating badges to show up. Usually its found below the product title, so you can look for {{product.title}} Liquid tag to find the product title in the file
  • Paste the following snippet, below the line which includes code containing {{product.title}}

<span class=”shopify-product-reviews-badge” data-id=”{{ product.id }}”></span>

  • The code should appear something similar to 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>

 

  • The code can put to different places in the file to make it look different
  • Click Save

 

Steps to add reviews to Product Pages:

  • Login to Shopify admin—-> Online Store —-> Themes
  • Select the theme you want to edit, click Actions, and then click Edit Code
  • Open “product-template.liquid” file from the sections directory

The file could have different names in different themes. It could have the following names:

  1. product-card.liquid
  2. product-card-item.liquid
  3. product-block.liquid
  • In the code, point the area in which you want the star rating badges to show up. Usually its found below the product title, so you can look for {{product.title}} Liquid tag to find the product title in the file
  • Paste the following snippet, below the line which includes code containing {{product.title}}

<span class=”shopify-product-reviews-badge” data-id=”{{ product.id }}”></span>

  • The code should appear something similar to this:

<h1 itemprop=”name” class=”product-single__title”>{{ product.title }}</h1>

<span class=”shopify-product-reviews-badge” data-id=”{{ product.id }}”></span>

 

  • The code can put to different places in the file to make it look different
  • Click Save

 

Leave a Reply

Your email address will not be published. Required fields are marked *