The Star Rating Widget displays your products' average ratings and total reviews, providing immediate social proof to boost trust and conversions.
Why use the Star Rating widget?
The Star Rating Widget is essential on ecommerce product pages, offering shoppers a quick way to assess product quality and customer satisfaction. It's often the first point of reference customers look for when considering a purchase, significantly influencing buying decisions and improving store credibility.
You can easily customize the widget's color, icon, and placement not only on product pages but also on various other store pages to match your brand's aesthetic and layout.
How to add the Star Rating Widget via the Shopify Theme Editor
To add the Star Rating widget to your product pages using the Shopify Theme Editor:
- Inside your Shopify Themes menu, click "Customize" to open the Theme Editor.
- Select the product page template (or any other page) you would like to edit.
- Click "+" on the left-side menu, and select "Star Rating Widget.
- Drag and drop the widget app block where you would like it to appear (we recommend placing it under the product title).
- Customize the widget’s appearance to match your brand’s design.
- Click "Save."
Step-by-step guides
- Customizing the Star Rating Widget
- Advanced Customizations to the Star Rating Widget via Code
- Displaying the Star Rating Widget on Vintage Themes
- Displaying the Star Rating Widget Beyond the Product Page
FAQs
Optional customizations:
- Size: Adjust the size of the Star Rating Widget's text and icons.
- Text: Insert custom text to appear next to your rating icons. Overrides the default "([rating])" text placeholder.
- Hide text: No text will appear next to the widget's rating icons when enabled.
- Widget alignment: Adjust the location of the Star Rating Widget on your product page..
- Layout - "Default": When selected, the Star Rating Widget will display up to 5 stars next to the product's average rating matching it average rating.
- Layout - "Single Icon": When selected, the Star Rating Widget will display a single rating next to the product's average rating.
- Text Color: Select your desired color used for the widget's text appearing next to the rating icons.
- Override default star color: Override the default rating icons color selected in your Loox "Branding" settings section, and choose your desired color.
- Show all reviews: When enabled, the widget will showcase your store's aggregated average rating and the total number of reviews collected instead of showing each product's respective numbers.
- Change Rating Icon: Redirects you to your Loox "Branding" settings section, allowing you to change your selected rating icon.
- Open Floating Product Reviews Widget on click: When enabled, clicking on the widget's Rating icons will open the Floating Product Reviews Widget.
- Show empty stars when there are no reviews: When enabled, the Star Rating Widget will display "empty" Rating icons on products with no reviews collected.
Note: The Star Rating widget will automatically display the number of reviews and average ratings for the relevant product only if placed on a product page.
Displaying the Star Rating Widget on your collection pages
To Add the Star Rating Widget to your collection pages via code:
- Inside the Shopify Themes menu, click the "... " button, and select "Edit code":
- Open the template or section you use for the product in your collections (under snippets, product-grid-item.liquid / product-loop.liquid / product-info.liquid / product-card-grid.liquid / card-product.liquid but some themes work differently).
- Copy the code below:
<div class="loox-rating" data-id="{{ product.id }}" data-rating="{{ product.metafields.loox.avg_rating }}" data-raters="{{ product.metafields.loox.num_reviews }}"></div> - Paste it where you want the rating icons to appear on your collection listing (we recommend below the product's title), and save your file.
For example:
