Loox Star Rating Widget

Display your products’ average rating score and the number of reviews collected for each product with our Star Rating Widget.

The Star Rating Widget creates trust in the buying experience for your customers through the power of social proof.

You can add the widget to any of your store’s pages and customize it to match your brand’s design.

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 "Add section" 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 (learn more below).
• Click "Save".

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.

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: