Displaying the star ratings on your store pages

On most themes, Loox will automatically scan your store's liquid files to 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 for some reason, the Loox star ratings don't appear, you can manually inject them on your store's pages through your liquid files. In this article, we'll present guides to adding or changing the location of the Loox star ratings on your store's pages.

IN THIS ARTICLE

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


  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 the total number of reviews for all of your store's products. These can be placed 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.