Thinking of adding Fit Quiz to not only product pages but other standalone pages too? We've got you covered!
User experience
Fit Quiz can now be added across your shop and assist shoppers on non product (non PDP) pages. Typically, these include:
a catalog or a category page
an index (main) page
a standalone landing page
a size guide/size assistance page
Usually, an additional call-to-action button is added to a page (referred to as a non PDP page), opening the Fit Quiz widget upon clicking. Shoppers are asked the same questions as usually in Fit Quiz. The results screen is replaced with a message informing shoppers, that their correct size will be automatically recommended and pre-selected for products in the shop. Every product that a shopper opens after this will have a size recommendation available on the page.
All the customizations of the Fit Quiz widget (if any have been implemented previously) will be in place and saved for this non PDP integration.
Before you start with the integration
Adding Fit Quiz to standalone pages is available on our Pro and Premium plans. The integration requires some of the variables to be provided by our team, so please first reach out to us with the following details:
Your Shopify URL
URL of a page you want to add Fit Quiz to
Mockup or a description of where on a page Fit Quiz will be added
Our team will then provide attributes required for the integration and will be able to assist should you have any issues with the integration.
Integration steps
Copy the Fit Quiz snippet (see below) and add to the page, where you'd like Fit Quiz to load. Note: the snippet can only be added once per page.
Fill in the product details (see additional details below). For non PDP pages, you have to choose one product to act as placeholder.
You can now add
easysize-widgetto your element to act as the trigger to open the widget.If you have custom buttons, remove
<div class="easysize-widget">Size guide</div>from the snippet as you likely will not need it. You can have as many triggers on the page as you want. Note: that they are hidden on load by default, as we only show Easysize button after confirming our services are up and recommendations are available for the given product.
Fit Quiz snippet
Here's the snippet that shall be used for the integration. Please replace the relevant fields following the explanation below and attributes provided by our team.
<div class="easysize-widget">Size guide</div>
<script async type="text/javascript" src="https://webapp.easysize.me/web_app_v1.0/js/easysize.js"></script>
<div style="display:none"><div id="fakeholder"></div></div>
<script>
/*
Start filling in details below
*/
const shop_id = "your_shop_id";
const language = "english";
const product_stock = { S: 1, M: 1, L: 1 }
const product_brand = "";
const product_type = "";
const product_gender = "unisex";
const product_id = "1";
const sizing_model = "";
/*
End filling in details.
Do not modify the code below unless you know what you are doing!
*/
var easysize_attributes = {
"placeholder": "#fakeholder",
"size_selector": "#fakeholder",
"shop_id": shop_id,
"order_button_id": null,
"product_brand": product_brand,
"language": language,
"size_update_function": function() { return true },
"product_type": product_type,
"product_model": sizing_model,
"product_gender": product_gender,
"product_id": product_id,
"user_id": -1,
"loaded": function() {
// You can call any custom scripts here. This is triggered when easysize is loaded
},
"sizes_in_stock": product_stock,
};
window.addEventListener("easysize_ready", function() {
easy_size = new EasySize(easysize_attributes);
easy_size.start();
})
</script>
<style>
.easysize-widget { display: none; }
.es-loaded .easysize-widget { display: block; }
</style>
Explanation of the variables
shop_id – ❗️this value will be provided by our team
language – we default to this language if we cannot recognise a language in your HTML
langtagproduct_stock – this represents product stock information. Should be hardcoded to your desired product details. key:value is size:stock
product_brand – ❗️this value will be provided by Easysize. In most cases it is your Shopify domain identificator. For example, for a shop with https://admin.shopify.com/store/my-shopify-store as their Shopify domain this instance would be "my-shopify-store"
product_type – a valid clothing category
product_gender – product gender, shall be set as
male,femaleorunisexproduct_id – for non-PDP pages we recommend having an unique
product_idper implementationsizing_model – sizing model should be one of your configured sizing models.