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>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>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 {"path":"shopify-id","type":"PlainText"\} }}"></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 {"path":"shopify-id","type":"PlainText"\} }}"></div>
<script>
document.currentScript.closest('.w-embed').querySelectorAll('[data-id]').forEach(el => {
el.dataset.id = el.dataset.id.split('/').pop();
});
</script>