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.
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, please contact our support team and we'll be happy to assist.

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

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

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

    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.

    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 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:
    {% 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>
    	

If you need help editing your Liquid code, please contact our support team and we'll be happy to assist.