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; }
In some instances you might also want to hide the original Fit Quiz button if you are replacing the default button with your own.
#easysize_button { 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.
P.s In this instance, you likely want to hide the whole section on render
.easysize-loaded-show { display: none; }
.es-loaded .easysize-loaded-show { display: block; }
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.