Skip to main content

Add Geometry Widget

info

The Geometry Display is just another widget same as the Sizing widget. Again it's a server side rendered custom html element.

There are two different options for the code.

  1. Default Geometry Button is a convenient way to get up and running fast, since it comes pre-packed with styles and customization options in the Smartfit Analytics backend.

  2. Custom Geometry Button is fully customizable and meets the highest design standards.

Regardless of which code you choose, the following attributes are mandatory. You would set those config attributes using your usual template variables, for example Liquid tags:

  • 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.
  • global-id: 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.
  • variant-id: Unique product identifier that must be the same identifier used in the feed for that product.
  • 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.
  • product-type: This information is necessary to control which features the widget can offer. Possible values are: Bike, Ski

The following attributes can also be passed optionally.

  • id: Assign an ID to the widget to make it easier to select it afterwards.
  • lang: To specify a fix language for the widget. Otherwise the language will be set based on the browser language.
  • style-name: If we have set up a custom style for you you can specify the style to be applied on the widget here by the style name.
important

The widget 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.).

Widget code​

<!-- Add a condition so that the widget code is loaded only on relevant product pages. -->
<oz-Geometry
  name="{{ Product title variable }}" 
  global-id="{{ GTIN variable }}" 
  variant-id="{{ Variant-ID variable }}" 
  image="{{ Product image url }}"
  price="{{ Product price }}" 
  product-type="Either Bike or Ski"
>
</oz-Geometry>