Displaying the Star Rating Widget on Vintage Themes

Create a trusting buying experience for your customers through the power of social proof using our Star Rating Widget.

In the article below, we will guide you through the process of manually adding the Star Rating Widget code to all types of store pages, displaying your products’ average rating score and the number of reviews collected for each product.

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>

• 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):

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

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

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="{{ 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

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:

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

Linking the Star Rating Widget to the Floating Product Reviews Widget

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

To link your Star Rating Widget to the Floating Product 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 :

<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="#looxReviews"> 
<div class="loox-rating" 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>
</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.