Getting started

This article will provide an introduction on how to integrate Teeinblue Product Personalizer with PageFly apps to create an ideal shopping experience for your customers. With other page builder like Gempages, EComposer, etc., 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 is not 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 then 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 adding it to the cart.

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

That's it. Hopefully this article can help 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 share them with us at the in-app live chat. We're happy to lend a hand 🤩

Updated on: 09/08/2024