Displaying the Star Ratings on Your Store Pages

On most themes, Loox will scan your store's liquid files to place the star ratings on your pages. Loox will place the star ratings on your product pages, collections pages, and homepage featured product (if you have one).  

Note: Star ratings only appear when there's at least one approved review of the product.

However, if the star ratings don't appear, you can inject them into your store's pages through your liquid files.

If you are using Shopify's Store 2.0 themes (such as Dawn), you can integrate the Loox star ratings through the theme editor. Learn more

In this article, we'll show how to add or change the location of the Loox star ratings on your store's pages. 

If you need help editing your Liquid code, feel free to contact our Support team at [email protected], and we’d be more than happy to help!

IN THIS ARTICLE


  1. Go to your Shopify Themes menu.
  2. Click the "Actions" menu and then select "Edit code".
  3. Open the template or section you use for the homepage featured product (usually it's called featured-product.liquid or homepage-product.liquid, but some themes work differently).
  4. 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>
    	
  5. Paste it where you want the stars to appear (we recommend below the product's title), and save your file.

    For example (this is on the Debut theme):


Collections Pages

  1. Go to your Shopify Themes menu.
  2. Click the "Actions" menu and then select "Edit code".
  3. Open the template or section you use for the product in your collections (under snippets, product-grid-item.liquid / product-loop.liquid / product-info.liquidproduct-card-grid.liquid, but some themes work differently).
  4. 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>
    	
  5. Paste it where you want the stars to appear on your collection listing (we recommend below the product's title), and save your file.

    For example (this is on the Debut theme):


Product Pages

  1. Go to your Shopify Themes menu.
  2. Click the "Actions" menu and then select "Edit code".
  3. 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).
  4. 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>
    	
  5. Paste it where you want the stars to appear on the product page (we recommend below the product's title), and save your file.

    For example (this is on the Debut theme):


Cart Page

  1. Go to your Shopify Themes menu.
  2. Click the "Actions" menu and then select "Edit code".
  3. Open the template or section you use for cart pages (usually it's called cart.liquid or cart-template.liquid, but some themes work differently)
  4. 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>
    	
  5. Paste it where you want the star ratings to appear on the cart page, and save your file.

    For example (this is on the Debut theme):


Displaying Your Store's Total Star 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 star ratings codes or separately on the same page.

  1. Go to your Shopify Themes menu.
  2. Click the "Actions" menu and then select "Edit code".
  3. Open the liquid file that you wish to add the star ratings to.
  4. 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 %}
    	
  5. Optional styling:
    To make the star ratings bigger and centered on the page add this code above the previous:
    <style>  .loox-rating-hp.loox-rating { font-size:50px; text-align:center; }  </style>
    	

Linking the Star Ratings to the Floating 'Happy Customers' Widget

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

  1. Go to your Shopify Themes menu.
  2. Click the "Actions" menu and then select "Edit code".
  3. 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).
  4. Find the following code :
    <a href="#looxReviews"> 
    <div data-id="{{ product.id }}" data-rating="{{ product.metafields.loox.avg_rating }}" data-raters="{{ product.metafields.loox.num_reviews }}"></div> 
    </a>
    	
  5. Replace it with the code below, and save your file:
    <a href="#" onclick="LOOX.openHCFloater({{product.id}});">
    <div 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 star ratings, the floating 'Happy Customers' widget will appear, displaying the product's reviews only.


If you need help editing your Liquid code, feel free to contact our Support team at [email protected], and we’d be more than happy to help!