Easify Product Options allows you to add a wide range of custom fields to your products, such as color swatches, text inputs, and file uploads. If you are building your store using PageFly Landing Page Builder, you can easily place these custom options anywhere within your professional Shopify layouts to create a more interactive shopping experience.
Using both apps together allows you to maintain the creative design of your PageFly pages while providing the functional product choices offered by Easify. In the following steps, we will show you how to display your product options within your PageFly layouts for a polished and user-friendly result. Let’s get started!
Requirements #
Before you get started, make sure you have both the Easify Product Options and PageFly Landing Page Builder apps installed and active on your Shopify store.
You should have your option sets already configured in Easify Product Options and your custom page designs ready in PageFly. Once these are set up individually, you can follow this guide to quickly embed the Easify options widget into your PageFly product templates.
How to add Easify Product Options to PageFly Templates #
Step 1: Create Product Page Template in PageFly #
First, you need to have a product page template ready within the PageFly editor. You can start from scratch or use one of PageFly’s templates to build a layout that fits your brand. If you need assistance with the page-building process, you can refer to the PageFly guide here.
Once your design is in place, you are ready to add the section for your product options.
Tip: You can choose to place the Easify element in your layout first and then set up your actual options in the Easify app later, or you can have your options fully configured beforehand.
Step 2: Adding Easify Product Options to the Template #
To display your options, you will need to insert a small piece of code into your PageFly layout using the HTML/Liquid element.
From the left sidebar of the PageFly editor, click on the Elements tab. Scroll down, find the HTML/Liquid element, and drag it to the exact spot on your page where you want the options to appear.
Once the element is placed, a code editor box will open. Simply copy and paste the following snippet into that box:
<div class="easify-product-options"></div>
Step 3: Final Check #
The most important final check is to confirm that your layout includes a functional Add to Cart button. For the Easify options to appear and function correctly on your page, an Add to Cart element must be present in the design.
If you are using a PageFly template that lacks this button, or if it has been removed, your custom options will not load. Please make sure to drag an Add to Cart element into your layout. This is typically positioned right below your custom options to ensure everything displays and works perfectly.
Once you have confirmed the button is in place, click Save and Publish to see your live results.
Important Notes #
- PageFly creates a new template that runs alongside your Shopify theme. To ensure your options display correctly on the PageFly layout, you must go into your Shopify Theme Editor and hide the default product sections or elements.
- Use the PageFly editor to adjust your page layout. To manage or change the actual product options and rules, use the Easify Product Options app.
- If you use different templates for different products, you will need to add the code snippet to each one individually.
Need Assistance? #
If you run into any challenges while following this guide, please feel free to reach out to us for assistance through our convenient in-app live chat.
Our dedicated support team is available 24/7 to help you troubleshoot any issues or answer any questions you may have. We want to ensure your setup process is as smooth as possible, so please do not hesitate to contact us at any time.
