Adding the Star Rating Widget via code

Boost trust using our Star Rating Widget, designed to show your product's average rating and review count. In this article, we'll walk you through how to manually add the Star Rating Widget to your store using Liquid code if you can't add it via app block. 

When to add the Star Rating Widget via Code vs. via app block

You might need to add the widget via code if:

1. you're on a vintage (non 2.0) theme.

2. you're on a 2.0 theme but want to add the widget in a location where you can't use the Loox app block. For example- if you want to add the widget to a custom snippet, a collection card, or the cart drawer.

If you're on a 2.0 theme and have the option to do so in the location you want, use the Loox Star Rating Widget app block instead - it's easier to customize. Read more about adding widgets via app block. 

Note: Settings like "Layout" and "Text" in your Shopify theme editor only apply to the Loox app block. They do not affect the code shown below. To customize the code version, use the data attributes listed in the "Customization" section.

Before you start

To add the Star Rating Widget to your store's pages via code, you must have the Loox core script enabled on your theme.

For 2.0 Shopify themes: Click here to learn how to check if your core script is enabled.

For vintage Shopify themes: If widgets aren't appearing after you paste the widget's code, contact Loox support at [email protected] so we can check the script setup on your store.

Product pages

To display the Star Rating Widget on your product pages:

• Inside the Shopify Themes menu, click the "... " button, and select "Edit code":

• Open the template or section you use for product pages (usually it's called product-template.liquid or product.liquid, but some themes work differently).
• Copy the code below:

<a href="#looxReviews">
<div class="loox-rating" data-id="{{ product.id }}" data-rating="{{ product.metafields.loox.avg_rating }}" data-raters="{{ product.metafields.loox.num_reviews }}"></div>
</a>

For example (Debut theme):

Collection pages

To display the Star Rating Widget on your collection pages:

• 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.
• Make sure you paste the code inside the part of the file that renders a single product - i.e. where {{ product.id }} is valid. If you paste it outside that scope, the widget will render empty.

For example (Debut theme):

Homepage featured product

To display the Star Rating Widget on your homepage featured product section:

• Inside the Shopify Themes menu, click the "... " button and select "Edit code":

• Open the template or section you use for the homepage featured product (usually called featured-product.liquid or homepage-product.liquid, but each theme varies).
• 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 (we recommend below the product's title), and save your file.
• Make sure you paste the code inside the part of the file that renders a single product - i.e. where {{ product.id }} is valid. If you paste it outside that scope, the widget will render empty.

For example (Debut theme):

Cart page

To display the Star Rating Widget on your Cart page:

• Inside the Shopify Themes menu, click the "... " button and then select "Edit code":

• Open the template or section you use for cart pages (usually called cart.liquid or cart-template.liquid, but themes by vary)
• 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 the cart page, and save your file. 
• Make sure you paste the code inside the part of the file that renders a single product - i.e. where {{ product.id }} is valid. If you paste it outside that scope, the widget will render empty.

For example (Debut theme):

Displaying your store's total rating

To display your store's total average rating and the total number of reviews for all of your store's products:

• Inside the Shopify Themes menu, click the "... " button and then select "Edit code":

• Open the file that you wish to add the Star Rating widget to
• Paste the code below where you want the ratings to appear, and save your file:

• {% if shop.metafields.loox["global_stats"] %}
  {% assign looxstats = shop.metafields.loox["global_stats"] | split: ',' %} 
  <div class="loox-rating loox-rating-hp" data-rating="{{ looxstats[0] }}" data-raters="{{ looxstats[1] }}"></div> 
  {% endif %}

• Optional styling: To make the rating icons bigger and centered, add this code above the previous:

Customization options via code

The widget supports the following data attributes. Add them to the <div class="loox-rating" ...> tag to customize the widget via code.

Display the average rating before the star icons (e.g. "4.6 ★★★★★")

By default the widget renders stars first, then text after them. To flip the order:

1. Add data-pattern="[rating]" to the code so the rating number appears.

<div class="loox-rating"
     data-id="{{ product.id }}"
     data-rating="{{ product.metafields.loox.avg_rating }}"
     data-raters="{{ product.metafields.loox.num_reviews }}"
     data-pattern="[rating]"></div>

.loox-rating .loox-rating-content {
  display: inline-flex;
  align-items: center;
}
.loox-rating .loox-rating-label {
  order: -1;
  padding-right: 4px;
}

Other text patterns you can use:

• data-pattern="[rating]/5" will be displayed like this:  4.6/5.

• data-pattern="[rating] · [count] reviews" will be displayed like this:  4.6 · 213 reviews.

Linking the Star Rating Widget to the Floating Reviews Widget

When displaying the Star Rating Widget on your product pages, the rating icons will automatically link to the Reviews Widget displayed on the same page. However, the widget can also be linked to the Floating Reviews Widget instead, opening the product's entire collection of reviews in a floating window.

To link your Star Rating Widget to the Floating Reviews Widget:

• Inside the Shopify Themes menu, click the "... " button and then select "Edit code":

• Open the template or section you use for product pages (usually, it's called product-template.liquid or product.liquid, but some themes work differently).
• Find the following code:

 <div data-id="{{ product.id }}" data-rating="{{ product.metafields.loox.avg_rating }}" data-raters="{{ product.metafields.loox.num_reviews }}"></div> 

• Replace it with the code below, and save your file:

<div data-id="{{ product.id }}" data-rating="{{ product.metafields.loox.avg_rating }}" data-floating-product-reviews-enabled="true" data-raters="{{ product.metafields.loox.num_reviews }}"></div>  

• When a customer clicks on the product page's rating icons, the floating 'Happy Customers' widget will appear, displaying the product's reviews only.

Troubleshooting- if the widget doesn't appear after adding the code

Most often it's one of these reasons:

1. The code is in the wrong place in the file. The code needs to be pasted inside the block that renders one product (where {{ product.id }} is valid). If it's above or below that block, Shopify can't fill in the product info, and nothing will display.
   

2. You edited the wrong file. Many themes have several product templates (for example product.liquid, product-template.liquid, or a JSON template). If you edit one that isn't actually used on the page, you won't see any change. Try adding the code to a different product template.
   

3. The product has no reviews yet. By default, the widget is hidden when a product has 0 reviews. To show the widget with empty stars, add data-show-empty-stars="true" to the code.
   

4. You see the number but no star icons. The data is there, but the Loox script isn't running on the page. Check that the Loox core script is enabled on your theme. For vintage themes, contact our support team at [email protected].
   

5. You see nothing at all. View the page source and look at the <div class="loox-rating" ...> line. If data-id, data-rating, or data-raters are empty, the code is outside a product context. Move it inside the product loop or product template.
   

6. The product card is loaded by JavaScript (quick view, cart drawer, AJAX collection loading). The Loox script scans the page once upon loading, so content added later may not get stars. Contact support in these cases.
   

7. Theme CSS is hiding the widget. Inspect the element in your browser. If .loox-rating is there but invisible, your theme may be overriding it with display: none or zero size. A theme customization is needed.
   

8. A browser extension is blocking it. Ad blockers or privacy extensions sometimes block review widgets. Test in an incognito window with extensions disabled.