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:

Default button

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

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

<button
id="my-custom-oz-button"
class="oz-trigger"
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>

Please make sure to add the class oz-trigger to your button element, so the OZ loader can find your button.

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.

info

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 Show alternatives 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>
info

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>