Available on the Free plan
A collection (also known as "product grid", "product list", "product category", "product card", "collection list") displays related products together (e.g. all "Summer Dresses" or "Best Sellers"), making it easier for customers to browse by category. A collection is usually used on the collection page and home page.
Displaying the star ratings and review count on these collections helps customers quickly assess product quality, increasing trust and boosting sales.
Considerations
Google doesn't accept review snippets for the homepage, Reviews Page, and collection page as they should only “provide review information about a specific item, not about a category or a list of items".
Add the Star Rating Badge to the collection page using app blocks
If you're using one of the 10 Horizon themes (Tinker, Ritual, Fabric, Pitch, Dwell, Savor, Horizon, Heritage, Atelier, Vessel), you can easily use app block to add the Star Rating Badge on your collections.
Step 1: Enable Judge.me app embed
To enable Judge.me app embed:
From your Shopify admin, go to Online Store > Themes.
Find the theme that you want to edit, and then click Edit theme.
Click the App embeds icon (the third icon) on the top left.
In the search bar, enter "Judge.me".
Turn on the Judge.me app embed toggle.
Click Save on the top right.
Step 2: Add the Star Ratings block
To add the Star Ratings block to your collections:
From your Shopify admin, go to Online Store > Themes.
Find the theme that you want to edit, and then click Edit theme.
At the top of the theme editor, open the template dropdown in the middle.
Select Collections > Default collection, or any template your collection page uses.
On the sidebar, inside Template, click the arrow icon (>) next to the section that shows your products, such as Collection.
Click Add block directly under Product card.
In the search bar, enter "Star Ratings".
Click the Apps tab.
Select the Star Ratings block from Judge.me Reviews.
(Optional) Drag the 6-dot icon (⋮⋮) up or down to change where the stars sit on the card.
Click Save on the top right.
If your collection pages use more than one template, repeat these steps for each template.
Add the Star Rating Badge on the collection page using the in-app Install button
If you're not using any of the 10 Horizon themes, add the Star Rating Badge to your collection pages with the Install button in the Judge.me Reviews app. The Install button shows only for themes we support. If you don't see it, set up the Star Rating Badge with Liquid code.
Step 1: Enable Judge.me app embed
To enable Judge.me app embed:
From your Shopify admin, go to Online Store > Themes.
Find the theme that you want to edit, and then click Edit theme.
Click the App embeds icon (the third icon) on the top left.
In the search bar, enter "Judge.me".
Turn on the Judge.me app embed toggle.
Click Save on the top right.
Step 2: Install Star Rating Badge
To add the Star Rating Badge to your collection page using the in-app Install button:
From your Judge.me Reviews app, go to Settings > Widgets > Star Rating Badge.
In the Install section, click the Install button below Add the Star Rating Badge on collection pages (optional).
When you click Install, we add the Star Rating Badge to all collections in your published theme, and the button changes to Installed.
If the install doesn't work:
You see Update app permissions instead of Install: click it and approve the request. Judge.me needs permission to edit your theme files.
You see Widget installation failed: We couldn't install or remove the widget on your collection pages: click Install again. If it still fails, contact our support team and we'll add the Star Rating Badge for you.
Add the Star Rating Badge on the collection page with Liquid code
If you're not using a Horizon theme and don't see the Install button in the Judge.me Reviews app, add the Star Rating Badge to your product cards with Liquid code.
Step 1: Enable Judge.me app embed
To enable Judge.me app embed:
From your Shopify admin, go to Online Store > Themes.
Find the theme that you want to edit, and then click Edit theme.
Click the App embeds icon (the third icon) on the top left.
In the search bar, enter "Judge.me".
Turn on the Judge.me app embed toggle.
Click Save on the top right.
Step 2: Add the Star Rating Badge code
From your Shopify admin, go to Online Store > Themes.
Find the theme that you want to edit, and then click the 3-dot icon (...) next to Edit theme.
Click Edit code.
Open the file that shows your product cards, for example snippets/card-product.liquid in Dawn.
Paste the following code where you want the stars to show, for example below the price:
<!-- Start of Judge.me code -->
<div style='{{ jm_style }}' class='jdgm-widget jdgm-preview-badge' data-id='{{ product.id }}' data-auto-install='false'>
{{ product.metafields.judgeme.badge }}
</div>
<!-- End of Judge.me code -->Click Save on the top right.
If you’d prefer not to edit the code yourself, feel free to reach out to our support team and we’ll be happy to help.
Remove Star Rating Badge from collection page
To remove the Star Rating Badge from the collection page:
From your Judge.me Reviews app, go to Settings > Widgets > Star Rating Badge.
Under Add the Star Rating Badge on collection pages (optional), click Remove.
Disable your theme’s default star ratings
By default, your theme may display its own star rating badge. These theme stars are solid black with sharp points, followed by the total number of reviews in parentheses.
Since these are not our Star Rating Badge, Judge.me settings (such as color changes) will not affect them. To change the star color, you’ll need to disable the theme’s default stars and add the Judge.me Star Ratings badge instead.
If your Judge.me Star Rating Badge is also enabled, the two sets of stars will appear duplicated on the collection page. In this case, simply disable the theme’s default stars to remove the duplicate.
To disable the theme’s default star rating badge on the collection page:
From your Shopify admin, go to Online Store > Themes.
Find the theme that you want to edit, and then click Edit theme.
At the top of the theme editor, open the template dropdown in the middle.
Select Collections > Default collection, or any template your collection page uses.
From the left menu, click the Product grid section.
Under Product card, disable Show product rating.
Click Save.
Resources
Get your free trial:
🚀 Choose from additional rating icons—like hearts, crowns, paws, and more, to better match your brand style—with a 15-day free trial of Judge.me Awesome plan.
See our latest updates:
➡️ Check our Unboxed page to discover newly launched features and improvements from Judge.me. See what’s new and start using the latest updates to grow your store.