Customizing the Star Rating Widget

Customize your Loox Star Rating Widget to match your branding.

This article will guide you through the customization options available for the Star Rating Widget on the Shopify Theme Editor, and how to change your Rating icons from your Loox “Branding” settings section.

Customizing the Star Rating Widget from the Theme Editor

Customize the Star Rating Widget’s appearance without leaving the Shopify Theme Editor.

The widget’s “app block” offers multiple customization options.

The options available are:

• Size: Adjust the size of the Star Rating Widget's text and icons.
• Text: Insert custom text to appear next to your rating icons. Overrides the default "([rating])" text placeholder.
• Hide text: No text will appear next to the widget's rating icons when enabled.
• Widget alignment: Adjust the location of the Star Rating Widget on your product page.
• Layout - "Default": When selected, the Star Rating Widget will display up to 5 stars next to the product's average rating matching it average rating.
• Layout - "Single Icon": When selected, the Star Rating Widget will display a single rating next to the product's average rating.
• Text Color: Select your desired color used for the widget's text appearing next to the rating icons.
• Override default star color: Override the default rating icons color selected in your Loox "Branding" settings section, and choose your desired color.
• Show all reviews: When enabled, the widget will showcase your store's aggregated average rating and the total number of reviews collected instead of showing each product's respective numbers.
• Change Rating Icon: Redirects you to your Loox "Branding" settings section, allowing you to change your selected rating icon.
• Open Floating Product Reviews Widget on click: When enabled, clicking on the widget's Rating icons will open the Floating Product Reviews Widget.
• Show empty stars when there are no reviews: When enabled, the Star Rating Widget will display "empty" Rating icons on products with no reviews collected.

Customizing your Rating icons

Select the Rating icons used to display your products’ average rating to match your brand’s design.

To edit the Rating Icons displayed on your store:

• Inside the  Loox App “Branding” settings section, go to “General Appearance”.
• Next to “Rating Icon”, click on the Dropdown menu button,  and select a  rating icon:

• Once you have selected your rating icon, you can change its color by using the color selector tool next to the dropdown menu or by inserting your color’s hex code: