Collections streamline the browsing experience for customers by organizing products into relevant categories, eliminating the need to sift through numerous pages of items.

Note: In some stores, stars on the collection page appear automatically.

Install using liquid code (advanced)

Star Ratings installed via code will show on both your collection pages and the collection on your homepage.

Steps:

Once you've enabled app embed, go back to Online Store > Themes
Click "..." > Edit code.
Then depending on your theme, the next steps might differ.
Find your theme name in the below table & follow the steps to add code.

Theme	Installation steps
Athens
Be Yours
Chord
Colorblock
Craft
Crave
Dawn
Eurus
Launch
Origin
Publisher
Ride
Refresh
Sense
Spotlight
Studio
Taste
Viola	• Open card-product. liquid.
• Above the line that contains `{%- if show_rating` , add the following code: `<div id="epr-product-collection-review" data-product-id="{{ [product.id](<http://product.id/>) }}" data-product-handle="{{ product.handle }}"></div>`
• Click Save.
Marble
Sahara	• Open card-product.liquid.
• Under the line that contains `<!-- /.card-product__title` , add the following code: `<div id="epr-product-collection-review" data-product-id="{{ [product.id](<http://product.id/>) }}" data-product-handle="{{ product.handle }}"></div>`
• Click Save.
Maranello
Mono	• Open card-product.liquid.
• Under the line that contains `</h3>` , add the following code:
`<div id="epr-product-collection-review" data-product-id="{{ [product.id](<http://product.id/>) }}" data-product-handle="{{ product.handle }}"></div>`
• Click Save.
Blum	• Open card-product.liquid.
• Under the line that contains `</h3>` , add the following code:
`<div id="epr-product-collection-review" data-product-id="{{ [product.id](<http://product.id/>) }}" data-product-handle="{{ product.handle }}"></div>`
• 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:
`<div id="epr-product-collection-review" data-product-id="{{ [product.id](<http://product.id/>) }}" data-product-handle="{{ product.handle }}"></div>`
• Click Save.
Modular	• Open product-grid-item.liquid.
• Under the line that contains `product-block__title` , add the following code:
`<div id="epr-product-collection-review" data-product-id="{{ [product.id](<http://product.id/>) }}" data-product-handle="{{ product.handle }}"></div>`
• Click Save.
Broadcast	• Open `product-grid-item.liquid.`
• Under the line that contains product-item__title , add the following code:
`<div id="epr-product-collection-review" data-product-id="{{ [product.id](<http://product.id/>) }}" data-product-handle="{{ product.handle }}"></div>`
• Click Save.
Pipeline	• Open snippets/product-grid-item.liquid.
• Above the line that contains if settings.product_grid_show_rating , add the following code:
`<div id="epr-product-collection-review" data-product-id="{{ [product.id](<http://product.id/>) }}" data-product-handle="{{ product.handle }}"></div>`
• 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:
`<div id="epr-product-collection-review" data-product-id="{{ [product.id](<http://product.id/>) }}" data-product-handle="{{ product.handle }}"></div>`
• Click Save.
Empire	• Open product-grid-item.liquid.
• Under the line that contains </h2> , add the following code:
`<div id="epr-product-collection-review" data-product-id="{{ [product.id](<http://product.id/>) }}" data-product-handle="{{ product.handle }}"></div>`
• Click Save.
Palo Alto	• Open product-grid-item.liquid.
• Above the line that contains {%- if settings.show_rating , add the following code:
`<div id="epr-product-collection-review" data-product-id="{{ [product.id](<http://product.id/>) }}" data-product-handle="{{ product.handle }}"></div>`
• Click Save.
Venue	• Open product-grid-item.liquid.
• Under the line that contains product-card__title , add the following code:
`<div id="epr-product-collection-review" data-product-id="{{ [product.id](<http://product.id/>) }}" data-product-handle="{{ product.handle }}"></div>`
• Click Save.
Automation	• Open product-grid-item.liquid.
• Above the line that contains {%- if settings.enable_product_reviews -%} , add the following code:
`<div id="epr-product-collection-review" data-product-id="{{ [product.id](<http://product.id/>) }}" data-product-handle="{{ product.handle }}"></div>`
• Click Save.
Wokiee	• Open product-grid-item-design-1.liquid.
• Under the line that contains </h2> , add the following code:
`<div id="epr-product-collection-review" data-product-id="{{ [product.id](<http://product.id/>) }}" data-product-handle="{{ product.handle }}"></div>`
• Click Save.
Champion
Upscale	• Open product-card.liquid.
• Above the line that contains {%- if settings.product_card_show_product_rating , add the following code:
`<div id="epr-product-collection-review" data-product-id="{{ [product.id](<http://product.id/>) }}" data-product-handle="{{ product.handle }}"></div>`
• Click Save.
Atom	• Open product-card.liquid.
• Above the line that contains {% if section.settings.show_rating , add the following code:
`<div id="epr-product-collection-review" data-product-id="{{ [product.id](<http://product.id/>) }}" data-product-handle="{{ product.handle }}"></div>`
• Click Save.
Habitat
Reformation
Tailor
Vision	• Open product-card.liquid.
• Under the line that contains {{ product_card_product.title }} , add the following code:
`<div id="epr-product-collection-review" data-product-id="{{ [product.id](<http://product.id/>) }}" data-product-handle="{{ product.handle }}"></div>`
• Click Save.
Portland
Stockmart	• Open product-card.liquid.
• Above the line that contains {% render 'price' , add the following code:
`<div id="epr-product-collection-review" data-product-id="{{ [product.id](<http://product.id/>) }}" data-product-handle="{{ product.handle }}"></div>`
• Click Save.
Symmetry	• Open product-block.liquid.
• Under the line that contains class="product-block__title" , add the following code:
`<div id="epr-product-collection-review" data-product-id="{{ [product.id](<http://product.id/>) }}" data-product-handle="{{ product.handle }}"></div>`
• Click Save.
Aurora	• Open product-card.liquid.
• Under the line that contains {%- if enable_product_review -%} , add the following code:
`<div id="epr-product-collection-review" data-product-id="{{ [product.id](<http://product.id/>) }}" data-product-handle="{{ product.handle }}"></div>`
• Click Save.
Galleria	• Open product-card.liquid.
• Above the line that contains <div class="#product-card-price"> , add the following code:
`<div id="epr-product-collection-review" data-product-id="{{ [product.id](<http://product.id/>) }}" data-product-handle="{{ product.handle }}"></div>`
• Click Save.
Whisk	• Open product-card.liquid.
• Above the line that contains {%- if show_price -%} , add the following code:
`<div id="epr-product-collection-review" data-product-id="{{ [product.id](<http://product.id/>) }}" data-product-handle="{{ product.handle }}"></div>`
• Click Save.
Mojave	• Open product-card.liquid.
• Above the line that contains <div class="product-card__meta , add the following code:
`<div id="epr-product-collection-review" data-product-id="{{ [product.id](<http://product.id/>) }}" data-product-handle="{{ product.handle }}"></div>`
• 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:
`<div id="epr-product-collection-review" data-product-id="{{ [product.id](<http://product.id/>) }}" data-product-handle="{{ product.handle }}"></div>`
• Click Save.
Taiga	• Open product-card.liquid.
• Under the line that contains <h2 class="card-title h4">{{ product.title }}</h2> , add the following code:
`<div id="epr-product-collection-review" data-product-id="{{ [product.id](<http://product.id/>) }}" data-product-handle="{{ product.handle }}"></div>`
• Click Save.
Emporium	• Open product-card.liquid.
• Under the line that contains </h5> , add the following code:
`<div id="epr-product-collection-review" data-product-id="{{ [product.id](<http://product.id/>) }}" data-product-handle="{{ product.handle }}"></div>`
• Click Save.
Minimog	• Open product-card.liquid.
• Under the line that contains {% if settings.show_review_badge %} , add the following code:
`<div id="epr-product-collection-review" data-product-id="{{ [product.id](<http://product.id/>) }}" data-product-handle="{{ product.handle }}"></div>`
• Click Save.
Influence	• Open ship-product-card.liquid.
• Above the line that contains {% if block_name == 'price' %} , add the following code:
`<div id="epr-product-collection-review" data-product-id="{{ [product.id](<http://product.id/>) }}" data-product-handle="{{ product.handle }}"></div>`
• Click Save.
Sunrise	• Open ship-product-card.liquid.
• Above the line that contains {% render 'product-price', product: product_card_product %} , add the following code:
`<div id="epr-product-collection-review" data-product-id="{{ [product.id](<http://product.id/>) }}" data-product-handle="{{ product.handle }}"></div>`
• Click Save.
Canopy	• Open product-block.liquid.
• Above the line that contains <div class="price , add the following code:
`<div id="epr-product-collection-review" data-product-id="{{ [product.id](<http://product.id/>) }}" data-product-handle="{{ product.handle }}"></div>`
• Click Save.
Masonry	• Open product-block.liquid.
• Under the line that contains {{ product.title }} , add the following code:
`<div id="epr-product-collection-review" data-product-id="{{ [product.id](<http://product.id/>) }}" data-product-handle="{{ product.handle }}"></div>`
• Click Save.
Prestige
Xtra	• Open product-item.liquid.
• Above the line that contains {%- if settings.show_product_rating -%} , add the following code:
`<div id="epr-product-collection-review" data-product-id="{{ [product.id](<http://product.id/>) }}" data-product-handle="{{ product.handle }}"></div>`
• Click Save.
Focal
Ira
Lorenza
Split
Warehouse	• Open product-item.liquid.
• Under the line that contains {{ product.title }} , add the following code:
`<div id="epr-product-collection-review" data-product-id="{{ [product.id](<http://product.id/>) }}" data-product-handle="{{ product.handle }}"></div>`
• 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:
`<div id="epr-product-collection-review" data-product-id="{{ [product.id](<http://product.id/>) }}" data-product-handle="{{ product.handle }}"></div>`
• Click Save.
Local
Combine	• Open product-item.liquid.
• Above the line that contains {%- when 'rating' -%} , add the following code:
`<div id="epr-product-collection-review" data-product-id="{{ [product.id](<http://product.id/>) }}" data-product-handle="{{ product.handle }}"></div>`
• Click Save.
Capital	• Open product-item.liquid.
• Above the line that contains <div class="product-item-price"> , add the following code:
`<div id="epr-product-collection-review" data-product-id="{{ [product.id](<http://product.id/>) }}" data-product-handle="{{ product.handle }}"></div>`
• Click Save.
Highlight
Kingdom	• Open product-item.liquid.
• Above the line that contains product-item__price , add the following code:
`<div id="epr-product-collection-review" data-product-id="{{ [product.id](<http://product.id/>) }}" data-product-handle="{{ product.handle }}"></div>`
• Click Save.
Spark	• Open product-item.liquid.
• Under the line that contains </h4> , add the following code:
`<div id="epr-product-collection-review" data-product-id="{{ [product.id](<http://product.id/>) }}" data-product-handle="{{ product.handle }}"></div>`
• Click Save.
Atlantic	• Open product-item.liquid.
• Under the line that contains </h2> , add the following code:
`<div id="epr-product-collection-review" data-product-id="{{ [product.id](<http://product.id/>) }}" data-product-handle="{{ product.handle }}"></div>`
• Click Save.
Electro	• Open product-item.liquid.
• Above the line that contains {% include 'product-grid-review' %} , add the following code:
`<div id="epr-product-collection-review" data-product-id="{{ [product.id](<http://product.id/>) }}" data-product-handle="{{ product.handle }}"></div>`
• Click Save.
Tema Aurora
Tema Warehouse	• Open product-item.liquid.
• Above the line that contains {%- if settings.show_reviews_badge -%} , add the following code:
`<div id="epr-product-collection-review" data-product-id="{{ [product.id](<http://product.id/>) }}" data-product-handle="{{ product.handle }}"></div>`
• Click Save.
Paper	• Open component__product-item.liquid.
• Under the line that contains </h3> , add the following code:
`<div id="epr-product-collection-review" data-product-id="{{ [product.id](<http://product.id/>) }}" data-product-handle="{{ product.handle }}"></div>`
• Click Save.
Editions	• Open small-product-item.liquid.
• Under the line that contains </h3> , add the following code:
`<div id="epr-product-collection-review" data-product-id="{{ [product.id](<http://product.id/>) }}" data-product-handle="{{ product.handle }}"></div>`
• Click Save.
Yuva	• Open product-grid.liquid.
• Under the line that contains yv-product-title , add the following code:
`<div id="epr-product-collection-review" data-product-id="{{ [product.id](<http://product.id/>) }}" data-product-handle="{{ product.handle }}"></div>`
• Click Save.
Cascade	• Open product-tile.liquid.
• Above the line that contains {% if settings.product_tile_star_ratings , add the following code:
`<div id="epr-product-collection-review" data-product-id="{{ [product.id](<http://product.id/>) }}" data-product-handle="{{ product.handle }}"></div>`
• Click Save.
Shapes	• Open product-tile.liquid.
• Under the line that contains **{{ product.title	escape }}** , add the following code:
`<div id="epr-product-collection-review" data-product-id="{{ [product.id](<http://product.id/>) }}" data-product-handle="{{ product.handle }}"></div>`
• Click Save.
Context	• Open product-tile.liquid.
• Under the line that contains </h2> , add the following code:
`<div id="epr-product-collection-review" data-product-id="{{ [product.id](<http://product.id/>) }}" data-product-handle="{{ product.handle }}"></div>`
• 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:
`<div id="epr-product-collection-review" data-product-id="{{ [product.id](<http://product.id/>) }}" data-product-handle="{{ product.handle }}"></div>`
• Click Save.
Envy
Fresh	• Open product-grid--indiv-product.liquid.
• Under the line that contains {{ liquidObject.title }} , add the following code:
`<div id="epr-product-collection-review" data-product-id="{{ [product.id](<http://product.id/>) }}" data-product-handle="{{ product.handle }}"></div>`
• Click Save.
Pursuit	• Open product-card-item.liquid.
• Under the line that contains {{ product.title }} , add the following code:
`<div id="epr-product-collection-review" data-product-id="{{ [product.id](<http://product.id/>) }}" data-product-handle="{{ product.handle }}"></div>`
• Click Save.
Mavon	• Open product-card-item.liquid.
• Above the line that contains {%- if show_price -%} , add the following code:
`<div id="epr-product-collection-review" data-product-id="{{ [product.id](<http://product.id/>) }}" data-product-handle="{{ product.handle }}"></div>`
• Click Save.
Avenue	• Open product-loop.liquid.
• Under the line that contains <div class="product-title"> , add the following code:
`<div id="epr-product-collection-review" data-product-id="{{ [product.id](<http://product.id/>) }}" data-product-handle="{{ product.handle }}"></div>`
• Click Save.
Drop
Foodie
Forge	• Open product-loop.liquid.
• Above the line that contains {%- if settings.show_rating , add the following code:
`<div id="epr-product-collection-review" data-product-id="{{ [product.id](<http://product.id/>) }}" data-product-handle="{{ product.handle }}"></div>`
• Click Save.
Bullet	• Open global-product-card.liquid.
• Under the line that contains {{ product.title }} , add the following code:
`<div id="epr-product-collection-review" data-product-id="{{ [product.id](<http://product.id/>) }}" data-product-handle="{{ product.handle }}"></div>`
• Click Save.
Parallax
Responsive
Retina	• Open product-thumbnail.liquid.
• Above the line that contains {% if settings.display_vendor_collection %} , add the following code:
`<div id="epr-product-collection-review" data-product-id="{{ [product.id](<http://product.id/>) }}" data-product-handle="{{ product.handle }}"></div>`
• Click Save.
Fame	• Open product-info.liquid.
• Above the line that contains <div class="product-prizebox"> , add the following code:
`<div id="epr-product-collection-review" data-product-id="{{ [product.id](<http://product.id/>) }}" data-product-handle="{{ product.handle }}"></div>`
• Click Save.
Turbo
Turbo-portland	• Open product-info.liquid.
• Under the line that contains {{ product.title }} , add the following code:
`<div id="epr-product-collection-review" data-product-id="{{ [product.id](<http://product.id/>) }}" data-product-handle="{{ product.handle }}"></div>`
• Click Save.
Grid
Pacific	• Open product-list-item.liquid.
• Under the line that contains {{ item.title }} , add the following code:
`<div id="epr-product-collection-review" data-product-id="{{ [product.id](<http://product.id/>) }}" data-product-handle="{{ product.handle }}"></div>`
• Click Save.
Startup	• Open product-list-item.liquid.
• Above the line that contains <p class="product-list-item-price"> , add the following code:
`<div id="epr-product-collection-review" data-product-id="{{ [product.id](<http://product.id/>) }}" data-product-handle="{{ product.handle }}"></div>`
• Click Save.
Align	• Open component-card-product.liquid.
• Above the line that contains {%- unless show_footer == false -%} , add the following code:
`<div id="epr-product-collection-review" data-product-id="{{ [product.id](<http://product.id/>) }}" data-product-handle="{{ product.handle }}"></div>`
• Click Save.
Modules	• Open productRender.liquid.
• Under the line that contains {{ product.title }} , add the following code:
`<div id="epr-product-collection-review" data-product-id="{{ [product.id](<http://product.id/>) }}" data-product-handle="{{ product.handle }}"></div>`
• Click Save.
Bazaar	• Open product-card-minimal.liquid.
• Under the line that contains {{ product.title }} , add the following code:
`<div id="epr-product-collection-review" data-product-id="{{ [product.id](<http://product.id/>) }}" data-product-handle="{{ product.handle }}"></div>`
• Click Save.
Roam	• Open product.loop.liquid.
• Under the line that contains {% if show_vendors %} , add the following code:
`<div id="epr-product-collection-review" data-product-id="{{ [product.id](<http://product.id/>) }}" data-product-handle="{{ product.handle }}"></div>`
• Click Save.
California
Colors	• Open collection-product.liquid.
• Under the line that contains {{ product.title }} , add the following code:
`<div id="epr-product-collection-review" data-product-id="{{ [product.id](<http://product.id/>) }}" data-product-handle="{{ product.handle }}"></div>`
• Click Save.
Andaman	• Open block.liquid.
• Above the line that contains <div class="block-price"> , add the following code:
`<div id="epr-product-collection-review" data-product-id="{{ [product.id](<http://product.id/>) }}" data-product-handle="{{ product.handle }}"></div>`
• Click Save.
Providence	• Open product.liquid.
• Above the line that contains {% if show_vendor %} , add the following code:
`<div id="epr-product-collection-review" data-product-id="{{ [product.id](<http://product.id/>) }}" data-product-handle="{{ product.handle }}"></div>`
• Click Save.
Loft	• Open product-loop-item.liquid.
• Above the line that contains {%- if show_reviews -%} , add the following code:
`<div id="epr-product-collection-review" data-product-id="{{ [product.id](<http://product.id/>) }}" data-product-handle="{{ product.handle }}"></div>`
• Click Save.
Debut	• Open product-card-grid.liquid.
• Under the line that contains {{ product.title }} , add the following code:
`<div id="epr-product-collection-review" data-product-id="{{ [product.id](<http://product.id/>) }}" data-product-handle="{{ product.handle }}"></div>`
• Click Save.
Health & Beauty	• Open product-card-info.liquid.
• Above the line that contains {% if settings.show_review_badge %} , add the following code:
`<div id="epr-product-collection-review" data-product-id="{{ [product.id](<http://product.id/>) }}" data-product-handle="{{ product.handle }}"></div>`
• 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:
`<div id="epr-product-collection-review" data-product-id="{{ [product.id](<http://product.id/>) }}" data-product-handle="{{ product.handle }}"></div>`
• Click Save.