Bài viết này cũng có sẵn trong:

Cách sử dụng Teeinblue với PageFly

Bài viết này sẽ hướng dẫn bạn cách tích hợp Teeinblue Product Personalizer với PageFly để tạo trải nghiệm mua sắm tối ưu cho khách hàng. Với các page builder khác như GemPages và EComposer, bạn cũng có thể thực hiện tương tự.

Hướng dẫn

Bước 1: Mở ứng dụng PageFly và mở trang sản phẩm

Bước 2: Thêm ID `teeinblue-gallery` vào Column chứa phần media của sản phẩm

Điều này cho phép Teeinblue hiển thị phần Preview thay cho phần media sản phẩm.

Preview của TIB sẽ không hiển thị trực tiếp ở phần này.

Bước 3: Thêm phần tử HTML/Liquid

Thêm một phần tử HTML/Liquid vào phần thông tin sản phẩm, tại vị trí bạn muốn hiển thị Customization Form.

Nhấn Open code editor, thêm đoạn code bên dưới, sau đó nhấn Done:
<div id="teeinblue-form"></div>

Bước 4: Thêm ID `teeinblue-atc-button` vào nút Add to cart

Điều này cho phép Teeinblue thêm các thuộc tính cần thiết vào sản phẩm khi sản phẩm được thêm vào giỏ hàng.

Bước 5: Lưu thay đổi và kiểm tra kết quả trên storefront

Vậy là xong! Hy vọng bài viết này giúp bạn sử dụng Teeinblue với PageFly và các page builder khác dễ dàng hơn. Vì các nền tảng có thể thay đổi theo thời gian, nếu bạn gặp bất kỳ vấn đề nào hoặc cần hỗ trợ, đừng ngần ngại liên hệ với đội ngũ Support qua Live Chat hoặc email 🤩

Cập nhật vào: 06/10/2026

Bài viết có hữu ích không?

Cảm ơn!