Skip to main content
All CollectionsFeaturesDisplay Reviews
Add Rating Under Product Pictures on Home Page & Collection Page
Add Rating Under Product Pictures on Home Page & Collection Page
Andy Collins avatar
Written by Andy Collins
Updated over a week ago

Preview

You can add a rating under the product picture on the home page and collection page to provide a quick snapshot of the products' average rating.

Installation guides

  1. Enable the star rating(Collection & Home page) widget in our App.

2. Make sure Audien Reviews is enabled in your Shopify theme editor.

The Review Star Rating Snippets should show up automatically under the titles of each product on your homepage and collections. If they don't, you might be using a custom theme. Please contact us so we can customize the placement for you ASAP.


Troubleshooting

In case of compatibility issues with your theme, the rating might not display on the home page, collection page, or cart. Follow these steps if you are comfortable with liquid code.

Shopify OS2.0 theme

If you are using Shopify OS2.0 theme:

1. From your Shopify admin, Sale channels > Online Store > Themes > Edit codes

2. Find card-product.liquid or product-card.liquid file in Snippets folder

3. Find this line of code:

<div class="caption-with-letter-spacing light">{{ card_product.vendor }}</div>

4. Copy the code below and paste it in the file as the picture shows in step 2:

<div class="audien-review-star-rating" style="display:none;" data-product-id="{{ card_product.id | default: product.id }}" data-domain="{{ shop.domain }}"></div>

Shopify vintage theme

If you are using Shopify vintage theme:

1. Same step 1 as the Shopify OS2.0 theme

2. Find product-card-grid.liquid file in Snippets folder

3. Find this line of code:

<div class="h4 grid-view-item__title product-card__title" aria-hidden="true">{{ product.title }}</div>

4. Copy the code below and paste it in the file as the picture shows in step 2.Then click 'Save'.

<div class="audien-review-star-rating" style="display:none;" data-product-id="{{ card_product.id | default: product.id }}" data-domain="{{ shop.domain }}"></div>
Did this answer your question?