Customization Options for the Star Ratings

Changing the Star Rating's Color

Loox star ratings are black by default but can be changed to fit the needs of your brand. This change will apply to the star ratings widget and 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", under the Display reviews section 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. Alternatively, you can 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 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).