Add Ratings & Reviews to Shopify vintage

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

• Publish and display content on your Shopify store 
• Update your SEO settings ​

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

To add Ratings & Reviews, follow the below 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
• Collect transaction data from your checkout pages to power conversion impact reports and automated review request messages

Product page

1. Open your Shopify theme .
2. In your current theme, select Edit code from the menu .
3. Find the file that contains your product page code.

   The file is usually titled product.liquid or main-product.liquid. It is most likely to be in the Templates folder or, less frequently, the Sections folder.

4. Ensure you’re using the correct file by adding placeholder text and confirming it’s visible on the product page.
5. Finalize the placeholder placement and replace it with code snippets to display the desired content types.
   
   

Content type	Description	Code snippet to add to file
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.	<div data-bv-show="rating_summary" data-bv-product-id="{{product.id}}"></div>
Reviews	Display a list of consumer ratings and reviews for a product. This list is usually placed below the product image and description.	<div data-bv-show="reviews" data-bv-product-id="{{product.id}}"></div>
Questions and Answers	Display consumer questions and answers for a specific product. Questions and answers are usually placed below the product image and description.	<div data-bv-show="questions" data-bv-product-id="{{product.id}}"></div>



6. Save your changes.

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

1. Open your Shopify Theme .
2. In your current theme, select Edit code from the menu .
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. Finalize the placeholder placement and replace it with the 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>

   
   
6. Save your changes.

Note: Use the bv-exclude tag to exclude products from Bazaarvoice functionality. Refer to the Exclude Bazaarvoice features from products article to learn more. 

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.

To update your SEO settings:

1. Open your Shopify Theme .
2. In your current theme, select Edit code from the menu .
3. From the list of folders on the left side of the page, find the file containing the below JSON LD block:

<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 .
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.
4. Add "@id" : "{{shop.url}}{{ product.url }}", to the JSON LD block, as the below code block shows:
   

   Copy Code JavaScript

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

5. Save your changes.