How do I customize my star ratings?

To customize the text that appears next to your star ratings widget, follow these instructions:

  1. Go to your Shopify Themes menu
  2. Click the "Actions" menu and then select "Edit code"
  3. Open the liquid that you've added star ratings to:

    Product pages - usually product.liquid or product-template.liquid
    Collection pages - usually product-grid-item.liquid
    Cart page - usually cart.liquid or cart-template.liquid
  4. Find 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. By adding a new attribute named data-pattern, you'll be able to customize the text that appears next to the stars (see examples below). In addition to static text, you can also add dynamic values by using the following parameters:
    1. [count] - displays the number of reviews the product has
    2. [rating] - displays the average rating of the product
  6. Here are a few examples you can use to customize the text that appears by the star ratings:
    1. To add the word "Review(s)" to the star ratings, replace the existing code with this one:
      <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 }}"  data-pattern="[count] Review(s)"></div></a>
    2. To display the average rating the product has, replace the existing code with this one:
      <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 }}"  data-pattern="[rating]/5"></div></a>
    3. To display both, replace the existing code with this one:
      <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 }}" data-pattern="[rating]/5, [count] Review(s)"></div></a> 
  7. You may edit the text within the data-pattern attribute to include anything you'd like, such as brackets or additional words (in English or any other language).

    If you need any help, please contact us and we'll be happy to assist!