Skip to main content

Install Star Rating on Shopify Collection Page

Ryan Liao
  • Updated

Follow instructions below to install star rating on Shopify Collection Page. 

To start, go to star ratings page and add star rating. For placement, select Custom Placement since only manual installation can be used for collection page.

screenshot-2020.12.22-00_49_31.png

After creation, click Show Code to get widget snippet. Snippet should look something like this:

<div
 class="ov-app ov-app-star-rating"
 data-app-id="STAR_RATING_ID"
 data-app="star-rating"
 data-product-external-id="{{ product.id }}">
</div>

 

Next, locate collection product file

  • product-grid-item.liquid
  • product-card.liquid
  • product-card-grid.liquid

Keep in mind that collection product file can have many different names but the ones above are the most common ones.

Search for an element with this code: {{ product.title }}

Then paste snippet after that element.

screenshot-onvoard-sample.myshopify.com-2020.12.22-01_11_28.png

This should position star rating just below product title element in collection page.

 

Using Product Metafields (Alternate Method)

Most Online Store 2.0 themes use product metafields to display ratings in product grid.

If your theme has built-in support for displaying ratings in product grid, you can use OnVoard to sync rating and rating count metadata. See Sync Shopify Product Rating Metafields.

 

Star rating not showing for some products?

Go to products page and check if product has been imported to our system. If product has not imported, we won't display star rating.

 

Need help installing?

If you need additional help to install, you can contact us.

Related articles