Customizing The Rating Widget Via Code

Out-of-the-box, Loox will inject the code for the Rating widget on your store pages. These include the product page, collections pages, and homepage featured product (if you have one). The Rating widget will display the average rating (rounded up) and the number of reviews for the relevant product.

There are several ways to customize the Rating widget to fit your brand's tone and store's design. You can do this within the Loox admin or through editing the code within your liquid files.

In this article, we'll display the different ways to customize the Loox Rating widget on your store.

IN THIS ARTICLE

Customizing your store's Rating icons

To edit the Rating widget displayed on your store, go to General Appearance setting within your Loox Admin Settings - Branding,

The changes are automatically applied to all of your Loox Reviews, Rating, and Carousel widgets, as well as to your Upsell page’s Rating widget. 

To change the color of the Rating icons:

  • Click inside the text field of the color picker:
  • Select the color you want:
  • Alternatively, you can manually insert a specific color hex code in the text field itself instead:

To change your Rating icons, click on the icon’s dropdown, and select your icon:

Changing the Color of the Text Next to the Rating widget

By default, Loox will display the number of reviewers in the same color you set the Rating Icons 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 Rating widget's text, follow the steps below:

  • Go to your Shopify Themes menu.
  • Click the "Actions" menu and then select "Edit code".
  • 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)
  • 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>
  • Above the widget'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 Rating widget.

Custom Text Next to the Rating Icons

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

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

To customize the text that appears next to your Rating Icons, 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 Rating widget 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>
  • By adding a new attribute named data-pattern, you'll be able to customize the text that appears next to the icons (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
  • Here are a few examples you can use to customize the text that appears by the Rating Icons:

  • To add the word "Review(s)" to the Rating widget, 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>

    • 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>

    • 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>

  • 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 help editing your Liquid code, feel free to contact our Support team at [email protected], and we’d be more than happy to help!