Skip to content

Integrate Loox

Loox Reviews

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.

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>

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

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