Show options on storefront
There are two ways to show the options on the storefront:
Using the EasyFlow app block - recommended
Using the EasyFlow app embed - if adding app blocks to the product page is not supported (eg.: Shopify 1.0 themes, intagrate with page builders etc.)
To show the options on your storefront you need to add the "EasyFlow Product Options" app block to the product page in your theme editor.
Follow these steps to do it:
Open the theme editor
In the top middle navigate to the product page
On the left, click the "Add block" button and select the EasyFlow app block from the list
Move the app block to the place where you want the options to show
Save the changes
Troubleshoot issues when options don't show on the product page: Options do not show on the product page?
This method is recommended if you can't add the EasyFlow app block to the right place on the product page (eg.: Shopify 1.0 themes, you're using page builders etc.)
Follow these steps to show the options with the app embed:
Open the theme editor
On the top left click "App embeds" and enable the EasyFlow app embed
Save the changes
When you turn on the app embed we automatically try to recognize where to show the options on your product page. However, in some cases the app won't "find" where to put the options and in that case the options won't show on the product page.
If the options still don't show on the product page follow these steps to fix it:
The following steps require some coding knowledge, if you're unsure feel free to contact our support we're happy to do it for you.
Open the product page on the storefront where the options should show
Hover over the element (eg.: Quantity input box) above which you want to show the options
Right click on that element and from the dropdown click "Inspect"
Find the element in the storefront source code above which the options should show
Copy the name of the last class of the element (eg.: product-form__quantity)
6.On the "Customization & settings" page in the app add .product-form__quantity in the "CSS selector" field. Don't forget to include the . before the class name
In the "CSS selector" field you can provide any valid CSS selector, the app embed will be placed above that element.
Troubleshoot issues when options don't show on the product page: Options do not show on the product page?
Using the EasyFlow app block - recommended
Using the EasyFlow app embed - if adding app blocks to the product page is not supported (eg.: Shopify 1.0 themes, intagrate with page builders etc.)
Show options with the EasyFlow app block
To show the options on your storefront you need to add the "EasyFlow Product Options" app block to the product page in your theme editor.
Follow these steps to do it:
Open the theme editor
In the top middle navigate to the product page
On the left, click the "Add block" button and select the EasyFlow app block from the list
Move the app block to the place where you want the options to show
Save the changes
Troubleshoot issues when options don't show on the product page: Options do not show on the product page?
Show options with the EasyFlow app embed
This method is recommended if you can't add the EasyFlow app block to the right place on the product page (eg.: Shopify 1.0 themes, you're using page builders etc.)
Follow these steps to show the options with the app embed:
Open the theme editor
On the top left click "App embeds" and enable the EasyFlow app embed
Save the changes
When you turn on the app embed we automatically try to recognize where to show the options on your product page. However, in some cases the app won't "find" where to put the options and in that case the options won't show on the product page.
If the options still don't show on the product page follow these steps to fix it:
The following steps require some coding knowledge, if you're unsure feel free to contact our support we're happy to do it for you.
Open the product page on the storefront where the options should show
Hover over the element (eg.: Quantity input box) above which you want to show the options
Right click on that element and from the dropdown click "Inspect"
Find the element in the storefront source code above which the options should show
Copy the name of the last class of the element (eg.: product-form__quantity)
6.On the "Customization & settings" page in the app add .product-form__quantity in the "CSS selector" field. Don't forget to include the . before the class name
In the "CSS selector" field you can provide any valid CSS selector, the app embed will be placed above that element.
Troubleshoot issues when options don't show on the product page: Options do not show on the product page?
Updated on: 20/03/2024
Thank you!