Skip to main content

Installing Star Rating on catalog & collection pages (Shopify OS 2.0)

  • Updated

πŸ’‘ This document provides guidance on adding CREMA Star Ratings to your Shopify OS 2.0 theme's main, category, and collection pages.

Key Summary

  • Star Ratings display the average aggregated rating of a product's published reviews and the total review count, offering instant product insights.
  • This installation method is specifically designed for Shopify OS 2.0 themes that feature a 'Show product rating' setting within their sections.
  • You can customize the color of the star ratings by inserting a simple CSS code snippet into your theme's custom CSS field.
  • This guide focuses on integrating Star Ratings into main, category, and collection pages; a separate guide is available for product pages.

Star Ratings are important shorthand, symbolizing at a glance how people felt about a certain item. They reflect the average aggregated rating of a product's published reviews and offers an easy way to link shoppers to read full reviews on your site. Star Ratings also include the total amount of published reviews written about the product.

Image description

In this article, you'll learn how to add Star Rating to your main, category and collection pages.

❗ IMPORTANT

STEP 1. Install Star Ratings in Shopify Theme Editor

From your Shopify Theme editor, follow these steps:

  1. Click the section where you want to install the star rating. This is normally called Featured collection, Featured product or Product Grid.
  2. Enable Show product rating and click Save.
Sep-06-2023 12-48-55.gif

STEP 2. Customize Star Rating Colors (Optional)

You can customize the color of star rating by inserting the below code in the Custom CSS field. 


.rating-star {
--color-icon: #000000;
}
Image description

Frequently Asked Questions (FAQ)

What should I do if the 'Show product rating' option is not available in my theme sections?

πŸ‘‰ This method is specifically for Shopify OS 2.0 themes with the 'Show product rating' setting. If you cannot find this field or are using a vintage theme, please refer to the alternative guide: Installing Star Rating on category & collection pages.

Can I use this guide to add Star Ratings to individual product pages?

πŸ‘‰ No, this particular guide is designed for adding Star Ratings to your main, category, and collection pages. For installing CREMA widgets, including Star Ratings, on individual product pages, please refer to our dedicated guide: Installing CREMA widgets on Shopify OS 2.0.

How can I change the default color of the Star Ratings?

πŸ‘‰ You can easily customize the color of the star ratings by inserting a simple CSS snippet into your theme's Custom CSS field. Use the following code and replace #000000 with your desired hexadecimal color code:

.rating-star {
--color-icon: #000000;
}

 

Related articles