How to set up star ratings to show on your Collection pages in Shopify
Kindly follow the steps in this guide to display star ratings on your collection pages
From your dashboard, go to the On-Site Widgets
Select Star Rating from the list
Click on Embed Code and copy the star rating code:
Go to your theme files in your store and look for the liquid file for the collection page. This step is not a one-size-fits-all step. Once you've located the file, search for "price". Then paste the code you copied in the previous step at the end of the entire price
Case 1: For some users, the file that controls the collections pages could be the collections-template.liquid file under the Sections folder,
Case 2: It could be the product-item.liquid file under the Snippets folder.
Case 3( Shopify 2.0 stores) :
Search In the theme files for a file name card-product.liquid. It can be edited and the star code can be embedded. Instead of product.id we use card_product.id as follows:
<div data-kb-widget-type="kb-star-widget" id="{{ card_product.id }}"></div>
So paste under this code {% render 'price', product: card_product, price_class: '' %}
Case 4 ( Shopify 2.0 stores):
Search for a file name product-grid-item and embed code and copy the star rating code.
Hit the 'Save' button and check your collection pages on your site to see if it shows.
Note that it won't show till you have reviews for the products featured on your collection pages. If it's done right and you have reviews for some of your products and those products show on your collection page, it should show similar to this;
Please contact us if you followed the above steps but still could not get it to display correctly.
From your dashboard, go to the On-Site Widgets
Select Star Rating from the list
Click on Embed Code and copy the star rating code:
Go to your theme files in your store and look for the liquid file for the collection page. This step is not a one-size-fits-all step. Once you've located the file, search for "price". Then paste the code you copied in the previous step at the end of the entire price
Case 1: For some users, the file that controls the collections pages could be the collections-template.liquid file under the Sections folder,
Case 2: It could be the product-item.liquid file under the Snippets folder.
Case 3( Shopify 2.0 stores) :
Search In the theme files for a file name card-product.liquid. It can be edited and the star code can be embedded. Instead of product.id we use card_product.id as follows:
<div data-kb-widget-type="kb-star-widget" id="{{ card_product.id }}"></div>
So paste under this code {% render 'price', product: card_product, price_class: '' %}
Case 4 ( Shopify 2.0 stores):
Search for a file name product-grid-item and embed code and copy the star rating code.
Hit the 'Save' button and check your collection pages on your site to see if it shows.
Note that it won't show till you have reviews for the products featured on your collection pages. If it's done right and you have reviews for some of your products and those products show on your collection page, it should show similar to this;
Please contact us if you followed the above steps but still could not get it to display correctly.
Updated on: 01/11/2023
Thank you!