If you would like to open fit quiz from multiple places (e.g. your Size & Fit section under product description), you can easily do that with our custom HTML classes.
If you would like a button or any other HTMl element to open our widget, simply add easysize-widget class to that element.
Don’t forget to hide this button on initial load, in order to avoid flickering if Easysize is not supported
.easysize-widget { display: none; }
Example:
<h1>Size & Fit details</h1>
If you are not sure about the size, you can:
<button class="easysize-widget">use our interactive Size Guide</button>
Clicking the button will open the widget only if the product is supported and Easysize can make recommendations for it. To prepare for a scenario when a product is not supported, you might want to hide the section.
This can be achieved by using another helper class easysize-loaded-show. Here’s an example how you could use it:
<h1>Size & Fit details</h1>
This product runs true to size.
<section class="easysize-loaded-show">
If you are not sure about the size, you can:
<button class="easysize-widget">use our interactive Size Guide</button>
</section>
In this example the whole section related to Fit Quiz will be hidden unless the product is supported with size recommendations.
When Fit Quiz is loaded and supported, we add es-loaded to the body. You can utilise this in order to create any other custom solutions around the widget.