Skip to main content

Installing Star Rating on catalog & collection pages

  • Updated

πŸ’‘ This document provides guidance on manually adding star ratings to your product, category, and collection pages for Shopify vintage themes and OS 2.0 themes lacking a built-in feature.

Key Summary

  • This guide is for Shopify Online Store 2.0 themes without a built-in 'Show product rating' feature, and for Shopify vintage themes.
  • Star Ratings visibly display the average aggregated rating and total number of published reviews for each product.
  • Installation requires direct modification of your Shopify theme's code by adding a specific snippet.
  • You will need to identify the correct product tile template file (e.g., product-grid-item.liquid) and insert the provided code.

Star Ratings serve as an important visual cue, quickly conveying how customers feel about a product. They represent the average aggregated rating from all published reviews and also display the total number of published reviews, offering a straightforward way for shoppers to click through and read full reviews on your site.


 

❗IMPORTANT

This guide is specifically applicable to:

  • Merchants using CREMA Review with a Shopify Online Store 2.0 theme which doesn't provide 'Show product rating' feature in its section.
  • Merchants using CREMA Review with a Shopify vintage themes.
Example of star ratings on product cards

STEP 1. Manually Install the Star Rating Code

Shopify Admin > Online Store > Themes > Actions
  1. Navigate to Online Store Themes in your Shopify Admin. Click Actions (or the three-dot icon) for your active theme and select Edit Code.

  2. In the search bar, look for the template file responsible for rendering individual product tiles. Common file names include:

    • product-grid-item.liquid
    • card-product.liquid
    • product-card-grid.liquid
    • product-collection.liquid

    β€» File names vary by theme. Locate the file that controls the layout of products on your catalog pages.

  3. Search for the {{ product.title }} element within the file.

  4. Copy and paste the following code snippet immediately underneath the title element: 

    {% liquid

    assign format = '${stars} (${reviews_count})'

    assign formatStarsInput = '${stars}'

    assign formatStarsParsed = '{{{stars}}}'

    assign formatReviewsCountInput = '${reviews_count}'

    assign formatReviewsCountParsed = '{{{reviews_count}}}'

    %}

    <span

    class="crema-product-reviews-score"

    data-product-code="{{ product.id }}"

    data-hide-if-zero="1"

    data-format="{{ format | replace: formatStarsInput, formatStarsParsed | replace: formatReviewsCountInput, formatReviewsCountParsed }}"

    data-star-style="multiple"></span>
  5. Click Save to apply the changes.

 

If you require any assistance with installing CREMA widgets on your vintage theme, please do not hesitate to contact us via email at support.global@cre.ma.

Frequently Asked Questions (FAQ)

What if I cannot find any of the mentioned product tile files (e.g., 'product-grid-item.liquid')?

πŸ‘‰ The file names provided are common examples, but your theme might use a different naming convention. Look for files in the 'Snippets' or 'Sections' directory responsible for rendering product cards. You can search for Liquid objects like 'product.title' or 'product.url' to find the right place.

Where exactly should the code snippet be placed under '{{ product.title }}'?

πŸ‘‰ For optimal display, place it immediately after the closing tag of the element containing `{{ product.title }}`. This ensures the stars appear directly below the product name.

Related to

Related articles