Integrating Loox Widgets with Store 2.0 Themes

Loox enables a built-in integration with every store page on Shopify's Online Store 2.0 themes. This means that you can easily place the Loox widget anywhere you'd like in your store. 

In this article, we'll explain how to integrate the different Loox widgets on your store's pages.

If you need help adding the Loox widgets on your store's pages, feel free to contact our Support team at [email protected], and we’d be more than happy to help!

IN THIS ARTICLE


Star Ratings

To add the Loox star ratings on your product pages on a 2.0 theme, follow these steps:

  1. Go to your Shopify Themes menu.
  2. Click "Customize":
  3. Go to your default product page (or any product page):
  4. On the left-side menu, click "Add block" and choose "Loox - Ratings Widget" under APPS:
  5. Position the widget where you'd like it to appear by dragging it up or down (we recommend placing it under the product title):
  6. Click "Save".

When adding the star ratings widget as a block on 2.0 themes, they cannot be customized. If you wish to customize your star ratings widget, please add them as a custom HTML code as mentioned here. Then, you can customize them, as mentioned here.

Note: The star ratings will automatically display the number of reviews and average ratings for the relevant product, only if placed on a product page.


Reviews Widget

To add the Loox reviews widget on your pages on a 2.0 theme, follow these steps:

  1. Go to your Shopify Themes menu.
  2. Click "Customize":
  3. Go to the page you'd like to add the Loox widget (for example, your product pages):
  4. On the left-side menu, click "Add section" and choose "Loox - Reviews Widget" under APPS:
  5. Edit the settings of this widget and go back to the sections menu.
  6. Position the widget where you'd like it to appear by dragging it up or down:
  7. Click "Save".

Optional customizations:

  • Display only reviews with photos - Enable to only show reviews that include photos or videos.
  • Show reviews from all products - Enable to show reviews from all your store's products.
  • Hide product thumbnails - Enable to hide a product thumbnail which will include the reviewed product's image and name.
  • Maximum width - Choose the maximum width the Loox widget will be displayed in, regardless of screen size.

To display the Cards Carousel widget on your pages on a 2.0 theme, follow the instructions below:

  1. Go to your Shopify Themes menu.
  2. Click "Customize":
  3. Click "Add section" on the left-side menu and choose the "Carousel - Cards" widget:
  4. Note: If you do not see the "Carousel - Cards" widget, please re-integrate Loox with your theme and try again. Click here to learn how.
  5. Edit the settings of this widget and go back to the sections menu.
  6. Position the widget where you'd like it to appear by dragging it up or down:
  7. 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.

Note: The Loox Cards Carousel widget has a limit of 20 reviews.   

If you need help adding the Loox widgets on your store's pages, feel free to contact our Support team at [email protected], and we’d be more than happy to help!