Loox

How to integrate Loox Reviews Shopify App

Loox can be installed on any external platform and not only on Shopify, follow up their official guide in order to properly configure domains.

It has many widgets that can easily be integrated within Webflow. that do only require you to add specific classes to divs.

Scale plan required

Loox will work in headless mode only and exclusively from the Scale plan and above.

General Widgets

This widgets can be used in all pages by just adding a code embed inside Webflow

All Reviews

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

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

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

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

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

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

Product Page Widgets

The following widgets instead can be used only in the Product template page

Product Reviews

<div id="looxReviews" data-product-id="{{wf {&quot;path&quot;:&quot;shopify-id&quot;,&quot;type&quot;:&quot;PlainText&quot;\} }}"></div>
<script>
document.currentScript.closest('.w-embed').querySelectorAll('[data-product-id]').forEach(el => {
  el.dataset.id = el.dataset.productId.split('/').pop();
});
</script>

Star Rating Widget

<div class="loox-rating" data-fetch data-id="{{wf {&quot;path&quot;:&quot;shopify-id&quot;,&quot;type&quot;:&quot;PlainText&quot;\} }}"></div>
<script>
document.currentScript.closest('.w-embed').querySelectorAll('[data-id]').forEach(el => {
  el.dataset.id = el.dataset.id.split('/').pop();
});
</script>

On this page