Adding Loox Widgets to Your Store

Add and customize Loox widgets to your store's pages using our built-in integration with Shopify's Online Store 2.0 themes.

The article below will guide you through adding a Loox widget to your theme, adjusting its location using the Theme Editor's drag-and-drop feature, and the customization options available for each widget.

Rating Widget

To add the Loox Rating widget to your product pages from the Loox app:

• Go to the "Reviews widgets" settings section.

• Click "Add to theme" under "Rating WIdget":

  

• Inside the Shopify Theme Editor, drag and drop the widget app block where you would like it to appear (we recommend placing it under the product title):

  

• Customize the widget’s appearance to match your brand’s design (learn more below).
• Click "Save".

Optional customizations:

• Size: Adjust the size of the 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 Rating Widget on your product page..
• Layout - "Single Icon": When selected, the 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 Rating Widget will display "empty" Rating icons on products with no reviews collected.

Product Reviews Widget

To add the Product Reviews Widget from the Loox app:

• Go to the "Reviews widgets" settings section.

• Click "Add to theme" under "Product Reviews Widget":

  

• Inside the Shopify Theme Editor, drag and drop the widget app block where you would like it to appear:

  

• Customize the widget’s appearance to match your brand’s design (learn more below).
• Click "Save".

Optional customizations:

• Display only reviews with photos - When enabled, only reviews with photos or videos will appear.
• Show reviews from all products - When enabled, the widget will showcase your store's entire collection of reviews instead of product-specific reviews.
• Hide product thumbnails - When enabled, the product thumbnail section appearing at the bottom of each review will no longer appear.
• Maximum width - Adjusts the maximum width of the widget.
• Show sample reviews - When enabled, sample reviews will be displayed on the widget while editing your theme.

Cards Carousel Widget

To add the Cards Carousel widget (or any other Carousel widget) to your pages from the Loox app:

• Go to the "Reviews widgets" settings section.

• Click "Add to theme" under "Cards Carousel Widget":

  

• Inside the Shopify Theme Editor, drag and drop the widget app block where you would like it to appear:

  

• Customize the widget’s appearance to match your brand’s design (learn more below).
• Click "Save".

Optional customizations:

• Maximum width: Adjusts the maximum width of the widget.
• Corner radius: Adjusts the size of the widget's corner radius.
• Number of reviews on desktop: Changes the number of reviews showcased on the widget when viewed on desktop.
• Max number of characters: Adjusts the maximum number of characters available to each review showcased. 

• Image ratio: Adjusts the ratio used to showcase the widget's reviews. 

  Note: Any image larger than the image ratio selected will automatically be cropped and centered to fit.

• Reviewer name color: Adjusts the color used on the name of the reviewer.
• Text color: Adjusts the color of the review's text.
• Text background color: Adjusts the background color of the reviews' text.
• Stars color: Adjusts the color of the widget's star icons.
• Stars background color: Adjusts the background color of the widget's stars.
• Arrow background color: Adjusts the background color of the widget's arrows.
• Arrow color: Adjusts the color of the carousel's arrows.
• Drop shadow style: Adjusts the type of drop shadow used on the widget's reviews.
• Show border: When enabled, a border will be displayed around each review "box".
• Border width: Adjusts the size of the widget's border.
• Border color: Adjusts the color of the widget's border.
• Select product (optional): When a certain product is selected, the widget will display that product's first 20 reviews.

Trust Badge

To add the Loox Trust Badge to your homepage from the Loox app:

• Go to the "Reviews widgets" settings section.

• Click "Add to theme" under "Loox Trust Badge":

  

• Inside the Shopify Theme Editor, drag and drop the widget app block at the location would like it to be:

  

• Customize the widget’s appearance to match your brand’s design (learn more below).
• Click “Save”.

Optional customization

• Layout: Select your preferred widget layout out of six different options.
• Align: Adjust the location of the widget on your page.
• Color scheme: Select the color theme you would like to use for the widget.

• Label: Customize the text that appears next to the reviews counter.
• Show Rating Icon: When checked, your store's rating icons will display on the Trust Badge. The Rating Icons displayed on the widget will be based on the Icons selected in your Loox Admin's "Branding" settings section.
• Show Rating: When checked, your store's average rating will be displayed.
• Show Review count: When checked, your store's total number of reviews collected will be displayed.
• Open Floating Product Reviews Widget on click: When checked, the Floating Product Reviews Widget will appear, displaying your store's entire collection of reviews.

• Show border: When checked, a border line will appear surrounding the widget.
• Border radius: Adjust the angle of the widget’s corners.
• Font size: Adjust the size of the widget's text.
• Background color: Choose the color of the widget’s background
• Secondary background color: Choose the color for the “Powered by Loox” footer.
• Text color: Choose the color of the widget’s text.
• Rating Icon color: Choose the color for the Rating Icons displayed on the widget.
• Border color: Choose the color of the widget’s border line.

Snippets Widget

To add the Snippets Widget from the Loox app:

• Go to the "Reviews widgets" settings section.

• Click "Add to theme" under "Snippets Widget":

  

• Inside the Shopify Theme Editor, drag and drop the widget app block where you would like it to appear:

  

• Customize the widget’s appearance to match your brand’s design (learn more below).
• Click "Save".

Optional customizations:

• Widget alignment - Adjust the location of the Snippets Widget on your product page.
• Widget width - Adjust the maximum width of the widget on the page.
• Color scheme - Select the color theme you would like to use for the widget.
• Shadow type - Adjusts the type of drop shadow used on the widget's reviews.
• Show review rating - When checked, your product’s average rating will be displayed.
• Show review image - When checked, the photo/video attached to the review will be displayed next to it.
• Hide arrows on mobile - When checked, the widget’s arrow keys will be hidden on mobile view.
• Font size - Adjust the size of the widget's text.
• Show border - When checked, a border line will be displayed, surrounding the widget.
• Border radius - Adjust the angle of the widget’s corners.
• Background color - Choose the color of the widget’s background
• Text color - Choose the color of the widget’s text.
• Name color - Choose the color of the reviewer’s name.
• Rating icon color - Choose the color for the Rating Icons displayed on the widget.
• Border color - Choose the color of the widget’s border line.
• Shadow color -  Choose the color of the widget’s shadow.
• Number of reviews to display -  Select the number of reviews showcased on the widget.