This article is also available in:

How to use Teeinblue with PageFly

This article provides an introduction to integrating Teeinblue Product Personalizer with PageFly to create an ideal shopping experience for your customers. With other page builders, such as GemPages and EComposer, you can perform similar operations.

Instruction

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

Step 2: Add the id `teeinblue-gallery` to the column containing the product media

This allows Teeinblue to display a preview in place of the product media.

The TIB preview will not be displayed in the PageFly app.

Step 3: Add HTML/Liquid element

Add an HTML/Liquid element to the product details section where you want the customization form to be displayed.

Click Open code editor, add the code below, then click Done:
<div id="teeinblue-form"></div>

Step 4: Add the id `teeinblue-atc-button` to the Add to cart button.

This allows Teeinblue to add the necessary attributes to the product when it is added to the cart.

Step 5: Save changes and check the result on your storefront

That's it! We hope this article helps you use Teeinblue with PageFly and other page builders. Things change all the time, so if you run into any issues or need our help, please don't hesitate to reach out to us via Live Chat or email. We're happy to lend a hand 🤩

Updated on: 06/10/2026

Was this article helpful?

Thank you!