Adding star ratings to your collection pages lets shoppers see review scores right alongside product thumbnails — before they even click into a product page. This helps customers quickly identify your highest-rated products and drives more clicks to your best-reviewed items.
Method 1: Shopify Theme Editor (OS 2.0 Themes)
If you're using a Shopify Online Store 2.0 theme (Dawn, Refresh, or most modern themes), you can enable star ratings directly from the theme editor with no code required.
For Collection Pages
Step 1: From your Shopify admin, go to Online Store → Themes.
Step 2: Find your active theme and click Customize.
Step 3: From the page selector dropdown at the top, choose Collections → Default collection.
Step 4: In the left sidebar, select Product grid and enable Show product rating.
Step 5: Click Save.
For Search Results Pages
Step 1: In the same theme editor, use the page selector dropdown to choose Search.
Step 2: Select Product grid in the left sidebar and enable Show product rating.
Step 3: Click Save.
💡 Pro Tip: Enable star ratings on both collection and search pages for a consistent experience. Shoppers expect to see ratings everywhere once they've seen them on one page.
Method 2: Manual Installation (Vintage/Custom Themes)
If your theme doesn't support the "Show product rating" toggle — or if you need custom placement — you can add the Quoli star rating snippet manually.
Step 1: From your Shopify admin, go to Online Store → Themes → Actions → Edit code.
Step 2: Find the template file that renders your collection product cards. Common file names include product-card.liquid, card-product.liquid, or product-grid-item.liquid (varies by theme).
Step 3: Locate where you want the star rating to appear (usually below the product title or above the price).
Step 4: Paste the following Quoli snippet at that location:
<div class="quoli-product-rating" data-id="#{{ product.id }}"></div>
Step 5: Click Save and preview your collection page to verify the ratings appear correctly.
⚠️ Important: If you're not comfortable editing theme code, contact [email protected] and we'll help you install it. Editing the wrong file can affect your store's appearance.
How Collection Ratings Work
The star rating displayed on collection pages is the average rating across all published reviews for that product. Products with no reviews won't show a rating badge by default — stars only appear once a product has at least one published review.
If you're using Product Groups, grouped products will show the combined average across all products in the group.
Troubleshooting
Star ratings not appearing: Confirm the product has at least one published review. Also check that the Quoli app embed is enabled in Shopify Admin → Apps → Quoli → App embeds.
"Show product rating" toggle missing: This toggle is only available in Online Store 2.0 themes. If you're on a vintage theme, use the manual code installation method above.
Ratings showing on some collections but not others: Some themes use different templates for different collection pages. Check that the "Show product rating" setting is enabled on each collection template, or that the manual code snippet is present in all relevant template files.
Star rating style doesn't match my theme: Star ratings inherit your Quoli branding settings (icon style, color). Adjust these in Quoli Dashboard → Settings → Branding.
For additional help, contact [email protected].
Related Articles
• 📄 Dedicated Reviews Page — Create a standalone page for all reviews
• 📦 Product Groups — Share reviews across related products
• 🎨 Brand Your Quoli Experience — Customize star icon style and colors