Add "Geometry" button

info

We now need to add the Geometry Display 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-widget: This option tells the widget that it is the Geometry widget and not the Sizing widget.
• 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.

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.

Code

<div
  data-oz-widget="geometries"
  data-oz-embed="launcher"
  data-oz-code="{{ product.ean }}"
  data-oz-name="{{ product.title }}"
  data-oz-image="{{ product.image.src }}"
></div>

Rendered

<!-- This example might not work in your shop and has to be modified -->
{% if product.type == "Bike" %}
<div
  data-oz-widget="geometries"
  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>
{% endif %}

Example Shopify

<div
  data-oz-widget="geometries"
  data-oz-embed="launcher"
  data-oz-code="8053323623809"
  data-oz-name="Cinelli Veltrix Potenza Road Bike 2020"
  data-oz-image="https://cdn.bike24.net/i/mb/a2/62/2d/301915-00-d-617909.jpg"
></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.

Code

<button
  id="my-custom-geometry-button"
  data-oz-widget="geometries"
  data-oz-embed="custom"
  data-oz-fullscreen="true"
  data-oz-code="{{ product.ean }}"
  data-oz-name="{{ product.title }}"
  data-oz-image="{{ product.image.src }}"
>
  Show geometries
</button>

Rendered

<!-- This example might not work in your shop and has to be modified -->
{% if product.type == "Bike" %}
<button
  id="my-custom-geometry-button"
  data-oz-widget="geometries"
  data-oz-embed="custom"
  data-oz-fullscreen="true"
  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' }}"
>
  Show geometries
</button>
{% endif %}

Example Shopify

<button
  id="my-custom-geometry-button"
  data-oz-widget="geometries"
  data-oz-embed="custom"
  data-oz-fullscreen="true"
  data-oz-code="8053323623809"
  data-oz-name="Cinelli Veltrix Potenza Road Bike 2020"
  data-oz-image="https://cdn.bike24.net/i/mb/a2/62/2d/301915-00-d-617909.jpg"
>
  Show geometries
</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.

Labels (optional)

info

To override the labels of the default button you can set an attribute in the button configuration of the default button

Launcher Label Show

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

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

Launcher Label Hide

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

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