Adding Fit Quiz to a standalone size / fit guide page can help to improve the overall sizing experience on a website and give an end-to-end guidance to shoppers. Implementing this has just gotten a lot easier – so follow the guide below and, as always, reach out to us, if you have any questions or issues along the way.
Note: although we try to make this as simple as possible, the implementation still requires some technical knowledge (HTML/CSS/Javascript) in order to further customize to your needs.
What to expect from the UI/UX
When implemented on a size guide page (or any other non-PDP page), Fit Quiz's UX will differ slightly from the standard UX on a product (PDP) page.
on the product (PDP) page, at the end of the interaction Fit Quiz recommends a size for a given product – for example, size Medium. The recommendation is typically accompanied by an "Add to cart" button
on the size guide (non-PDP) page, Fit Quiz's main goal is to get initial details about shopper's preference for a specific product category. It means, that instead of recommending the size, at the end of the interaction, Fit Quiz would have collected shopper's preferences that are later used for recommendations. Therefore the final screen won't have a size recommendation but instead would simply inform the shopper, that the correct size will be automatically recommended and pre-selected for products they open afterwards
Here's a an example of how Fit Quiz could look like when added to the size guide page:
Step 1. Choose products
The first step is to chose products that you want to showcase on your size guide page. Typically, Fit Quiz recommends a size for a specific product. It means, that when added to a size guide page, it requires a reference product for each category.
We recommend using one item per category, even if you have multiple different size models within them.
Open the Fit Quiz app on Shopify and go to the "Mapping" tab. Here, you shall find chosen products in the table and make a note which Fit Quiz Category and Fit Quiz Size Model are assigned to the products.
Step 2. Prepare attributes
You will need to add the following configuration to a snippet (see at the end of the article):
shop_id – this is your shop's unique ID that enables Fit Quiz to load on your website. Please reach out to us to get yours
product_brand – typically this is derived from your Shopify domain name, without the .myshopify.com part. In the examples below, the product_brand would be
easysize-demo:https://admin.shopify.com/store/easysize-demo/ – updated Shopify domains
https://easysize-demo.myshopify.com/admin/ – old Shopify domains
products – a list of products (objects) you want to showcase in your page
In addition, every product object requires the following attributes:
id – this has to be unique for every product in the list. Simply increment them by 1
category – this is a Fit Quiz Category (from the "Mapping" tab) assigned to the selected product
model – this is your Fit Quiz Size Model (from the "Mapping" tab) assigned to the selected product
gender – choose between male/female/unisex for the gender of the product
sizes_in_stock - You have to fill this yourself. Simply list all the available variants you are selling on your category and mark the stock as 1 for all of them, in the following format
{ sizeA: stock, sizeB: stock, ..}
Putting everything together it will likely look like this:
let shop_id = '<shop_id>';
let product_brand = '<your_easysize_brand>';
let products = [
{
id: 1,
category: 'Dresses',
model: 'True to size',
gender: 'female',
sizes_in_stock: { 'S': 1, 'M':1, 'L': 1 },
},
...
];
Step 3. Add the snippet
For the final version of the snippet we made also included some additions like:
icons to go with the categories for a nicer UI
our "Size Insights" feature available to our Premium customers to improve the UX even further
P.s. If you are having trouble reading the below snippet, you can have a better overview here.
<div class='wrapper'>
<div class='categories'></div>
<div class='easysize-embed'></div>
<div style="display: none"><div class="fakeholder"></div></div>
</div>
<script async type="text/javascript" src="https://webapp.easysize.me/web_app_v1.0/js/easysize.js"></script>
<script type="text/javascript" async>
// --- Fill in these details:
let shop_id = '<shop_id>';
let product_brand = '<your_easysize_brand>';
let products = [
{
id: 1,
category: 'Dresses',
model: 'True to size',
gender: 'female',
sizes_in_stock: { 'S': 1, 'M':1, 'L': 1 },
icon: 'https://popup.easysize.me/static/icons/categories/regular/dresses-female.png',
},
{
id: 2,
category: 'Pants & Trousers',
model: 'True to size',
gender: 'female',
sizes_in_stock: { '30': 1, '31':1, '32': 1, '33': 1, '34': 1 },
icon: 'https://popup.easysize.me/static/icons/categories/regular/pants-%26-trousers-female.png',
}
];
// --- Fit Quiz init. Only change these if you know what you are doing!
let start_size_insights = () => {
if (window.EasysizeSizeInsights) {
let settings = Object.assign(
EasySizeParametersDebug.product.model_settings[EasySizeParametersDebug.product.gender],
{ texts: EasySizeParametersDebug.features.size_insights_texts }
)
// Scale settings
let scale_conf = {
placeholder: '.wrapper',
placeholder_type: 'before',
visual: "text"
}
window.EasysizeSizeInsights(Object.assign(settings, scale_conf));
}
}
let start_easysize = (product) => {
var easysize_attributes = {
"placeholder": '.fakeholder',
"size_selector": '.fakeholder',
"order_button_id": '.fakeholder',
"shop_id": shop_id,
"product_brand": product_brand,
"product_type": product['category'],
"product_model": product['model'],
"product_gender": product['gender'],
"product_id": product['id'],
"user_id": "-1",
"loaded": function() {
/*
This function call replaces the contents of all '.easysize-embed' elements with a widget
*/
window.easy_size.embed();
start_size_insights();
},
"sizes_in_stock": product['sizes_in_stock']
};
window.easy_size = new EasySize(easysize_attributes);
window.easy_size.start();
}
// HTML list generation based on the chosen products.
let categories_element = document.querySelector('.categories');
products.forEach((i) => {
let category = document.createElement('div');
category.innerHTML = `
<img src='${i['icon']}'></img>
<span>${i['category']}</span>
`;
category.className = 'category';
category.onclick = function() {
start_easysize(i);
document.querySelector('.category.active')?.classList.remove('active');
category.classList.add('active');
document.querySelector('.easysize-embed').innerHTML = '<div class="loader"> </div>';
document.querySelector('.size_insights').remove();
}
categories_element.appendChild(category);
});
// After we create the product list and Easysize has loaded, we simply 'click' the first element in order to render the widget on initial load
window.addEventListener("easysize_ready", function() {
document.querySelector('.category').click();
});
</script>
<style>
// Size insights styling
.wrapper {
display: flex;
}
.easysize-embed {
height: 500px;
max-width: 600px;
width: 100%;
margin: auto;
display: flex;
align-items: center;
}
.categories {
margin: 0 auto;
}
.category {
cursor: pointer;
max-width: 100px;
display: flex;
margin-bottom: 10px;
}
.category span {
width: 100px;
margin: auto;
}
.category img {
width: 100%;
}
.category.active {
text-decoration: underline;
}
@media only screen and (max-width: 800px) {
.wrapper {
flex-direction: column;
}
.easysize-embed {
height: 600px;
}
}
/* CSS Loader util. Can be removed if not needed */
.loader {
margin: auto;
width: 50px;
aspect-ratio: 1;
display: grid;
border: 4px solid #0000;
border-radius: 50%;
border-right-color: #000;
animation: spin 1s infinite linear;
}
.loader::before,
.loader::after {
content: "";
grid-area: 1/1;
margin: 2px;
border: inherit;
border-radius: 50%;
animation: spin 2s infinite;
}
.loader::after {
margin: 8px;
animation-duration: 3s;
}
@keyframes spin{
100%{transform: rotate(1turn)}
}
</style>
This is a good starting point for your developers to take this and fully customise it to your needs.
As always, if you run into any issues or have any questions, please reach out to our support team.