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 bike. This can be the code of any of the frame sizes you are selling. For example the EAN code for the "XS" frame 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 bike which you would like to see in the widget. Typically the first of the product images.
  • data-oz-price: The price of the product formatted as a floating number. This is necessary for the Recommendation Engine to work at its best.

You would set those config attributes using your usual template tags, for example Liquid tags:

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="sizing"
  data-oz-embed="launcher"
  data-oz-code="{{ product.ean }}"
  data-oz-name="{{ product.title }}"
  data-oz-image="{{ product.image.src }}"
  data-oz-price="{{ product.price }}"
></div>
tip

Use data-oz-widget="alternatives" if you want to use the Recommendation Engine as well.

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="sizing"
  data-oz-embed="custom"
  data-oz-code="{{ product.ean }}"
  data-oz-name="{{ product.title }}"
  data-oz-image="{{ product.image.src }}"
  data-oz-price="{{ product.price }}"
  data-oz-fullscreen="true"
>
  What's my size?
</button>
tip

Use data-oz-widget="alternatives" if you want to use the Recommendation Engine as well.

The data-oz-fullscreen="true" controls wether the sizing widget will open in an overlay or as a regular element in the page flow. If you'd rather show Online Sizing directly on your page instead of the default fullscreen overlay, go ahead a remove that data attribute.

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.

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​

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

Launcher Label Show

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

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:

Launcher Label Hide

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

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:

Confirm Size Label

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

Size Unavailable 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:

Confirm Size Label

<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​

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:

Confirm Size Label

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