Customization options for the star ratings

Out-of-the-box, Loox will inject the code for the star ratings on your product page, collections pages, and homepage featured product (if you have one). The star ratings will display the average rating represented in stars (rounded up) and the number of reviewers for the relevant product.

There are several ways to customize the star ratings to fit your brand's tone and store's design, either within the Loox admin or through customizing the star ratings' code within your liquid files. In this article, we'll display the different ways to customize and personalize the Loox star ratings on your store.

Changing the color of the star ratings

Loox star ratings are black by default but can be changed to fit the needs of your brand. This change will apply both to the star ratings on their own, as well as the stars that appear on the reviews widget's header.

To change the color of the star icons, follow the steps below:

1. Go to the "Appearance" section of the Display reviews tab of your Loox settings
2. Click inside the text field of the color picker
   
3.   drag the selector to the color you want and click "OK":
   
4. You can also manually insert a specific color hex code in the text field itself.

Changing the color of the text next to the star ratings

By default, Loox will display the number of reviewers in the same color you set the star ratings to be.

However, you can use styling rules in your store's code to only change the color of the text.

To change the color of the star rating's text, 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.liquid or product-template.liquid, but some themes work differently)
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. Above the star rating's code mentioned above, paste the following code:

   <style> .loox-rating span {color:black;} </style>
   	

   Change the "black" to the color/color code you wish and this should change the color of the font of the star ratings.

Custom text next to the star ratings

Out-of-the-box, Loox will display the number of reviewers in parenthesis, next to the star ratings, like so:

Through customizing the liquid code for the Loox star ratings, you can change the text to include more information.

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 under snippets: product-grid-item.liquid / product-loop.liquid / product-info.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 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 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 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).