Once the key settings for Fit Quiz are in place, you are now ready to start integrating Fit Quiz onto your existing live theme or a new copy of your theme.
If you're integrating Fit Quiz for the first time, you will be first redirected to the Billing page and asked to subscribe to one of the Fit Quiz plans. Your 14-day free trial will start the moment your subscription is activated.
Select a theme
We suggest creating a copy of your live theme or selecting a test theme for the initial integration of Fit Quiz. This allows for a risk-free and steady integration and testing to ensure Fit Quiz functions correctly.
Live theme
Your live theme will be visible in the "Current theme" block to indicate right away, whether Fit Quiz is currently added to the live theme or not.
Draft theme
You can also add Fit Quiz to any of your draft themes. Simply find a theme you want to integrate with in the dropdown and initiate the integration.
Resync themes
If a recently added theme doesn't appear in the dropdown, please click "Resync themes" (located in the right top corner) to refresh the themes.
Initiating the integration
After selecting a theme, you will be presented with additional details, such as when the theme was last saved, its name and status. You will also see an indication of whether Fit Quiz is integrated or not fully integrated with the theme.
You can initiate the integration by clicking the "Integrate Fit Quiz" button.
Updating the settings (after clicking "Integrate Fit Quiz") usually only takes a few moments. If it takes longer than a couple of minutes for any reason, try refreshing the page and starting over. If the problem continues, please contact us.
Shopify themes vary and adding Fit Quiz to a theme may require a few additional steps.
Adding Fit Quiz block
To complete the integration, you would need to add Fit Quiz as a block in your theme preview.
Click "Show me how" to see this in more detail and "Preview theme" to open the theme preview.
View a walk-through video or check each step below.
Theme preview
"Theme preview" allows you to preview how Fit Quiz will look on your website and adjust its position on your product page.
Start by navigating to product templates located in the top bar of the preview.
Click "Default product" and select "Products" to view all currently used product templates.
If you're using multiple product templates in your store, ensure you select each one individually, add Fit Quiz, and then save. Fit Quiz is added through product templates, so if you skip one, Fit Quiz won't appear on all products using this template.
When working in the preview, make sure that you select a product already configured on the "Mapping" screen with both a category and size model assigned. If not, Fit Quiz won't function and will complicate the integration process. Remember, Fit Quiz only works on fully configured products.
Not sure which products are configured? Check this article for more details
On the left side of the Preview screen, you'll find three icons: Sections, Theme Settings, and App Embeds. Click on "Sections". Here, you'll see all the currently used elements of your product page.
Sections and Blocks
On the "Sections" screen, navigate to "Template" and scroll down to "Add block". Select "Apps", then "Fit Quiz". This action will incorporate Fit Quiz functionality into your product page.
After adding, you can drag and drop the "Fit Quiz" block to your desired location on the page.
Check and update the placeholders
It's crucial for Fit Quiz to "understand" where size attributes are on your product page and be able to receive available sizes for each product. This is not only used to determine Fit Quiz's placement on a product page but also ensures accurate recommendations.
When dealing with simple themes (e.g. themes that don't use custom or advanced elements), Fit Quiz is able to automatically detect where exactly on a product it needs to be placed. But in some cases this might need to be updated manually.
To view and update these, please navigate to "Settings" in your theme preview (located in the top left corner). In the list, find "Easysize" and expand to view all the settings.
The majority of these settings are pre-filled and do not need to be updated. Here you need to check and potentially edit "Placeholder selector" and "Size selector".
Placeholder selector determines where exactly on the product page Fit Quiz shall be placed. Our suggestion is to place Fit Quiz next/close to the size selector
Size selector is used to identify where size attributes are on the product page
Here's a video showing how to update these selectors.
If done correctly, Fit Quiz will appear as a call-to-action button – in this case, "Find your size" – on the page.
Verify the integration
After completing the integration, we suggest that you check our Shopify integration checklist to make sure that everything is functioning as it should.
Advanced Integration and Developer docs
In some cases the integration may require some technical knowledge, hence we suggest having a technical member of your team handle it.
For example, if:
you're using a third-party app for size variants (e.g. to display size options on a page)
you're using custom behavior or third-party apps for "add-to-cart" or "buy" buttons
your theme is custom-built or heavily modified
In these instances, Fit Quiz might struggle to fully recognise each element on the product page, therefore your assistance will be necessary.
Advanced integration involves several steps:
adding Fit Quiz to a product template
activating the add-to-cart button
enabling preset sizes
Add Fit Quiz block
Similarly to the examples above, you need to add Fit Quiz as a block and update the "Size selector" and "Placeholder" fields.
Enable "add-to-cart" button
To allow shoppers to add a recommended size to cart directly from the widget, you need to set up the add-to-cart function.
By specifying your current "Add to cart" button ID, Fit Quiz can display this button along with size recommendations in the widget. Typically, this would lead to a 10-12% increase in the add-to-cart conversion.
To do this, go to Theme Settings, find "Easysize", locate the "Order button id" field, and paste the following snippet.
form[action*='/cart/add'] button[type='submit']
In rare cases, when the provided snippet doesn't work or if you're using a custom add-to-cart function, please reach out to us.
Enable preset sizes
In addition to activating the "add-to-cart" button, you can also enable preset sizes. This feature allows sizes to be pre-selected on a product page after a shopper has completed Fit Quiz and received a recommendation. Typically, this feature can lead to an additional 7-9% increase in add-to-cart conversion rates.
By adding a description of the JavaScript function to change the size selector's value, Fit Quiz will display the size recommendation whenever a customer opens any supported product. This eliminates the need for the customer to retake the survey.
To do this, go to Theme Settings, find "Easysize", locate the "Size update function" field, and paste the size preselection snippet. You can find more guidance on this in our developer docs here.
Example:
function(size) {
...
}
What if Fit Quiz doesn't show up?
For Fit Quiz to appear on a product, that product has to be categorized, assigned to a model, and have that model calibrated. If you can tick all these boxes and you are still not seeing our button, please check this article or reach out to us.
→What's next?
Congrats! Fit Quiz is now launched on your website. You can view all the key performance metrics on the Fit Quiz Shopify dashboard at any time.
If you need further assistance with the technical aspects, design customizations, or figuring out how to best configure it, reach out to our support team. We're here to help and will take care of this free of charge.