With Shopify Online Store 2.0 themes, you can easily add the Star Rating Badge through the Shopify theme editor—no coding required. This guide walks you through the process step by step.
Steps to add star ratings on your product page
Step 1: Enable Judge.me app embed
For the Star Rating Badge to work, the app embed needs to be enabled.
To enable Judge.me app embed:
From your Shopify admin, go to Online Store > Themes.
Find the theme you want to edit and click Customize.
Click the App embeds icon (third one on the left panel).
Enable Judge.me app embed.
Click Save.
Note: If you see the error "App embeds missing from live theme" but you already enabled the app embed, you can safely ignore the error or click the X on the right to close the message.
Step 2: Add the Star Rating Badge block
Option 1: Add the Star Rating Badge block using Shopify theme editor (recommended)
To install the Star Rating Badge in Shopify theme editor:
Go to Shopify theme editor:
From your Shopify admin, go to Online Store > Themes.
Find the theme you want to edit and click Customize.
Find the right template:
From the dropdown menu at the top, select Products > Default product.
Add the block:
On the left panel, inside Template, click the right-arrow icon (>) next to the Product information section to open it.
Hover under Title and click the + icon to add the block.
Go to the Apps tab and select Star Ratings.
Click Save.
Note: By default, the Star Rating Badge will be hidden if the product has no reviews, but you can choose to show the Star Rating Badge on a product without reviews.
Option 2: Add the Star Rating Badge block from Judge.me
To install the Star Rating Badge automatically:
From your Judge.me admin, go to Widgets > Star Rating Badge > Customize.
Click the Install button.
You’ll be redirected to the Shopify theme editor, where the Star Rating block has been added automatically.
On the left panel, inside Template, click the right-arrow icon (>) next to the Product information section to open it.
Hover over the Star ratings block, hold the 6-dot icon (⋮⋮) and drag it up or down to change its position.
Click Save in the Shopify theme editor.
See the steps for the new app design (coming soon)
See the steps for the new app design (coming soon)
To install the Star Rating Badge automatically from Judge.me:
From your Judge.me admin, go to Settings > Widgets.
Find the Star Rating Badge card and click Customize.
Click Install.
You’ll be redirected to the Shopify theme editor, where the Star Rating block is automatically added.
In the left-side panel, under Template, click the > icon next to Product information to expand it.
Hover over the Star ratings block, hold the 6-dot icon (⋮⋮), and drag it up or down to change its position.
Click Save in the theme editor.
Troubleshoot
"preview_badge" not added. There is a problem with the app block
"preview_badge" not added. There is a problem with the app block
Issue:
After clicking the Install button from Option 2, you see a red error message in Shopify theme editor: "preview_badge" not added. There is a problem with the app block. Contact the app developer.
Why it happens:
This error appears when Shopify is unable to add the Star Rating block in your theme.
How to fix:
You can manually install the Star Rating Badge in Shopify theme editor using Option 1 instead.
Failed, click to try again
Failed, click to try again
Issue:
During the onboarding Install the Star Ratings Badge step, after clicking the Install Star Ratings button, you run into this error message: "Failed, click to try again".
Why it happens:
This error appears if we detect that the Star Rating block isn't added to your theme.
How to fix:
Click the Failed, click to try again button, and make sure to click Save in the Shopify theme editor screen.
If you have already clicked Save but the issue persists:
From the onboarding screen, click Continue.
Then click Skip step to skip that specific step and proceed with the rest of the onboarding.
I see 2 sets of star ratings
I see 2 sets of star ratings
Issue:
After adding the Star Rating Badge, you see multiple sets of star ratings on your product page.
Why it happens:
Duplicated star ratings can happen if the Star Ratings block was added twice or there's an extra set of stars from the theme.
How to fix:
Check if the Star Rating Badges on your product page look exactly the same.
If both star rating badges have the same shape, color, and number of reviews, you can remove the duplicated block in Shopify theme editor.
To remove the Star Rating block:
From your Shopify admin, go to Online Store > Themes.
Find the theme you want to edit and click Customize.
From the dropdown menu at the top, select Products > Default product.
On the left panel, inside Template, look for the duplicated Star Rating block and click the Trash can icon to remove it.
Click Save.
If the star rating badges have different shapes and colors, one of them may be the default stars from your theme.
To disable the theme's default stars:
From your Shopify admin, go to Online Store > Themes.
Find the theme you want to edit and click Customize.
From the dropdown menu at the top, select Products > Default product.
On the left panel, inside Template, click the right-arrow icon (>) next to the Product information section to open it.
Hover over the Product rating block and click the Trash can icon to remove it.
Click Save.
The Star Rating Badge is not clickable
The Star Rating Badge is not clickable
Issue:
When you click the Star Rating Badge, it doesn't show the reviews of that product.
Why it happens:
By default, when clicking the Star Rating Badge, it will jump straight to the Review Widget. If clicking the Star Rating Badge doesn't have any action, it's likely that the Review Widget is not installed.
How to fix:
To make the Star Rating Badge clickable and shows the reviews of that product, you can install the Review Widget.
Star Rating Badge shows in preview but not on live store
Star Rating Badge shows in preview but not on live store
Issue:
After adding the Star Ratings block, you can see the Star Rating Badge in the Customize page of your Shopify theme editor, but not on your live store, product page, or browser.
How to fix:
While the reason why the Star Rating Badge shows in the preview, but not on your live store is still unclear, to fix it, you can remove the current Star Ratings block and use a custom liquid block instead.
To remove the current Star Ratings block:
From your Shopify admin, go to Online Store > Themes.
Find the theme you want to edit and click Customize.
From the dropdown menu at the top, select Products > Default product.
On the left panel, inside Template, click the right-arrow icon (>) next to the Product information section to open it.
Look for the duplicated Star Ratings block and click the Trash can icon to remove it.
Click Save.
To add the Star Rating Badge using custom liquid block:
From your Shopify admin, go to Online Store > Themes.
Find the theme you want to edit and click Customize.
From the dropdown menu at the top, select Products > Default product.
On the left panel, inside Template, click the right-arrow icon (>) next to the Product information section to open it.
Hover under Title and click the + icon to add the block and select Custom Liquid.
Paste in the following code for Star Rating Badge:
<!-- 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 -->Hover over the Custom Liquid block, hold the 6-dot icon (⋮⋮) and drag it up or down to change its position.
Click Save.