Skip to main content

Add Widget

You can create a liquid file in the snippets folder of your theme with the widget configuration and the render the file at the desired position on your product page.

Configure widget​

snippets/onlinesizing.liquid

// Make sure to only load the widget on relevant product pages. If your type doesn't match or you don't use type you might use another condition here.
{% if product.type == 'Bike' % or product.type == 'Ski' %}

<oz-widget
  id="onlinesizing-widget"
  onselect="confirmSize"
  global-id="{{ product.selected_or_first_available_variant.barcode }}"
  variant-id="{{ product.selected_or_first_available_variant.id }}"
  name="{{ product.title }}"
  image="{{ product.featured_image | image_url: width: 600 }}"
  price="{{ product.selected_or_first_available_variant.price | divided_by: 100.00 }}"
  {% if product.type == 'Bike' %}
    product-type="Bike"
  {% elsif product.type == 'Ski' %}
    product-type="Ski"
  {% endif %}
>
  <button style="visibility: hidden" class="button button--primary"></button>
</oz-widget>

<script>
  const product = {{ product | json }};
</script>

{% endif %}
info

We declared the product variable here to have access to it for the confirmSize callback function later

Render widget​

sections/main-product.liquid

{% render 'onlinesizing', product: product %}