How to use options with page builder apps?

Getting started

Our app is now working with page builders apps (for example: Pagefly, Gempage, Ecomposer,...) So if you are building your product page using page builder apps, it is possible to show options from our app as well. This article will provide an introduction on how to show options with page builder apps to create an ideal shopping experience for your customers.

Instruction

In this example, we will work with Pagefly. For other page builder apps, the steps will be similar since they all have the HTML/Liquid elements.

Step 1: Open the PageFly app then open your product page

Step 2: In Product Template editing tab, click Add element and find the HTML/Liquid

Step 3: Drag and drop the HTML/Liquid element to the product detail section

Step 4: Click Open code editor then add the code below then click Save

<div id="tcustomizer-form-container-{{ product.id }}">

Step 5: Open "Product add to cart" settings > Attributes then add the HTML class below

tcustomizer-submit-button - this class is to make sure the Add to cart button will record the selected options and input datas from from our app.

Step 6: Save changes and check it on your store front.

That's it. Hopefully this article has helped you to use options with page builder app. Things change all the time, so if you run into any issues or need our help, please don't hesitate to share them with us at the in-app live chat. We're happy to lend a hand 🤩

Updated on: 21/02/2025

Was this article helpful?

Thank you!