π‘ 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.
In this article, you'll learn how to add Star Rating to your main, category and collection pages.
β IMPORTANT
-
This method is only applicable for Shopify OS 2.0 themes which
have Show product rating settings in the sections.
- Please refer to Shopify help document for further information.
- If you can't find the 'Show product rating' field on your app-block or are using vintage themes, please refer to Installing Star Rating on category & collection pages.
- If you want to add the Star Rating to a product page, please refer to Installing CREMA widgets on Shopify OS 2.0.
STEP 1. Install Star Ratings in Shopify Theme Editor
From your Shopify Theme editor, follow these steps:
- Click the section where you want to install the star rating. This is normally called Featured collection, Featured product or Product Grid.
- Enable Show product rating and click Save.
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;
}
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;
}