Add Ratings & Reviews to Shopify 2.0

Use this article to integrate Bazaarvoice Ratings & Reviews into your Shopify 2.0 store to display UGC. You will learn how to:

Note: Before completing these steps, ensure you configure your account. Refer to the Configure app settings topic for more information.  

To add Ratings & Reviews, complete the following steps.

Step 1: Publish and display content on your Shopify store

Follow these steps to:

  • Display ratings, reviews, and questions and answers on your product pages
  • Display inline ratings on your collection pages

Product page

The following table shows the product page app blocks used to display Rating Summaries, Reviews, and Questions & Answers on your product pages. To learn more about displaying content, refer to the Overview of display article.

App block Description

Code snippet (use if  Add Block is not supported in your theme)
Ratings Summary

Display a product’s average star rating and a link to leave a review. The ratings summary is usually placed at the top of the page near the product title.

Review summary showing a 4.8-star rating based on 31 reviews. The breakdown includes: 26 five-star reviews, 4 four-star reviews, 1 three-star review, and 0 reviews for both two and one stars. 

<div data-bv-show="rating_summary"
data-bv-product-id="{{product.id}}"></div>

Reviews

Display a list of ratings and reviews for a product. This list is usually placed below the product image and description.

Product review page showing Average Customer Ratings: Quality 4.8, Value 4.8, and Sensitive Skin Friendly 5.0. Below are customer images of 'SUDS' brand skincare bottles and a 4-star review from Court titled 'In love with this product,' stating it helped hydrate skin and absorbs fast. 

<div data-bv-show="reviews"
data-bv-product-id="{{product.id}}"></div>

Questions & Answers

Display consumer questions and answers for a specific product. Questions & Answers are usually placed below the product image and description.

A web interface titled 'Questions' featuring a search input containing the word 'heating' and a 'Submit new question' button. Below, a single search result shows a question from user 'akileshrao' asking, 'Are there any heating issues with this product?' with an 'Answer this Question' button. 

<div data-bv-show="questions"
data-bv-product-id="{{product.id}}"></div>

To add product page blocks follow these steps:

  1. Open your Shopify theme.
  2. In your current theme, select Customize.
  3. From the drop-down menu at the top of the page, select Products > Default product.
  4. From the menu on the left side of the page, add a block or section to your product template. 
  5. If necessary, move the blocks and sections you’ve added to where you want them to appear in the product template.
  6. Save your changes.
To override Shopify’s div:empty CSS rule, add the following code to your PDP page:



Copy Code
CSS
div[data-bv-show] { 
	display: block !important;
}

Collection page

The following table shows the collection page app blocks used to display Product Card and Grid Ratings on your collection pages. These app blocks display inline ratings. The following image shows an example of inline ratings. 

Screenshot of a beauty product web page featuring a grid of six items: Leave-In Nourishing Conditioner, Dreamy Eyeshadow Palette, Hair Shampoo and Conditioner Duo, Luminescent Skin Glow Foundation, Gentle Moisturizer, and Radiant Colored Hair Shampoo. Each products displays an inline star ratings.

App block
Description
Product Card Ratings
Displays inline ratings on collection pages that use a product card style. Refer to the Inline ratings article to learn more.
Product Grid Ratings
Displays inline ratings on collection pages that use a product grid style. Refer to the Inline ratings article to learn more.

Follow these steps to display Product Card or Product Grid Ratings that show average star rating for each featured product. Select the code integration steps if your theme does not support app blocks:

App block steps

To display Product Card Ratings that show an average star rating for each featured product complete the following steps: 

  1. Go to your Shopify Theme.
  2. Select Collections.
  3. Select Add Block in your product card section and select Product Card Ratings.
  4. Drag the block to your preferred position under the product title.

To display Product Grid Ratings that show an average star rating for each featured product complete the following steps: 

  1. Go to your store preview and navigate to a page where the product grid is visible.
  2. Right-click the element where you want the star rating to appear and select Inspect.
  3. Locate and copy the CSS class name in the code. For example, .price_information.
  4. Paste the class name into the CSS selector field in the product grid block settings.
  5. Toggle the position setting to choose whether the rating appears above or below the target.
  6. Save your settings to display the ratings in your product grid.
Code integration steps

Your collection pages can display inline ratings that show an average star rating for each featured product. To add inline ratings to your collection pages:

  1. Open your Shopify ThemeOpens in new tab.
  2. In your current theme, select Edit code from the menu ellipsis icon.
  3. From the list of folders on the left side of the page, find the file containing your collection page code by searching in each folder or by entering the file name in the search field.

    The file is usually named product-card-list.liquid, product-card-grid.liquid, product-grid-item.liquid, or collection.liquid. It is most likely to be in the Templates folder, but may be in the Sections or Snippets folders.

  4. Ensure you’re using the correct file by adding placeholder text and confirming you can see this text below the product thumbnail.
  5. Once you’re satisfied with the placement of your placeholder text, replace it with the below Bazaarvoice inline ratings code to display star ratings.
Copy Code
HTML
<div data-bv-show="inline_rating" data-bv-product-id="{{product.id}}" data-bv-redirect-url="{{ product.url }}" data-bv-seo="false"></div>
  1. Save your changes. 
Note


Step 2: Update your SEO settings

Note: These instructions do not apply if your theme uses Shopify's native {{ product | structured_data }} tag, since there is no editable JSON-LD block to modify. Bazaarvoice is aware of this and investigating. 

Configure your SEO settings in product pages only to ensure search engines index your reviews:

  1. Open your Shopify Theme.
  2. In your current theme, select Edit code from the menu ellipsis icon.
  3. From the list of folders on the left side of the page, find the file containing the JSON LD block:
Copy Code
JSON
<script type="application/ld+json">
    Note: You can usually find the JSON LD block in the theme.liquid file in the Layout folder. If your store contains recipes or non-purchasable items, the block may be in your product page theme files. To find the block in these files:
    1. In your current theme, select Download theme file from the menu ellipsis icon.
    2. In the files you’ve downloaded, search for the JSON LD block and note which files contain it.
    3. Return to Shopify and select the file or files containing the JSON LD block.

  1. Add "@id" : "{{shop.url}}{{ product.url }}", to the JSON LD block, as the following example shows:

    Copy Code
    HTML
    <script type="application/ld+json">
  {
   "@context" : "https://schema.org",
   "@type" : "Product",
   "@id" : "{{shop.url}}{{ product.url }}",
   …
  }
    
</script>

  2. Save your changes.
Provide feedback button