Displaying the Rating Widget on Your Store Pages via Code

If you have installed Loox in your store and you want to get the Rating widget to appear on your product pages, you’ve come to the right place. The Rating widget creates a trusting buying experience for your customers through the power of social proof.

In this article, we will help you manually add the Loox Rating widget to each product that has at least one approved review collected on your store pages. 

Homepage featured product

• 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

For example (Debut theme):

Collections 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.

For example (Debut theme):

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>
	

• Paste it where you want the rating icons to appear on the product page (we recommend below the product's title), and save your file.

For example (Debut theme):

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="{{ item.product.id }}" data-rating="{{ item.product.metafields.loox.avg_rating }}" data-raters="{{ item.product.metafields.loox.num_reviews }}"></div>
	

• Paste it where you want the rating icons to appear on the cart page, and save your file. 

For example (Debut theme):

Displaying your store's total rating

Following the steps below, you can display the average rating and the total number of reviews for all your store's products. You can place this code instead of any of the above Rating widget codes or separately on the same page.

• Inside the Shopify Themes menu, click the "Actions" menu and then select "Edit code"
• Open the file that you wish to add the 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:

<style>  .loox-rating-hp.loox-rating { font-size:50px; text-align:center; }  </style>
	

Linking the Rating Widget to the Floating 'Happy Customers' Widget

Out-of-the-box, the product page's rating icons will link to the Product Reviews widget at the bottom of the page. However, you can link the icons to the floating 'Happy Customers' widget instead. To do so, please follow the steps below:

• Inside the Shopify Themes menu, click the "Actions" menu 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 :

<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>
	

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

<a href="#" onclick="LOOX.openHCFloater({{product.id}});">
<div class="loox-rating" data-id="{{ product.id }}" data-rating="{{ product.metafields.loox.avg_rating }}" data-raters="{{ product.metafields.loox.num_reviews }}"></div> 
</a>
	

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