Klaviyo Reviews

Klaviyo is a very powerfull platform for marketing automation.

Integrating Klaviyo with Webflow is very easy. If you use the Shopify App embed, you have just to copy and paste the code you will find in your Smootify dashboard! Otherwise you can just follow up their official doc in order to embed the scripts inside Webflow.

After integrating the App Embed, you can also install Klaviyo Reviews App, it has many widgets that can be embedded into Webflow very easily.

General Widgets

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

All Reviews

<div class="shopify-block shopify-app-block" data-block-handle="all-reviews">
    <div id="klaviyo-reviews-all" data-id="all">
    </div>
</div>

Featured Reviews Carousel

<div class="shopify-block shopify-app-block" data-block-handle="featured-reviews-carousel">
    <div id="klaviyo-featured-reviews-carousel">
    </div>
</div>

Product Page Widgets

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

Product Reviews

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

Product Reviews List

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

Product Reviews Summary

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

Product Average Rating

<div class="shopify-block shopify-app-block" data-block-handle="average-rating">
<span class="klaviyo-star-rating-widget" data-id="{{wf {&quot;path&quot;:&quot;shopify-id&quot;,&quot;type&quot;:&quot;PlainText&quot;\} }}" data-product-title="{{wf {&quot;path&quot;:&quot;name&quot;,&quot;type&quot;:&quot;PlainText&quot;\} }}" data-product-type="" style="display: block;"></span>
<span id="fulfilled-style"/>
</div>
<script>
document.currentScript.closest('.w-embed').querySelectorAll('[data-id]').forEach(el => {
    el.dataset.id = el.dataset.id.split('/').pop();
});
</script>