Fit Quiz for Shopify: Integration

Learn more how to integrate Fit Quiz into your store, as a final step in the onboarding

Updated over a week ago

Once you've set the categories, size models, genders, and mapping, 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.

You can choose from the themes available in your store in the dropdown menu: the live theme is marked with a [Live] note, while all other themes are designated as [Test].

If a recently added theme doesn't appear in the dropdown, please refresh the page to reset the dropdown.

Choose between Simple and Advanced integration

We now provide two integration options for shops: Simple and Advanced integration.

Simple integration fits themes built using standard Shopify practices with minimal or no customization. This refers to technical customizations that alter the functionality of standard product page attributes like the add-to-cart button, size variants, etc.

If your theme is custom-built, uses third-party apps for size variant selection, or has a custom add-to-cart button, please choose Advanced integration. This integration requires more technical knowledge and should ideally be implemented by someone with technical expertise on your team.

Simple Integration

As stated earlier, Simple Integration is ideal for standard themes, enabling you to add the Fit Quiz to your theme quickly.

View a walk-through video or check each step below.

After choosing a theme from the dropdown, click the "Integrate Fit Quiz" button to start the process.

Updating the settings 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.

After updating the settings, click the "Preview" button to see how the Fit Quiz will look on your theme preview.

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.

Add "Fit Quiz" block

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.

If done correctly, Fit Quiz will appear as a call-to-action button – in this case, "Find your size" – on the page.

Advanced Integration

Advanced integration requires some technical knowledge, hence we suggest having a technical member of your team handle it.

Consider using Advanced integration in the following scenarios:

  • 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

Similar to the Simple Integration, begin by selecting either a live or a test theme from the dropdown menu.

You can fill in the "Placeholder" field or leave it blank if you're uncertain. Note: this is only available for Liquid themes.

Once redirected to the Theme preview, 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.

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

If done correctly, Fit Quiz will appear as a call-to-action button – in this case, "Find your size" – on the page.

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.

Did this answer your question?