Skip to main content

Add "Find my size" button

info

We now need to add the Find my size button which will open the widget. There are two different options to create that button.

  1. Our default button is a convenient way to get up and running fast, since it comes pre-packed with styles and customization options. This button is also a widget loaded in an iframe and has a bit local configuration

  2. A custom button can be any HTML element you'd like it to be, though we'd suggest a regular <button> element. The custom button can be fully customized.

Regardless of which button you choose, you must pass the following attributes.

  • data-oz-code: This takes the EAN/UPC product code of your ski. This can be the code of any of the sizes you are selling. For example the EAN code for the "178" size. Our API will know which model you are looking for.
  • data-oz-name: The product title as it appears on your product page. You will usually use the same template tag to output this title as you're already using in the headline of your page.
  • data-oz-image: A full URL to the image of the ski which you would like to see in the widget. Typically the first of the product images.
important

The button should only be loaded on relevant product pages. This can be achieved e.g. with a condition that checks if the product belongs to a certain category or is of a certain type. The condition is individual and depends on the conditions given in the online shop (e.g. categories, product types etc.).

Default button​

This button will get its color (cta), roundness and label (launcherLabelShow) from the global configuration.

<!-- Add a condition so that the button code is loaded only on relevant product pages. -->
<div
  data-oz-widget="ski"
  data-oz-embed="launcher"
  data-oz-code="{{ product.selected_or_first_available_variant.barcode }}"
  data-oz-name="{{ product.title }}"
  data-oz-image="{{ product.featured_image.src | img_url: 'grande' }}"
></div>

Custom button​

This is how a custom button element can be set up. You can give it an own id and additional classes for styling.

<!-- Add a condition so that the button code is loaded only on relevant product pages. -->
<button
  id="my-custom-oz-button"
  data-oz-widget="ski"
  data-oz-embed="custom"
  data-oz-code="{{ product.ean }}"
  data-oz-name="{{ product.title }}"
  data-oz-image="{{ product.image.src }}"
  data-oz-fullscreen="true"
>
  What's my size?
</button>
important

At this point the widget should already work. But we're missing an important piece, which users of the ready made button get out of the box: Checking if the product code actually exists in our database.

To get this functionality, please follow the examples outlined in the Advanced Integration section of the docs.

tip

If you use the widget for bikes and ski the only difference in the button code is that a different widget type is loaded. So you could combine the button code.

// This example might not work in your shop and has to be modified
{% if product.type == "Bike" or product.type == "Ski" %}
  <button
    id="my-custom-oz-button"
    {% if product.type == "Bike" %}
      data-oz-widget="sizing"
    {% elsif product.type == "Ski" %}
      data-oz-widget="ski"
    {% endif %}
    data-oz-embed="custom"
    data-oz-code="{{ product.selected_or_first_available_variant.barcode }}"
    data-oz-name="{{ product.title }}"
    data-oz-image="{{ product.featured_image.src | img_url: 'grande' }}"
    data-oz-fullscreen="true"
  >
    What's my size?
  </button>
{% endif %}

Labels (optional)​

info

Alternatively to override the default labels in the global configuration you can override options and labels for single widgets in the local button configuration. This might be handy if you have multiple widgets on your page.

Launcher Label Show​

Launcher Label Show

If you would like to change the standard text Find my size on the launcher button you can do that easily like this:

<div ... data-oz-launcher-label-show="Custom text"></div>

Launcher Label Hide​

Launcher Label Hide

If you would like to change the standard text Close Sizing on the launcher button you can do that easily like this:

<div ... data-oz-launcher-label-hide="Custom close button"></div>

Confirm Size Label​

Confirm Size Label

If you would like to change the standard text Select Size displayed on the confirm button in the result screen, you can do that easily like this:

<div ... data-oz-confirm-size-label="Custom Confirm Text"></div>

Size Unavailable Label​

Confirm Size Label

If you would like to change the standard text Continue shopping displayed on the confirm size unavailable button in the result screen, you can do that easily like this:

<div
  ...
  data-oz-confirm-size-unavailable-label="Custom Size Unavailable Text"
></div>
important

The size unavailable button will only show up, if you configured a callback function to check your product stock as outlined here.

Size Does Not Fit Label​

Confirm Size Label

If you would like to change the standard text Continue shopping displayed on the size does not fit button in the result screen, you can do that easily like this:

<div
  ...
  data-oz-confirm-size-does-not-fit-label="Custom Does Not Fit Text"
></div>