Integrating Loox Into Pages Hosted Outside of Shopify

Loox automatically integrates codes into your Shopify store's theme when you install the app to display the different widgets on your Shopify store.

If you wish to display Loox on other places outside your Shopify store (eg. Click funnels, Blogs, headless commerce, etc) follow the steps below.

To Embed a Loox Widget Into an External Page, Please Follow These Instructions:

1. Head over to the HTML code of the page you'd like Loox to appear on.
2. Copy the following script:
   

   <script async src="//loox.io/widget/loox.js?shop=STORE.myshopify.com"></script>
   	

3. Paste the script at the bottom of the HTML’s body, above the </body> tag.
4. Replace the STORE.myshopify.com with your store's .myshopify URL.
   Please make sure there are no extra spaces in the code (especially between the shop= and the .myshopify URL).
5. Integrating a widget:
   
   1. To integrate the Product reviews widget, which displays a single product's collection of reviews, copy the code below and paste it where you would like it to appear:
      

       <div id="looxReviews" data-product-id="XXXXXXXXXX"></div>
      		

   To integrate a variant of the Product Reviews widget, which displays your store's entire collection of reviews, copy the code below and paste it where you would like it to appear:

   <div id="looxReviews" data-loox-aggregate></div>
   		

   2.  To integrate the Rating widget, copy the code below and paste it where you would like it to appear:
      

      <div class="loox-rating" data-fetch data-id="XXXXXXXXXX"></div>
      		

   3. To integrate the Loox Cards Carousel widget, copy the code below and paste it where you would like it to appear:

      <div id="loox-default-carousel"><div class="loox-v2-carousel-container" id="LOOX-V2_CAROUSEL-card" data-slide-type="card" > </div></div>
      		

6. Replace the XXXXXXXXXX with the ID of the product that you'd like to display reviews for.
7. For help, read How to Find a Product's ID.
8. Save the HTML code.

Additional Widgets

Loox enables you to display other widgets, such as the Popup and Sidebar widgets. To do so, follow steps 1-4 above and paste the following code:

Popup Widget

<script> 	var loox_pop_active = true; var loox_pop_display = {"other_pages":true}; </script>

Sidebar widget

<script>  var loox_floating_widget = {    active: true,    display_on_other_pages: true,    position: "left",    button_text: "Reviews",    button_bg_color: "333333",    button_text_color: "FFFFFF",    hide_on_mobile: false,    display_on_home_page: true,  };</script>

The Sidebar settings can be configured within the code as below:

• "position" - Decide which side of the screen the Sidebar widget appears on ("left"/"right").
• "button_text" - Change the default "Reviews" title text.
• "button_bg_color" - Adjust the color of the widget's background. Please make sure you use a color hex code without the #.
• "button_text_color" - Pick the color of the Sidebar's title text. Please make sure you use a color hex code without the #.
• "hide_on_mobile" - Choosing "true" will prevent the Sidebar from appearing on mobile devices.

In order for the widgets to appear, you must allow-list the domain of the site inside the Loox app.

This can be done inside the "Settings" section, under "External Pages":

Click here to learn "How to Allow-list Domains outside of Shopify to Display the Loox Widgets".

If you need any further assistance, feel free to contact our Support team at [email protected], and we’d be more than happy to help!