Displaying star ratings on your collection pages can significantly enhance your store’s credibility and encourage customers to explore more products. This guide will walk you through the steps to add star ratings to your collections using Quoli, ensuring a seamless integration with various Shopify themes.

Install using Shopify theme editor

If you're using an Online Store 2.0 theme, you can enable Star Ratings for your collections inside Shopify theme editor.

For collection pages

From your Shopify admin, go to Online Store > Themes.
Find the theme you want and click Customize.
From the drop-down menu at the top, choose Collections > Default collection.
On the left menu, select Product grid and enable Show product rating.
Click Save.

For featured collection on homepage

From your Shopify admin, go to Online Store > Themes.
Find the theme you want and click Customize.
From the drop-down menu at the top, choose Homepage.
On the left menu, select Featured collection and enable Show product rating.
Click Save.

Install using liquid code (advanced)

If you want the Star Ratings to be Quoli 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 Quoli code snippet

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

Step 2: Add the Star Ratings code

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

Here's the code for each theme:

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 class="quoli-collection-ratings" data-star-rating="{{product.metafields['quoli-ugc'].reviewWidget.avgRating \| plus:0}}" data-rating-count="{{product.metafields['quoli-ugc'].reviewWidget.reviewCount \| plus:0}}" data-product-id="{{product.id}}"></div> Click Save.
Marble Sahara	Open card-product.liquid. Under the line that contains `<!-- /.card-product__title` , add the following code: <div class="quoli-collection-ratings" data-star-rating="{{product.metafields['quoli-ugc'].reviewWidget.avgRating \| plus:0}}" data-rating-count="{{product.metafields['quoli-ugc'].reviewWidget.reviewCount \| plus:0}}" data-product-id="{{product.id}}"></div> Click Save.
Maranello Mono	Open card-product.liquid. Under the line that contains `</h3>` , add the following code: <div class="quoli-collection-ratings" data-star-rating="{{product.metafields['quoli-ugc'].reviewWidget.avgRating \| plus:0}}" data-rating-count="{{product.metafields['quoli-ugc'].reviewWidget.reviewCount \| plus:0}}" data-product-id="{{product.id}}"></div> Click Save.
Blum	Open card-product.liquid. Under the line that contains `</h3>` , add the following code: <div class="quoli-collection-ratings" data-star-rating="{{product.metafields['quoli-ugc'].reviewWidget.avgRating \| plus:0}}" data-rating-count="{{product.metafields['quoli-ugc'].reviewWidget.reviewCount \| plus:0}}" data-product-id="{{product.id}}"></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 class="quoli-collection-ratings" data-star-rating="{{product.metafields['quoli-ugc'].reviewWidget.avgRating \| plus:0}}" data-rating-count="{{product.metafields['quoli-ugc'].reviewWidget.reviewCount \| plus:0}}" data-product-id="{{product.id}}"></div> Click Save.
Modular	Open product-grid-item.liquid. Under the line that contains `product-block__title` , add the following code: <div class="quoli-collection-ratings" data-star-rating="{{product.metafields['quoli-ugc'].reviewWidget.avgRating \| plus:0}}" data-rating-count="{{product.metafields['quoli-ugc'].reviewWidget.reviewCount \| plus:0}}" data-product-id="{{product.id}}"></div> Click Save.
Broadcast	Open product-grid-item.liquid. Under the line that contains `product-item__title` , add the following code: <div class="quoli-collection-ratings" data-star-rating="{{product.metafields['quoli-ugc'].reviewWidget.avgRating \| plus:0}}" data-rating-count="{{product.metafields['quoli-ugc'].reviewWidget.reviewCount \| plus:0}}" data-product-id="{{product.id}}"></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 class="quoli-collection-ratings" data-star-rating="{{product.metafields['quoli-ugc'].reviewWidget.avgRating \| plus:0}}" data-rating-count="{{product.metafields['quoli-ugc'].reviewWidget.reviewCount \| plus:0}}" data-product-id="{{product.id}}"></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 class="quoli-collection-ratings" data-star-rating="{{product.metafields['quoli-ugc'].reviewWidget.avgRating \| plus:0}}" data-rating-count="{{product.metafields['quoli-ugc'].reviewWidget.reviewCount \| plus:0}}" data-product-id="{{product.id}}"></div> Click Save.
Empire	Open product-grid-item.liquid. Under the line that contains `</h2>` , add the following code: <div class="quoli-collection-ratings" data-star-rating="{{product.metafields['quoli-ugc'].reviewWidget.avgRating \| plus:0}}" data-rating-count="{{product.metafields['quoli-ugc'].reviewWidget.reviewCount \| plus:0}}" data-product-id="{{product.id}}"></div> Click Save.
Palo Alto	Open product-grid-item.liquid. Above the line that contains `{%- if settings.show_rating` , add the following code: <div class="quoli-collection-ratings" data-star-rating="{{product.metafields['quoli-ugc'].reviewWidget.avgRating \| plus:0}}" data-rating-count="{{product.metafields['quoli-ugc'].reviewWidget.reviewCount \| plus:0}}" data-product-id="{{product.id}}"></div> Click Save.
Venue	Open product-grid-item.liquid. Under the line that contains `product-card__title` , add the following code: <div class="quoli-collection-ratings" data-star-rating="{{product.metafields['quoli-ugc'].reviewWidget.avgRating \| plus:0}}" data-rating-count="{{product.metafields['quoli-ugc'].reviewWidget.reviewCount \| plus:0}}" data-product-id="{{product.id}}"></div> Click Save.
Automation	Open product-grid-item.liquid. Above the line that contains `{%- if settings.enable_product_reviews -%}` , add the following code: <div class="quoli-collection-ratings" data-star-rating="{{product.metafields['quoli-ugc'].reviewWidget.avgRating \| plus:0}}" data-rating-count="{{product.metafields['quoli-ugc'].reviewWidget.reviewCount \| plus:0}}" data-product-id="{{product.id}}"></div> Click Save.
Wokiee	Open product-grid-item-design-1.liquid. Under the line that contains `</h2>` , add the following code: <div class="quoli-collection-ratings" data-star-rating="{{product.metafields['quoli-ugc'].reviewWidget.avgRating \| plus:0}}" data-rating-count="{{product.metafields['quoli-ugc'].reviewWidget.reviewCount \| plus:0}}" data-product-id="{{product.id}}"></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 class="quoli-collection-ratings" data-star-rating="{{product.metafields['quoli-ugc'].reviewWidget.avgRating \| plus:0}}" data-rating-count="{{product.metafields['quoli-ugc'].reviewWidget.reviewCount \| plus:0}}" data-product-id="{{product.id}}"></div> Click Save.
Atom	Open product-card.liquid. Above the line that contains `{% if section.settings.show_rating` , add the following code: <div class="quoli-collection-ratings" data-star-rating="{{product.metafields['quoli-ugc'].reviewWidget.avgRating \| plus:0}}" data-rating-count="{{product.metafields['quoli-ugc'].reviewWidget.reviewCount \| plus:0}}" data-product-id="{{product.id}}"></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 class="quoli-collection-ratings" data-star-rating="{{product.metafields['quoli-ugc'].reviewWidget.avgRating \| plus:0}}" data-rating-count="{{product.metafields['quoli-ugc'].reviewWidget.reviewCount \| plus:0}}" data-product-id="{{product.id}}"></div> Click Save.
Portland Stockmart	Open product-card.liquid. Above the line that contains `{% render 'price'` , add the following code: <div class="quoli-collection-ratings" data-star-rating="{{product.metafields['quoli-ugc'].reviewWidget.avgRating \| plus:0}}" data-rating-count="{{product.metafields['quoli-ugc'].reviewWidget.reviewCount \| plus:0}}" data-product-id="{{product.id}}"></div> Click Save.
Symmetry	Open product-block.liquid. Under the line that contains `class="product-block__title"` , add the following code: <div class="quoli-collection-ratings" data-star-rating="{{product.metafields['quoli-ugc'].reviewWidget.avgRating \| plus:0}}" data-rating-count="{{product.metafields['quoli-ugc'].reviewWidget.reviewCount \| plus:0}}" data-product-id="{{product.id}}"></div> Click Save.
Aurora	Open product-card.liquid. Under the line that contains `{%- if enable_product_review -%}` , add the following code: <div class="quoli-collection-ratings" data-star-rating="{{product.metafields['quoli-ugc'].reviewWidget.avgRating \| plus:0}}" data-rating-count="{{product.metafields['quoli-ugc'].reviewWidget.reviewCount \| plus:0}}" data-product-id="{{product.id}}"></div> Click Save.
Galleria	Open product-card.liquid. Above the line that contains `<div class="#product-card-price">` , add the following code: <div class="quoli-collection-ratings" data-star-rating="{{product.metafields['quoli-ugc'].reviewWidget.avgRating \| plus:0}}" data-rating-count="{{product.metafields['quoli-ugc'].reviewWidget.reviewCount \| plus:0}}" data-product-id="{{product.id}}"></div> Click Save.
Whisk	Open product-card.liquid. Above the line that contains `{%- if show_price -%}` , add the following code: <div class="quoli-collection-ratings" data-star-rating="{{product.metafields['quoli-ugc'].reviewWidget.avgRating \| plus:0}}" data-rating-count="{{product.metafields['quoli-ugc'].reviewWidget.reviewCount \| plus:0}}" data-product-id="{{product.id}}"></div> Click Save.
Mojave	Open product-card.liquid. Above the line that contains `<div class="product-card__meta` , add the following code: <div class="quoli-collection-ratings" data-star-rating="{{product.metafields['quoli-ugc'].reviewWidget.avgRating \| plus:0}}" data-rating-count="{{product.metafields['quoli-ugc'].reviewWidget.reviewCount \| plus:0}}" data-product-id="{{product.id}}"></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 class="quoli-collection-ratings" data-star-rating="{{product.metafields['quoli-ugc'].reviewWidget.avgRating \| plus:0}}" data-rating-count="{{product.metafields['quoli-ugc'].reviewWidget.reviewCount \| plus:0}}" data-product-id="{{product.id}}"></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 class="quoli-collection-ratings" data-star-rating="{{product.metafields['quoli-ugc'].reviewWidget.avgRating \| plus:0}}" data-rating-count="{{product.metafields['quoli-ugc'].reviewWidget.reviewCount \| plus:0}}" data-product-id="{{product.id}}"></div> Click Save.
Emporium	Open product-card.liquid. Under the line that contains `</h5>` , add the following code: <div class="quoli-collection-ratings" data-star-rating="{{product.metafields['quoli-ugc'].reviewWidget.avgRating \| plus:0}}" data-rating-count="{{product.metafields['quoli-ugc'].reviewWidget.reviewCount \| plus:0}}" data-product-id="{{product.id}}"></div> Click Save.
Minimog	Open product-card.liquid. Under the line that contains `{% if settings.show_review_badge %}` , add the following code: <div class="quoli-collection-ratings" data-star-rating="{{product.metafields['quoli-ugc'].reviewWidget.avgRating \| plus:0}}" data-rating-count="{{product.metafields['quoli-ugc'].reviewWidget.reviewCount \| plus:0}}" data-product-id="{{product.id}}"></div> Click Save.
Influence	Open ship-product-card.liquid. Above the line that contains `{% if block_name == 'price' %}` , add the following code: <div class="quoli-collection-ratings" data-star-rating="{{product.metafields['quoli-ugc'].reviewWidget.avgRating \| plus:0}}" data-rating-count="{{product.metafields['quoli-ugc'].reviewWidget.reviewCount \| plus:0}}" data-product-id="{{product.id}}"></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 class="quoli-collection-ratings" data-star-rating="{{product.metafields['quoli-ugc'].reviewWidget.avgRating \| plus:0}}" data-rating-count="{{product.metafields['quoli-ugc'].reviewWidget.reviewCount \| plus:0}}" data-product-id="{{product.id}}"></div> Click Save.
Canopy	Open product-block.liquid. Above the line that contains `<div class="price` , add the following code: <div class="quoli-collection-ratings" data-star-rating="{{product.metafields['quoli-ugc'].reviewWidget.avgRating \| plus:0}}" data-rating-count="{{product.metafields['quoli-ugc'].reviewWidget.reviewCount \| plus:0}}" data-product-id="{{product.id}}"></div> Click Save.
Masonry	Open product-block.liquid. Under the line that contains `{{ product.title }}` , add the following code: <div class="quoli-collection-ratings" data-star-rating="{{product.metafields['quoli-ugc'].reviewWidget.avgRating \| plus:0}}" data-rating-count="{{product.metafields['quoli-ugc'].reviewWidget.reviewCount \| plus:0}}" data-product-id="{{product.id}}"></div> Click Save.
Prestige Xtra	Open product-item.liquid. Above the line that contains `{%- if settings.show_product_rating -%}` , add the following code: <div class="quoli-collection-ratings" data-star-rating="{{product.metafields['quoli-ugc'].reviewWidget.avgRating \| plus:0}}" data-rating-count="{{product.metafields['quoli-ugc'].reviewWidget.reviewCount \| plus:0}}" data-product-id="{{product.id}}"></div> Click Save.
Focal Ira Lorenza Split Warehouse	Open product-item.liquid. Under the line that contains `{{ product.title }}` , add the following code: <div class="quoli-collection-ratings" data-star-rating="{{product.metafields['quoli-ugc'].reviewWidget.avgRating \| plus:0}}" data-rating-count="{{product.metafields['quoli-ugc'].reviewWidget.reviewCount \| plus:0}}" data-product-id="{{product.id}}"></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 class="quoli-collection-ratings" data-star-rating="{{product.metafields['quoli-ugc'].reviewWidget.avgRating \| plus:0}}" data-rating-count="{{product.metafields['quoli-ugc'].reviewWidget.reviewCount \| plus:0}}" data-product-id="{{product.id}}"></div> Click Save.
Local Combine	Open product-item.liquid. Above the line that contains `{%- when 'rating' -%}` , add the following code: <div class="quoli-collection-ratings" data-star-rating="{{product.metafields['quoli-ugc'].reviewWidget.avgRating \| plus:0}}" data-rating-count="{{product.metafields['quoli-ugc'].reviewWidget.reviewCount \| plus:0}}" data-product-id="{{product.id}}"></div> Click Save.
Capital	Open product-item.liquid. Above the line that contains `<div class="product-item-price">` , add the following code: <div class="quoli-collection-ratings" data-star-rating="{{product.metafields['quoli-ugc'].reviewWidget.avgRating \| plus:0}}" data-rating-count="{{product.metafields['quoli-ugc'].reviewWidget.reviewCount \| plus:0}}" data-product-id="{{product.id}}"></div> Click Save.
Highlight Kingdom	Open product-item.liquid. Above the line that contains `product-item__price` , add the following code: <div class="quoli-collection-ratings" data-star-rating="{{product.metafields['quoli-ugc'].reviewWidget.avgRating \| plus:0}}" data-rating-count="{{product.metafields['quoli-ugc'].reviewWidget.reviewCount \| plus:0}}" data-product-id="{{product.id}}"></div> Click Save.
Spark	Open product-item.liquid. Under the line that contains `</h4>` , add the following code: <div class="quoli-collection-ratings" data-star-rating="{{product.metafields['quoli-ugc'].reviewWidget.avgRating \| plus:0}}" data-rating-count="{{product.metafields['quoli-ugc'].reviewWidget.reviewCount \| plus:0}}" data-product-id="{{product.id}}"></div> Click Save.
Atlantic	Open product-item.liquid. Under the line that contains `</h2>` , add the following code: <div class="quoli-collection-ratings" data-star-rating="{{product.metafields['quoli-ugc'].reviewWidget.avgRating \| plus:0}}" data-rating-count="{{product.metafields['quoli-ugc'].reviewWidget.reviewCount \| plus:0}}" data-product-id="{{product.id}}"></div> Click Save.
Electro	Open product-item.liquid. Above the line that contains `{% include 'product-grid-review' %}` , add the following code: <div class="quoli-collection-ratings" data-star-rating="{{product.metafields['quoli-ugc'].reviewWidget.avgRating \| plus:0}}" data-rating-count="{{product.metafields['quoli-ugc'].reviewWidget.reviewCount \| plus:0}}" data-product-id="{{product.id}}"></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 class="quoli-collection-ratings" data-star-rating="{{product.metafields['quoli-ugc'].reviewWidget.avgRating \| plus:0}}" data-rating-count="{{product.metafields['quoli-ugc'].reviewWidget.reviewCount \| plus:0}}" data-product-id="{{product.id}}"></div> Click Save.
Blockshop Emerge	Open product--item.liquid. Above the line that contains `if rating_enabled` , add the following code: <div class="quoli-collection-ratings" data-star-rating="{{product.metafields['quoli-ugc'].reviewWidget.avgRating \| plus:0}}" data-rating-count="{{product.metafields['quoli-ugc'].reviewWidget.reviewCount \| plus:0}}" data-product-id="{{product.id}}"></div> Click Save.
Paper	Open component__product-item.liquid. Under the line that contains `</h3>` , add the following code: <div class="quoli-collection-ratings" data-star-rating="{{product.metafields['quoli-ugc'].reviewWidget.avgRating \| plus:0}}" data-rating-count="{{product.metafields['quoli-ugc'].reviewWidget.reviewCount \| plus:0}}" data-product-id="{{product.id}}"></div> Click Save.
Editions	Open small-product-item.liquid. Under the line that contains `</h3>` , add the following code: <div class="quoli-collection-ratings" data-star-rating="{{product.metafields['quoli-ugc'].reviewWidget.avgRating \| plus:0}}" data-rating-count="{{product.metafields['quoli-ugc'].reviewWidget.reviewCount \| plus:0}}" data-product-id="{{product.id}}"></div> Click Save.
Yuva	Open product-grid.liquid. Under the line that contains `yv-product-title` , add the following code: <div class="quoli-collection-ratings" data-star-rating="{{product.metafields['quoli-ugc'].reviewWidget.avgRating \| plus:0}}" data-rating-count="{{product.metafields['quoli-ugc'].reviewWidget.reviewCount \| plus:0}}" data-product-id="{{product.id}}"></div> Click Save.
Cascade	Open product-tile.liquid. Above the line that contains `{% if settings.product_tile_star_ratings` , add the following code: <div class="quoli-collection-ratings" data-star-rating="{{product.metafields['quoli-ugc'].reviewWidget.avgRating \| plus:0}}" data-rating-count="{{product.metafields['quoli-ugc'].reviewWidget.reviewCount \| plus:0}}" data-product-id="{{product.id}}"></div> Click Save.
Shapes	Open product-tile.liquid. Under the line that contains `{{ product.title \| escape }}` , add the following code: <div class="quoli-collection-ratings" data-star-rating="{{product.metafields['quoli-ugc'].reviewWidget.avgRating \| plus:0}}" data-rating-count="{{product.metafields['quoli-ugc'].reviewWidget.reviewCount \| plus:0}}" data-product-id="{{product.id}}"></div> Click Save.
Context	Open product-tile.liquid. Under the line that contains `</h2>` , add the following code: <div class="quoli-collection-ratings" data-star-rating="{{product.metafields['quoli-ugc'].reviewWidget.avgRating \| plus:0}}" data-rating-count="{{product.metafields['quoli-ugc'].reviewWidget.reviewCount \| plus:0}}" data-product-id="{{product.id}}"></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 class="quoli-collection-ratings" data-star-rating="{{product.metafields['quoli-ugc'].reviewWidget.avgRating \| plus:0}}" data-rating-count="{{product.metafields['quoli-ugc'].reviewWidget.reviewCount \| plus:0}}" data-product-id="{{product.id}}"></div> Click Save.
Envy Fresh	Open product-grid--indiv-product.liquid. Under the line that contains `{{ liquidObject.title }}` , add the following code: <div class="quoli-collection-ratings" data-star-rating="{{product.metafields['quoli-ugc'].reviewWidget.avgRating \| plus:0}}" data-rating-count="{{product.metafields['quoli-ugc'].reviewWidget.reviewCount \| plus:0}}" data-product-id="{{product.id}}"></div> Click Save.
Pursuit	Open product-card-item.liquid. Under the line that contains `{{ product.title }}` , add the following code: <div class="quoli-collection-ratings" data-star-rating="{{product.metafields['quoli-ugc'].reviewWidget.avgRating \| plus:0}}" data-rating-count="{{product.metafields['quoli-ugc'].reviewWidget.reviewCount \| plus:0}}" data-product-id="{{product.id}}"></div> Click Save.
Mavon	Open product-card-item.liquid. Above the line that contains `{%- if show_price -%}` , add the following code: <div class="quoli-collection-ratings" data-star-rating="{{product.metafields['quoli-ugc'].reviewWidget.avgRating \| plus:0}}" data-rating-count="{{product.metafields['quoli-ugc'].reviewWidget.reviewCount \| plus:0}}" data-product-id="{{product.id}}"></div> Click Save.
Avenue	Open product-loop.liquid. Under the line that contains `<div class="product-title">` , add the following code: <div class="quoli-collection-ratings" data-star-rating="{{product.metafields['quoli-ugc'].reviewWidget.avgRating \| plus:0}}" data-rating-count="{{product.metafields['quoli-ugc'].reviewWidget.reviewCount \| plus:0}}" data-product-id="{{product.id}}"></div> Click Save.
Drop Foodie Forge	Open product-loop.liquid. Above the line that contains `{%- if settings.show_rating` , add the following code: <div class="quoli-collection-ratings" data-star-rating="{{product.metafields['quoli-ugc'].reviewWidget.avgRating \| plus:0}}" data-rating-count="{{product.metafields['quoli-ugc'].reviewWidget.reviewCount \| plus:0}}" data-product-id="{{product.id}}"></div> Click Save.
Bullet	Open global-product-card.liquid. Under the line that contains `{{ product.title }}` , add the following code: <div class="quoli-collection-ratings" data-star-rating="{{product.metafields['quoli-ugc'].reviewWidget.avgRating \| plus:0}}" data-rating-count="{{product.metafields['quoli-ugc'].reviewWidget.reviewCount \| plus:0}}" data-product-id="{{product.id}}"></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 class="quoli-collection-ratings" data-star-rating="{{product.metafields['quoli-ugc'].reviewWidget.avgRating \| plus:0}}" data-rating-count="{{product.metafields['quoli-ugc'].reviewWidget.reviewCount \| plus:0}}" data-product-id="{{product.id}}"></div> Click Save.
Beyond	Open product-rating.liquid. Above the line that contains `if rating_enabled` , add the following code: <div class="quoli-collection-ratings" data-star-rating="{{product.metafields['quoli-ugc'].reviewWidget.avgRating \| plus:0}}" data-rating-count="{{product.metafields['quoli-ugc'].reviewWidget.reviewCount \| plus:0}}" data-product-id="{{product.id}}"></div> Click Save.
Fame	Open product-info.liquid. Above the line that contains `<div class="product-prizebox">` , add the following code: <div class="quoli-collection-ratings" data-star-rating="{{product.metafields['quoli-ugc'].reviewWidget.avgRating \| plus:0}}" data-rating-count="{{product.metafields['quoli-ugc'].reviewWidget.reviewCount \| plus:0}}" data-product-id="{{product.id}}"></div> Click Save.
Turbo Turbo-portland	Open product-info.liquid. Under the line that contains `{{ product.title }}` , add the following code: <div class="quoli-collection-ratings" data-star-rating="{{product.metafields['quoli-ugc'].reviewWidget.avgRating \| plus:0}}" data-rating-count="{{product.metafields['quoli-ugc'].reviewWidget.reviewCount \| plus:0}}" data-product-id="{{product.id}}"></div> Click Save.
Grid Pacific	Open product-list-item.liquid. Under the line that contains `{{ item.title }}` , add the following code: <div class="quoli-collection-ratings" data-star-rating="{{product.metafields['quoli-ugc'].reviewWidget.avgRating \| plus:0}}" data-rating-count="{{product.metafields['quoli-ugc'].reviewWidget.reviewCount \| plus:0}}" data-product-id="{{product.id}}"></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 class="quoli-collection-ratings" data-star-rating="{{product.metafields['quoli-ugc'].reviewWidget.avgRating \| plus:0}}" data-rating-count="{{product.metafields['quoli-ugc'].reviewWidget.reviewCount \| plus:0}}" data-product-id="{{product.id}}"></div> Click Save.
Align	Open component-card-product.liquid. Above the line that contains `{%- unless show_footer == false -%}` , add the following code: <div class="quoli-collection-ratings" data-star-rating="{{product.metafields['quoli-ugc'].reviewWidget.avgRating \| plus:0}}" data-rating-count="{{product.metafields['quoli-ugc'].reviewWidget.reviewCount \| plus:0}}" data-product-id="{{product.id}}"></div> Click Save.
Modules	Open productRender.liquid. Under the line that contains `{{ product.title }}` , add the following code: <div class="quoli-collection-ratings" data-star-rating="{{product.metafields['quoli-ugc'].reviewWidget.avgRating \| plus:0}}" data-rating-count="{{product.metafields['quoli-ugc'].reviewWidget.reviewCount \| plus:0}}" data-product-id="{{product.id}}"></div> Click Save.
Bazaar	Open product-card-minimal.liquid. Under the line that contains `{{ product.title }}` , add the following code: <div class="quoli-collection-ratings" data-star-rating="{{product.metafields['quoli-ugc'].reviewWidget.avgRating \| plus:0}}" data-rating-count="{{product.metafields['quoli-ugc'].reviewWidget.reviewCount \| plus:0}}" data-product-id="{{product.id}}"></div> Click Save.
Roam	Open product.loop.liquid. Under the line that contains `{% if show_vendors %}` , add the following code: <div class="quoli-collection-ratings" data-star-rating="{{product.metafields['quoli-ugc'].reviewWidget.avgRating \| plus:0}}" data-rating-count="{{product.metafields['quoli-ugc'].reviewWidget.reviewCount \| plus:0}}" data-product-id="{{product.id}}"></div> Click Save.
California Colors	Open collection-product.liquid. Under the line that contains `{{ product.title }}` , add the following code: <div class="quoli-collection-ratings" data-star-rating="{{product.metafields['quoli-ugc'].reviewWidget.avgRating \| plus:0}}" data-rating-count="{{product.metafields['quoli-ugc'].reviewWidget.reviewCount \| plus:0}}" data-product-id="{{product.id}}"></div> Click Save.
Andaman	Open block.liquid. Above the line that contains `<div class="block-price">` , add the following code: <div class="quoli-collection-ratings" data-star-rating="{{product.metafields['quoli-ugc'].reviewWidget.avgRating \| plus:0}}" data-rating-count="{{product.metafields['quoli-ugc'].reviewWidget.reviewCount \| plus:0}}" data-product-id="{{product.id}}"></div> Click Save.
Providence	Open product.liquid. Above the line that contains `{% if show_vendor %}` , add the following code: <div class="quoli-collection-ratings" data-star-rating="{{product.metafields['quoli-ugc'].reviewWidget.avgRating \| plus:0}}" data-rating-count="{{product.metafields['quoli-ugc'].reviewWidget.reviewCount \| plus:0}}" data-product-id="{{product.id}}"></div> Click Save.
Loft	Open product-loop-item.liquid. Above the line that contains `{%- if show_reviews -%}` , add the following code: <div class="quoli-collection-ratings" data-star-rating="{{product.metafields['quoli-ugc'].reviewWidget.avgRating \| plus:0}}" data-rating-count="{{product.metafields['quoli-ugc'].reviewWidget.reviewCount \| plus:0}}" data-product-id="{{product.id}}"></div> Click Save.
Debut	Open product-card-grid.liquid. Under the line that contains `{{ product.title }}` , add the following code: <div class="quoli-collection-ratings" data-star-rating="{{product.metafields['quoli-ugc'].reviewWidget.avgRating \| plus:0}}" data-rating-count="{{product.metafields['quoli-ugc'].reviewWidget.reviewCount \| plus:0}}" data-product-id="{{product.id}}"></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 class="quoli-collection-ratings" data-star-rating="{{product.metafields['quoli-ugc'].reviewWidget.avgRating \| plus:0}}" data-rating-count="{{product.metafields['quoli-ugc'].reviewWidget.reviewCount \| plus:0}}" data-product-id="{{product.id}}"></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 class="quoli-collection-ratings" data-star-rating="{{product.metafields['quoli-ugc'].reviewWidget.avgRating \| plus:0}}" data-rating-count="{{product.metafields['quoli-ugc'].reviewWidget.reviewCount \| plus:0}}" data-product-id="{{product.id}}"></div> Click Save.

For more detailed instructions or support, feel free to reach out to our support team at [email protected]