Easysize / Fit Quiz

PageFly is an app, that allows you to build custom landing pages for your Shopify store. While each PageFly setup is unique, here're the general tips on how to successfully add Fit Quiz to your PageFly-generated pages. 

<a href="https://help.pagefly.io/manual/html-liquid-element" rel="nofollow noopener noreferrer" target="_blank">Read PageFly's guideline on integrations</a>

Find a theme that you want to integrate Fit Quiz on and click on the <code>Customize theme</code> button

After that click on <code>Theme settings</code> and select <code>Easysize</code>

Change the <code>Placeholder selector</code>  and <code>Size selector</code> to <code>.single-option-selector</code>

- You can find this by inspecting the size selector element on the site

Change the <code>Order button id</code> to <code>.product-form__cart-submit</code> 

- Can also be found by inspecting the add to cart button

Change the size update function to the following:

- function(size) { var size_element = document.querySelector('option[value="'+ size +'"]'); console.log("Size element", size_element); if (size_element) { size_element.selected = true; var select = size_element.parentNode; select.dispatchEvent(new Event('change', { bubbles: true })); return true; } return false; }
- This change is required if you're using a dropdown. This finds the predicted size and triggers a change request on the option dropdown

Add Easysize liquid file by following instructions from PageFly and using the  <code>{% include 'easysize' %}</code> function

1. Find a theme that you want to integrate Fit Quiz on and click on the <code>Customize theme</code> button
2. After that click on <code>Theme settings</code> and select <code>Easysize</code>
3. Change the <code>Placeholder selector</code>  and <code>Size selector</code> to <code>.single-option-selector</code>
   - You can find this by inspecting the size selector element on the site
4. Change the <code>Order button id</code> to <code>.product-form__cart-submit</code> 
   - Can also be found by inspecting the add to cart button
5. Change the size update function to the following:
   - function(size) { var size_element = document.querySelector('option[value="'+ size +'"]'); console.log("Size element", size_element); if (size_element) { size_element.selected = true; var select = size_element.parentNode; select.dispatchEvent(new Event('change', { bubbles: true })); return true; } return false; }
   - This change is required if you're using a dropdown. This finds the predicted size and triggers a change request on the option dropdown
6. Add Easysize liquid file by following instructions from PageFly and using the  <code>{% include 'easysize' %}</code> function

If you have any questions or issues with this, <a href="mailto:support@easysize.me" rel="nofollow noopener noreferrer" target="_blank">please reach out to our support team</a>. 