Collections help customers browse the product categories that they’re interested in without having to look through multiple pages of products.

In this article, we'll show you how to install Star Ratings on your collections, including collection pages and homepage.

Install using Shopify theme editor (easy)

If you're using an Online Store 2.0 theme (like Dawn), you can enable Star Ratings from Judge.me settings:

Go to Widgets > Star Rating Badge > Install.
In the Add the Star Rating Badge on collection page (optional), click Install.

The Star Rating will be added automatically to your collection pages.

Install using liquid code (advanced)

If you want the Star Ratings to be Judge.me branded, you can install it using liquid code.

Star Ratings installed via code will show on both your collection pages and the collection on your homepage. It also allows you to change the position of the ratings.

Step 1: Enable Judge.me app embed

From your Shopify admin, go to Online Store > Themes.
Find the theme you want and click Customize.
Go to App embeds and enable Judge.me.
Click Save.

Step 2: Add the Star Ratings code

Once you've enabled Judge.me app embed, go back to Online Store > Themes.
Click "..." > Edit code.
Then depending on your theme, the next steps might differ.

Theme	Installation steps
Athens Be Yours Chord Colorblock Craft Crave Dawn Eurus Ignite Launch Origin Publisher Ride Refresh Sense Spotlight Studio Taste Trade Viola	Open card-product.liquid. Above the line that contains `{%- if show_rating` , add the following code: <!-- Start of Judge.me code --> <div class='jdgm-widget jdgm-preview-badge'> {{ card_product.metafields.judgeme.badge }} </div> <!-- End of Judge.me code --> Click Save.
Marble Sahara	Open card-product.liquid. Under the line that contains `<!-- /.card-product__title` , add the following code: <!-- Start of Judge.me code --> <div class='jdgm-widget jdgm-preview-badge'> {{ product_ref.metafields.judgeme.badge }} </div> <!-- End of Judge.me code --> Click Save.
Maranello Mono Divide	Open card-product.liquid. Under the line that contains `</h3>` , add the following code: <!-- Start of Judge.me code --> <div class='jdgm-widget jdgm-preview-badge'> {{ card_product.metafields.judgeme.badge }} </div> <!-- End of Judge.me code --> Click Save.
Blum	Open card-product.liquid. Under the line that contains `</h3>` , add the following code: <!-- Start of Judge.me code --> <div class='jdgm-widget jdgm-preview-badge'> {{ product.metafields.judgeme.badge }} </div> <!-- End of Judge.me code --> Click Save.
Baseline Creative District Expanse Fetch Flow Impulse Label Motion North Streamline Sydney	Open product-grid-item.liquid. Under the line that contains `{{ product.title }}` , add the following code: <!-- Start of Judge.me code --> <div class='jdgm-widget jdgm-preview-badge'> {{ product.metafields.judgeme.badge }} </div> <!-- End of Judge.me code --> Click Save.
Modular	Open product-grid-item.liquid. Under the line that contains `product-block__title` , add the following code: <!-- Start of Judge.me code --> <div class='jdgm-widget jdgm-preview-badge'> {{ product.metafields.judgeme.badge }} </div> <!-- End of Judge.me code --> Click Save.
Broadcast	Open product-grid-item.liquid. Under the line that contains `product-item__title` , add the following code: <!-- Start of Judge.me code --> <div class='jdgm-widget jdgm-preview-badge'> {{ product.metafields.judgeme.badge }} </div> <!-- End of Judge.me code --> Click Save.
Pipeline	Open snippets/product-grid-item.liquid. Above the line that contains `if settings.product_grid_show_rating` , add the following code: <!-- Start of Judge.me code --> <div class='jdgm-widget jdgm-preview-badge'> {{ product.metafields.judgeme.badge }} </div> <!-- End of Judge.me code --> Click Save.
Story	Open product-grid-item.liquid. Above the line that contains `<p class="price_wrapper{% if on_sale %} on-sale{% endif %}">` , add the following code: <!-- Start of Judge.me code --> <div class='jdgm-widget jdgm-preview-badge'> {{ product.metafields.judgeme.badge }} </div> <!-- End of Judge.me code --> Click Save.
Empire	Open product-grid-item.liquid. Under the line that contains `</h2>` , add the following code: <!-- Start of Judge.me code --> <div class='jdgm-widget jdgm-preview-badge'> {{ product.metafields.judgeme.badge }} </div> <!-- End of Judge.me code --> Click Save.
Palo Alto	Open product-grid-item.liquid. Above the line that contains `{%- if settings.show_rating` , add the following code: <!-- Start of Judge.me code --> <div class='jdgm-widget jdgm-preview-badge'> {{ product.metafields.judgeme.badge }} </div> <!-- End of Judge.me code --> Click Save.
Venue	Open product-grid-item.liquid. Under the line that contains `product-card__title` , add the following code: <!-- Start of Judge.me code --> <div class='jdgm-widget jdgm-preview-badge'> {{ product.metafields.judgeme.badge }} </div> <!-- End of Judge.me code --> Click Save.
Automation	Open product-grid-item.liquid. Above the line that contains `{%- if settings.enable_product_reviews -%}` , add the following code: <!-- Start of Judge.me code --> <div class='jdgm-widget jdgm-preview-badge'> {{ product.metafields.judgeme.badge }} </div> <!-- End of Judge.me code --> Click Save.
Wokiee	Open product-grid-item-design-1.liquid. Under the line that contains `</h2>` , add the following code: <!-- Start of Judge.me code --> <div class='jdgm-widget jdgm-preview-badge'> {{ product.metafields.judgeme.badge }} </div> <!-- End of Judge.me code --> Click Save.
Champion Upscale	Open product-card.liquid. Above the line that contains `{%- if settings.product_card_show_product_rating` , add the following code: <!-- Start of Judge.me code --> <div class='jdgm-widget jdgm-preview-badge'> {{ product.metafields.judgeme.badge }} </div> <!-- End of Judge.me code --> Click Save.
Atom	Open product-card.liquid. Above the line that contains `{% if section.settings.show_rating` , add the following code: <!-- Start of Judge.me code --> <div class='jdgm-widget jdgm-preview-badge'> {{ product.metafields.judgeme.badge }} </div> <!-- End of Judge.me code --> Click Save.
Habitat Reformation Tailor Vision	Open product-card.liquid. Under the line that contains `{{ product_card_product.title }}` , add the following code: <!-- Start of Judge.me code --> <div class='jdgm-widget jdgm-preview-badge'> {{ product_card_product.metafields.judgeme.badge }} </div> <!-- End of Judge.me code --> Click Save.
Unicorn	Open product-card.liquid. Under the line that contains `</h3>` , add the following code: <!-- Start of Judge.me code --> <div class='jdgm-widget jdgm-preview-badge'> {{ product_card_product.metafields.judgeme.badge }} </div> <!-- End of Judge.me code --> Click Save.
Portland Stockmart	Open product-card.liquid. Above the line that contains `{% render 'price'` , add the following code: <!-- Start of Judge.me code --> <div class='jdgm-widget jdgm-preview-badge'> {{ product_card_product.metafields.judgeme.badge }} </div> <!-- End of Judge.me code --> Click Save.
Symmetry	Open product-block.liquid. Under the line that contains `class="product-block__title"` , add the following code: <!-- Start of Judge.me code --> <div class='jdgm-widget jdgm-preview-badge'> {{ product.metafields.judgeme.badge }} </div> <!-- End of Judge.me code --> Click Save.
Aurora	Open product-card.liquid. Under the line that contains `{%- if enable_product_review -%}` , add the following code: <!-- Start of Judge.me code --> <div class='jdgm-widget jdgm-preview-badge'> {{ product.metafields.judgeme.badge }} </div> <!-- End of Judge.me code --> Click Save.
Galleria	Open product-card.liquid. Above the line that contains `<div class="#product-card-price">` , add the following code: <!-- Start of Judge.me code --> <div class='jdgm-widget jdgm-preview-badge'> {{ product.metafields.judgeme.badge }} </div> <!-- End of Judge.me code --> Click Save.
Whisk	Open product-card.liquid. Above the line that contains `{%- if show_price -%}` , add the following code: <!-- Start of Judge.me code --> <div class='jdgm-widget jdgm-preview-badge'> {{ product_card_product.metafields.judgeme.badge }} </div> <!-- End of Judge.me code --> Click Save.
Mojave	Open product-card.liquid. Above the line that contains `<div class="product-card__meta` , add the following code: <!-- Start of Judge.me code --> <div class='jdgm-widget jdgm-preview-badge'> {{ product_ref.metafields.judgeme.badge }} </div> <!-- End of Judge.me code --> Click Save.
Alchemy Avatar Berlin Frame Handmade Honey Tailor ShowTime Stockholm Zest	Open product-card.liquid. Under the line that contains `</h3>` , add the following code: <!-- Start of Judge.me code --> <div class='jdgm-widget jdgm-preview-badge'> {{ product.metafields.judgeme.badge }} </div> <!-- End of Judge.me code --> Click Save.
Taiga	Open product-card.liquid. Under the line that contains `<h2 class="card-title h4">{{ product.title }}</h2>` , add the following code: <!-- Start of Judge.me code --> <div class='jdgm-widget jdgm-preview-badge'> {{ product.metafields.judgeme.badge }} </div> <!-- End of Judge.me code --> Click Save.
Emporium	Open product-card.liquid. Under the line that contains `</h5>` , add the following code: <!-- Start of Judge.me code --> <div class='jdgm-widget jdgm-preview-badge'> {{ product.metafields.judgeme.badge }} </div> <!-- End of Judge.me code --> Click Save.
Minimog	Open product-card.liquid. Under the line that contains `{% if settings.show_review_badge %}` , add the following code: <!-- Start of Judge.me code --> <div class='jdgm-widget jdgm-preview-badge'> {{ product.metafields.judgeme.badge }} </div> <!-- End of Judge.me code --> Click Save.
Concept	Open product-card.liquid. Above the line that contains `{%- render 'product-price'` , add the following code: <!-- Start of Judge.me code --> <div class='jdgm-widget jdgm-preview-badge'> {{ product.metafields.judgeme.badge }} </div> <!-- End of Judge.me code --> Click Save.
Influence	Open ship-product-card.liquid. Above the line that contains `{% if block_name == 'price' %}` , add the following code: <!-- Start of Judge.me code --> <div class='jdgm-widget jdgm-preview-badge'> {{ card_product.metafields.judgeme.badge }} </div> <!-- End of Judge.me code --> Click Save.
Sunrise	Open ship-product-card.liquid. Above the line that contains `{% render 'product-price', product: product_card_product %}` , add the following code: <!-- Start of Judge.me code --> <div class='jdgm-widget jdgm-preview-badge'> {{ product_card_product.metafields.judgeme.badge }} </div> <!-- End of Judge.me code --> Click Save.
Canopy	Open product-block.liquid. Above the line that contains `<div class="price` , add the following code: <!-- Start of Judge.me code --> <div class='jdgm-widget jdgm-preview-badge'> {{ product.metafields.judgeme.badge }} </div> <!-- End of Judge.me code --> Click Save.
Masonry	Open product-block.liquid. Under the line that contains `{{ product.title }}` , add the following code: <!-- Start of Judge.me code --> <div class='jdgm-widget jdgm-preview-badge'> {{ product.metafields.judgeme.badge }} </div> <!-- End of Judge.me code --> Click Save.
Prestige Xtra	Open product-item.liquid. Above the line that contains `{%- if settings.show_product_rating -%}` , add the following code: <!-- Start of Judge.me code --> <div class='jdgm-widget jdgm-preview-badge'> {{ product.metafields.judgeme.badge }} </div> <!-- End of Judge.me code --> Click Save.
Focal Ira Lorenza Split Warehouse	Open product-item.liquid. Under the line that contains `{{ product.title }}` , add the following code: <!-- Start of Judge.me code --> <div class='jdgm-widget jdgm-preview-badge'> {{ product.metafields.judgeme.badge }} </div> <!-- End of Judge.me code --> Click Save.
Stiletto	Open product-item.liquid. Above the line that contains `{% if settings.product_listing_show_vendor and prod.vendor %}` , add the following code: <!-- Start of Judge.me code --> <div class='jdgm-widget jdgm-preview-badge'> {{ prod.metafields.judgeme.badge }} </div> <!-- End of Judge.me code --> Click Save.
Local Combine	Open product-item.liquid. Above the line that contains `{%- when 'rating' -%}` , add the following code: <!-- Start of Judge.me code --> <div class='jdgm-widget jdgm-preview-badge'> {{ product.metafields.judgeme.badge }} </div> <!-- End of Judge.me code --> Click Save.
Capital	Open product-item.liquid. Above the line that contains `<div class="product-item-price">` , add the following code: <!-- Start of Judge.me code --> <div class='jdgm-widget jdgm-preview-badge'> {{ item.metafields.judgeme.badge }} </div> <!-- End of Judge.me code --> Click Save.
Highlight Kingdom	Open product-item.liquid. Above the line that contains `product-item__price` , add the following code: <!-- Start of Judge.me code --> <div class='jdgm-widget jdgm-preview-badge'> {{ product.metafields.judgeme.badge }} </div> <!-- End of Judge.me code --> Click Save.
Spark	Open product-item.liquid. Under the line that contains `</h4>` , add the following code: <!-- Start of Judge.me code --> <div class='jdgm-widget jdgm-preview-badge'> {{ product.metafields.judgeme.badge }} </div> <!-- End of Judge.me code --> Click Save.
Atlantic	Open product-item.liquid. Under the line that contains `</h2>` , add the following code: <!-- Start of Judge.me code --> <div class='jdgm-widget jdgm-preview-badge'> {{ itemType.metafields.judgeme.badge }} </div> <!-- End of Judge.me code --> Click Save.
Electro	Open product-item.liquid. Above the line that contains `{% include 'product-grid-review' %}` , add the following code: <!-- Start of Judge.me code --> <div class='jdgm-widget jdgm-preview-badge'> {{ product.metafields.judgeme.badge }} </div> <!-- End of Judge.me code --> Click Save.
Tema Aurora Tema Warehouse	Open product-item.liquid. Above the line that contains `{%- if settings.show_reviews_badge -%}` , add the following code: <!-- Start of Judge.me code --> <div class='jdgm-widget jdgm-preview-badge'> {{ product.metafields.judgeme.badge }} </div> <!-- End of Judge.me code --> Click Save.
Blockshop Emerge	Open product--item.liquid. Above the line that contains `if rating_enabled` , add the following code: echo '<div class="jdgm-widget jdgm-preview-badge" data-id="{{ product.id }}">' echo product.metafields.judgeme.badge echo '</div>' Click Save.
Paper	Open component__product-item.liquid. Under the line that contains `</h3>` , add the following code: <!-- Start of Judge.me code --> <div class='jdgm-widget jdgm-preview-badge'> {{ product.metafields.judgeme.badge }} </div> <!-- End of Judge.me code --> Click Save.
Editions	Open small-product-item.liquid. Under the line that contains `</h3>` , add the following code: <!-- Start of Judge.me code --> <div class='jdgm-widget jdgm-preview-badge'> {{ itemType.metafields.judgeme.badge }} </div> <!-- End of Judge.me code --> Click Save.
Yuva	Open product-grid.liquid. Under the line that contains `yv-product-title` , add the following code: <!-- Start of Judge.me code --> <div class='jdgm-widget jdgm-preview-badge'> {{ product.metafields.judgeme.badge }} </div> <!-- End of Judge.me code --> Click Save.
Cascade	Open product-tile.liquid. Above the line that contains `{% if settings.product_tile_star_ratings` , add the following code: <!-- Start of Judge.me code --> <div class='jdgm-widget jdgm-preview-badge'> {{ product.metafields.judgeme.badge }} </div> <!-- End of Judge.me code --> Click Save.
Shapes	Open product-tile.liquid. Under the line that contains `{{ product.title \| escape }}` , add the following code: <!-- Start of Judge.me code --> <div class='jdgm-widget jdgm-preview-badge'> {{ product.metafields.judgeme.badge }} </div> <!-- End of Judge.me code --> Click Save.
Context	Open product-tile.liquid. Under the line that contains `</h2>` , add the following code: <!-- Start of Judge.me code --> <div class='jdgm-widget jdgm-preview-badge'> {{ product.metafields.judgeme.badge }} </div> <!-- End of Judge.me code --> Click Save.
Fashionopolism Icon Mr Parker Testament Vantage	Open product-listing.liquid. Above the line that contains `{% render 'product-price-listing', product: product %}` , add the following code: <!-- Start of Judge.me code --> <div class='jdgm-widget jdgm-preview-badge'> {{ product.metafields.judgeme.badge }} </div> <!-- End of Judge.me code --> Click Save.
Envy Fresh	Open product-grid--indiv-product.liquid. Under the line that contains `{{ liquidObject.title }}` , add the following code: <!-- Start of Judge.me code --> <div class='jdgm-widget jdgm-preview-badge'> {{ liquidObject.metafields.judgeme.badge }} </div> <!-- End of Judge.me code --> Click Save.
Pursuit	Open product-card-item.liquid. Under the line that contains `{{ product.title }}` , add the following code: <!-- Start of Judge.me code --> <div class='jdgm-widget jdgm-preview-badge'> {{ product.metafields.judgeme.badge }} </div> <!-- End of Judge.me code --> Click Save.
Mavon	Open product-card-item.liquid. Above the line that contains `{%- if show_price -%}` , add the following code: <!-- Start of Judge.me code --> <div class='jdgm-widget jdgm-preview-badge'> {{ product_card_product.metafields.judgeme.badge }} </div> <!-- End of Judge.me code --> Click Save.
Avenue	Open product-loop.liquid. Under the line that contains `<div class="product-title">` , add the following code: <!-- Start of Judge.me code --> <div class='jdgm-widget jdgm-preview-badge'> {{ product.metafields.judgeme.badge }} </div> <!-- End of Judge.me code --> Click Save.
Drop Foodie Forge	Open product-loop.liquid. Above the line that contains `{%- if settings.show_rating` , add the following code: <!-- Start of Judge.me code --> <div class='jdgm-widget jdgm-preview-badge'> {{ product.metafields.judgeme.badge }} </div> <!-- End of Judge.me code --> Click Save.
Bullet	Open global-product-card.liquid. Under the line that contains `{{ product.title }}` , add the following code: <!-- Start of Judge.me code --> <div class='jdgm-widget jdgm-preview-badge'> {{ product.metafields.judgeme.badge }} </div> <!-- End of Judge.me code --> Click Save.
Parallax Responsive Retina	Open product-thumbnail.liquid. Above the line that contains `{% if settings.display_vendor_collection %}` , add the following code: <!-- Start of Judge.me code --> <div class='jdgm-widget jdgm-preview-badge'> {{ product.metafields.judgeme.badge }} </div> <!-- End of Judge.me code --> Click Save.
Beyond	Open product-rating.liquid. Above the line that contains `if rating_enabled` , add the following code: echo '<div class="jdgm-widget jdgm-preview-badge" data-id="{{ product.id }}">' echo product.metafields.judgeme.badge echo '</div>' Click Save.
Fame	Open product-info.liquid. Above the line that contains `<div class="product-prizebox">` , add the following code: <!-- Start of Judge.me code --> <div class='jdgm-widget jdgm-preview-badge'> {{ product.metafields.judgeme.badge }} </div> <!-- End of Judge.me code --> Click Save.
Turbo Turbo-portland	Open product-info.liquid. Under the line that contains `{{ product.title }}` , add the following code: <!-- Start of Judge.me code --> <div class='jdgm-widget jdgm-preview-badge'> {{ product.metafields.judgeme.badge }} </div> <!-- End of Judge.me code --> Click Save.
Grid Pacific	Open product-list-item.liquid. Under the line that contains `{{ item.title }}` , add the following code: <!-- Start of Judge.me code --> <div class='jdgm-widget jdgm-preview-badge'> {{ item.metafields.judgeme.badge }} </div> <!-- End of Judge.me code --> Click Save.
Startup	Open product-list-item.liquid. Above the line that contains `<p class="product-list-item-price">` , add the following code: <!-- Start of Judge.me code --> <div class='jdgm-widget jdgm-preview-badge'> {{ item.metafields.judgeme.badge }} </div> <!-- End of Judge.me code --> Click Save.
Align	Open component-card-product.liquid. Above the line that contains `{%- unless show_footer == false -%}` , add the following code: <!-- Start of Judge.me code --> <div class='jdgm-widget jdgm-preview-badge'> {{ product.metafields.judgeme.badge }} </div> <!-- End of Judge.me code --> Click Save.
Modules	Open productRender.liquid. Under the line that contains `{{ product.title }}` , add the following code: <!-- Start of Judge.me code --> <div class='jdgm-widget jdgm-preview-badge'> {{ product.metafields.judgeme.badge }} </div> <!-- End of Judge.me code --> Click Save.
Bazaar	Open product-card-minimal.liquid. Under the line that contains `{{ product.title }}` , add the following code: <!-- Start of Judge.me code --> <div class='jdgm-widget jdgm-preview-badge'> {{ product.metafields.judgeme.badge }} </div> <!-- End of Judge.me code --> Click Save.
Roam	Open product.loop.liquid. Under the line that contains `{% if show_vendors %}` , add the following code: <!-- Start of Judge.me code --> <div class='jdgm-widget jdgm-preview-badge'> {{ product.metafields.judgeme.badge }} </div> <!-- End of Judge.me code --> Click Save.
California Colors	Open collection-product.liquid. Under the line that contains `{{ product.title }}` , add the following code: <!-- Start of Judge.me code --> <div class='jdgm-widget jdgm-preview-badge'> {{ product.metafields.judgeme.badge }} </div> <!-- End of Judge.me code --> Click Save.
Andaman	Open block.liquid. Above the line that contains `<div class="block-price">` , add the following code: <!-- Start of Judge.me code --> <div class='jdgm-widget jdgm-preview-badge'> {{ product.metafields.judgeme.badge }} </div> <!-- End of Judge.me code --> Click Save.
Providence	Open product.liquid. Above the line that contains `{% if show_vendor %}` , add the following code: <!-- Start of Judge.me code --> <div class='jdgm-widget jdgm-preview-badge'> {{ product.metafields.judgeme.badge }} </div> <!-- End of Judge.me code --> Click Save.
Loft	Open product-loop-item.liquid. Above the line that contains `{%- if show_reviews -%}` , add the following code: <!-- Start of Judge.me code --> <div class='jdgm-widget jdgm-preview-badge'> {{ product.metafields.judgeme.badge }} </div> <!-- End of Judge.me code --> Click Save.
Debut	Open product-card-grid.liquid. Under the line that contains `{{ product.title }}` , add the following code: <!-- Start of Judge.me code --> <div class='jdgm-widget jdgm-preview-badge'> {{ product.metafields.judgeme.badge }} </div> <!-- End of Judge.me code --> Click Save.
Health & Beauty	Open product-card-info.liquid. Above the line that contains `{% if settings.show_review_badge %}` , add the following code: <!-- Start of Judge.me code --> <div class='jdgm-widget jdgm-preview-badge'> {{ product.metafields.judgeme.badge }} </div> <!-- End of Judge.me code --> Click Save.
Charge	Open grid-item-product.liquid. Under the line that contains `<p class="item-title">{{ product.title \| default: 'Example product title' }}</p>` , add the following code: <!-- Start of Judge.me code --> <div class='jdgm-widget jdgm-preview-badge'> {{ product.metafields.judgeme.badge }} </div> <!-- End of Judge.me code --> Click Save.
Showcase	Open product-block.liquid. Above the line that contains `{% if settings.show_product_block_reviews` , add the following code: <!-- Start of Judge.me code --> <div class='jdgm-widget jdgm-preview-badge'> {{ product.metafields.judgeme.badge }} </div> <!-- End of Judge.me code --> Click Save.
Ella	Open product-card.liquid. Above the line that contains `{% render 'product-card-summary'`, add the following code: <!-- Start of Judge.me code --> <div class='jdgm-widget jdgm-preview-badge'> {{ product_card_product.metafields.judgeme.badge }} </div> <!-- End of Judge.me code --> Click Save.

Themes that we haven't documented:

Gem
Woodstock
Kairo
Lute
Banjo
Huge
Nostalgia
Maker
Xclusive
Exhibit
Momentum
Urge
Abode
Neat
Unicorn
Creator

If you need help adding Star Ratings on collections, contact our team at [email protected]. We're available to help 24/7!

Adding Judge.me widgets (Blueprint theme)

Adding Judge.me widgets (Vintage themes)

Adding Judge.me widgets in PageFly

Adding Judge.me widgets (Stencil theme)

Adding Star Ratings on product pages (Vintage themes)