How to set up star ratings to show on your Collection pages in Shopify (NEW)
Kindly follow the steps in this guide to display star ratings on your collection pages
On your dashboard, click on Widgets from the left menu panel
Then, click on Star Rating from the list of widgets.
On the Star Rating settings page, you will see Embed Code and a string of code beneath it. Click on Copy to 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.
On your dashboard, click on Widgets from the left menu panel
Then, click on Star Rating from the list of widgets.
On the Star Rating settings page, you will see Embed Code and a string of code beneath it. Click on Copy to 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: 21/11/2024
Thank you!