How to embed widgets in Instant

Installing widgets in the Instant Page Builder is easy.

Adding the Custom Liquid element is available only on Instant's Business plan.

There are two options:

Using Liquid code - you can show product tiles on a carousel
Using JS code - products will be visible only in the full-screen player

Steps:

Drop the Custom Liquid element on page

2. On the right sidebar, click on "Open editor" button

3. Insert code inside editor

Liquid code

On the first line, you can see "widget_id" variable, change "8KLbLhQWOgaAP8v" to your widget ID from Storista app

{% assign widget_id = "8KLbLhQWOgaAP8v" %}
<script type="text/javascript">
    (function (w,d,s,o,f,js,fjs) {w[o] = w[o] || function () { (w[o].q = w[o].q || []).push(arguments) };if (d.getElementById(o)) {return;}js = d.createElement(s), fjs = d.getElementsByTagName(s)[0];js.id = o; js.src = f; js.type="module";js.async = 1; fjs.parentNode.insertBefore(js, fjs);}(window, document, 'script', '_sw', 'https://widget.storista.io/widget.js'));
</script>


<script type="text/javascript">
    {% assign a_widget_id = "storista_widget_" | append: widget_id %}
    window["storista_widget_{{ widget_id }}"] = {
      products: [
      {% for product in shop.metaobjects['app--4754013--storista_products'][a_widget_id].products.value %}
        {
          id: {{product.id | json}},
          title: {{ product.title | json }},
          featured_image: {{ product.featured_image | json}},
          price: {{ product.price }},
          price_min: {{ product.price_min }},
          price_max: {{ product.price_max }},
          available: {{ product.available }},
          price_varies: {{ product.price_varies }},
          options_with_values: {{ product.options_with_values | json }},
          variants: {{ product.variants | json }}
        }{% unless forloop.last %},{% endunless -%}
      {% endfor %}
      ]
    }
  </script>

<div
  data-type="storista"
  data-widget="{{ widget_id }}"  
></div>

After you change widget ID, paste the code into Instant's editor.

JS code

Inside Storista app, on widget page, click on "Install" button, select JS-code block and copy all the code to clipboard.

Paste the code into Instant's editor.