Displaying Your Loox Widgets on External Domains Hosted Outside of Shopify

Display your Loox widgets on custom pages built outside Shopify.

In this article, we will guide you through displaying your Loox widgets on pages hosted outside of Shopify (for example, blog posts, Click funnels, headless commerce, etc.).

How to allow-list domains outside of Shopify 

By default, we block all non-Shopify domains from displaying any Loox widgets, securing your customer reviews and data.

For your Loox widgets to appear on your external pages, add them to your allow-list on your Loox account.

To add  your external page[s] not hosted on Shopify:

• Inside the Loox "General" settings page, go to “External pages”.
• Insert the domain you would like to display your Loox widgets on, including the “www” prefix:

Displaying Loox widgets in pages hosted outside of Shopify

To display your Loox widgets on pages hosted outside of Shopify: 

• Go to the HTML code of the external page you would like to add your Loox widget to.

• Copy the following script:

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

• Paste the script at the bottom of the HTML’s body, above the </body> tag.

• Replace the STORE.myshopify.com with your store's .myshopify URL.

  Note: Make sure there are no extra spaces in the code (especially between the shop= and the .myshopify URL).

• Copy and paste the code of the Loox Widget you would like to display:
  • Product reviews widget:
    • To display product-specific reviews:

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

• To display your store’s entire collection of reviews:

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

• Star Rating Widget:

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

• Cards Carousel widget:

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

• Testimonials Carousel widget:

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

• Gallery Carousel widget:

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

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

• Video Slider Widget:

<loox-video-slider-widget show-rating show-reviewer-name hide-arrows-mobile auto-play></loox-video-slider-widget>

• Replace the XXXXXXXXXX placeholder with the ID of the product that you'd like to display reviews for.
• Save the adjustments made to your page’s code