Để chỉnh sửa trang sản phẩm của Teeinblue, hãy vào Store Settings > Product Page Settings. Các thay đổi ở đây chỉ áp dụng cho store bạn đang đăng nhập. Nếu muốn chỉnh store khác, hãy dùng Switch Store trước.

Hãy đọc tiếp bài viết này để biết chức năng của từng setting.

📖 Mục lục

• Tab Elements & Behaviors
• Tab Styles & Colors

Tab Elements & Behaviors

Trong tab này, cột bên trái cho phép bạn bật hoặc tắt tính năng, sắp xếp lại các khối nội dung và cấu hình từng tính năng. Cột bên phải hiển thị bản xem trước trực tiếp (live preview) của trang sản phẩm, giúp bạn thấy ngay các thay đổi.

Gallery & Mockup

• Show Gallery & live preview: hiển thị live preview của Teeinblue để khách hàng thấy ngay nội dung cá nhân hóa của mình. Khi tắt, trang sản phẩm sẽ dùng gallery gốc của theme Shopify.

• Load gallery immediately: khi bật, gallery live preview của Teeinblue sẽ tải ngay mỗi lần khách vào trang. Khi tắt, gallery mặc định của theme sẽ hiện trước, và live preview chỉ xuất hiện khi khách hàng bắt đầu cá nhân hóa.
• Show only one Mockup image: chỉ hiển thị ảnh mockup đầu tiên trong gallery, kể cả khi sản phẩm có nhiều ảnh mockup.
• Zoom gallery: cho phép khách hàng phóng to ảnh chính trong gallery để xem rõ hơn. Bạn có thể chọn cách zoom:
• • Hover/pinch to zoom: khách hàng di chuột (desktop) hoặc dùng hai ngón tay (mobile) trên ảnh để phóng to.
  • Click to view a larger image in a popup: khách hàng click vào ảnh để mở ảnh lớn hơn trong popup.

• Show navigation numbers on gallery: hiển thị số thứ tự cho từng ảnh mockup trong gallery, giúp khách hàng chuyển ảnh dễ dàng hơn.

• Show only the assigned images of the selected variant: chỉ hiển thị các ảnh mockup được gán cho variant đang chọn.
• Display of Gallery's Thumbnails:
• • Static (exclude real-time change): thumbnail không cập nhật theo lựa chọn của khách hàng.
  • Live preview (include real-time change): thumbnail cập nhật giống gallery chính, nhưng làm trang tải chậm hơn.
  • Hide thumbnails (only show the large image): ẩn hoàn toàn thumbnail.

Price

• Show Compare at Price: hiển thị hoặc ẩn giá so sánh (compare-at price). Setting này chỉ hoạt động với Campaign tạo từ Product Base.

• Show "Save" badge: hiển thị hoặc ẩn nhãn cho biết khách hàng tiết kiệm được bao nhiêu. Bạn có thể hiển thị mức giảm theo phần trăm hoặc theo số tiền. Setting này chỉ hoạt động với Campaign tạo từ Product Base.

• Position of Price: chọn vị trí hiển thị khối giá. Có 3 lựa chọn:

• Show custom info below price: thêm thông tin bên dưới giá, ví dụ thông tin về thuế. Nhập nội dung trong Store Settings > Product Page Content.

Variant options

• Hide option if there's only one value: ẩn một variant option khi option đó chỉ có một giá trị.

Personalization Form

• Form type (for Campaign by Shopify): setting này chỉ áp dụng cho Campaign tạo từ Shopify. Chọn một trong ba kiểu hiển thị cho form cá nhân hóa.

Ảnh dưới đây là ví dụ một sản phẩm Teeinblue với kiểu popup:

• Show options of the first template by default: luôn hiển thị các option của template đầu tiên trên trang sản phẩm. Khi tắt, form sẽ không hiển thị option cá nhân hóa nào cho đến khi khách hàng chọn template. Nếu chỉ có một template, template đó sẽ được chọn tự động.

• Search in Dropdown list of clipart sub-category name: cho phép khách hàng tìm sub-category của Clipart theo tên.

• Search in Dropdown list of cliparts: cho phép khách hàng tìm một Clipart cụ thể.

• Sync customer's selection between same title options: đồng bộ lựa chọn của khách hàng giữa các Template và Artwork. Setting này áp dụng cho mọi option, trong mọi template, có cùng Option title và cùng kiểu Personalization.

Trong ví dụ trên, khách hàng đã chọn tóc đỏ cho bé gái và chó Golden Retriever ở template đầu tiên. Họ không cần chọn lại ở template thứ hai.

• Auto-select the first clipart when switching to a sub-category: khi khách hàng chuyển sang sub-category khác, Clipart đầu tiên của sub-category đó sẽ được chọn tự động và thay cho Clipart trước đó.

Trong ví dụ này, khi khách hàng chuyển sang category Long Hair, Clipart đầu tiên của category đó được chọn tự động.

• Show form header: hiển thị tiêu đề tùy chỉnh phía trên form cá nhân hóa. Nhập nội dung tiêu đề trong Store Settings > Product Page Content.

• Use Teeinblue's Date Picker instead of browser's: dùng date picker của Teeinblue thay cho date picker mặc định của trình duyệt. Date picker mặc định của trình duyệt hỗ trợ nhiều ngôn ngữ và định dạng ngày theo trình duyệt của khách hàng. Bạn chỉ nên chuyển sang date picker của Teeinblue trong một số ít trường hợp.
• Use Teeinblue's Time Picker instead of browser's: dùng time picker của Teeinblue thay cho time picker mặc định của trình duyệt. Time picker của Teeinblue hiển thị giống nhau trên mọi thiết bị và theo đúng style trang sản phẩm của bạn. Bạn có thể tìm hiểu thêm trong bài Về feature Clock Face.
• Enable Reposition on main gallery: cho phép khách hàng thay đổi vị trí các Layer được hỗ trợ ngay trên gallery chính, thay vì dùng nút Reposition. Setting này chỉ hoạt động trên desktop. Trên mobile, khách hàng vẫn dùng popup. Với text, việc thay đổi vị trí sẽ bắt đầu khi khách hàng nhập vào ô text. Bạn có thể tìm hiểu thêm trong bài Về tính năng Text Reposition.

• Auto-zoom to the text when focusing on text input: khi khách hàng click vào một ô text, bản xem trước sẽ phóng to vào phần text đó, giúp chữ nhỏ dễ đọc hơn khi đang nhập. Setting này trước đây nằm trong mục Gallery & Mockup.

• Enable Clear all for text options: hiển thị biểu tượng X trong các ô text, giúp khách hàng xóa toàn bộ nội dung đã nhập chỉ với một click, thay vì xóa từng ký tự. Setting này mặc định tắt.

Biểu tượng nằm ở phía bên phải ô text và chỉ xuất hiện khi ô đã có nội dung. Nếu bộ đếm ký tự đang bật, bộ đếm sẽ nằm bên trái biểu tượng X.

Upload photo

Mục này gom tất cả các setting dành cho Personalization Option Upload photo. Bạn có thể tìm hiểu thêm về tính năng này trong bài Upload Photo feature.

• Show re-upload photo button in photo popup: hiển thị nút Choose another image trong popup Photo Reposition và Photo Cropper, giúp khách hàng đổi ảnh mà không cần đóng popup trước.

• Photo Reposition on Mockup: cho phép khách hàng thay đổi vị trí ảnh đã upload ngay trên mockup. Khi tắt, việc thay đổi vị trí ảnh sẽ thực hiện trên Artwork. Setting này trước đây nằm trong mục Personalization Form.

• Allow buyers to choose previous processed images: cho phép khách hàng chọn lại ảnh đã upload và xử lý trước đó, thay vì phải upload lại. Ảnh đã upload và xử lý được lưu trong 72 giờ, nên khách hàng không bị mất ảnh khi tải lại trang hoặc chỉnh sửa sản phẩm sau khi đã thêm vào giỏ hàng. Các ảnh trước đó được hiển thị trong một danh sách cuộn ngang. Setting này mặc định bật và áp dụng cho mọi option Upload photo, không chỉ các option có hiệu ứng Gen AI. Setting này trước đây nằm trong mục Personalization Form.

• Auto-zoom to the uploaded photo: cho phép khách hàng phóng to ảnh đã upload trong popup để xem rõ hơn. Setting này hữu ích khi Artwork có kích thước lớn và ảnh trông quá nhỏ trong popup.

Preview button

• Show "Preview" button: hiển thị hoặc ẩn nút Preview trên trang sản phẩm. Bạn có thể chọn nội dung hiển thị khi preview:
• • All mockups form gallery: hiển thị tất cả ảnh mockup.
  • Preview only artwork: chỉ hiển thị Artwork trong popup preview. Khi tắt, popup sẽ hiển thị toàn bộ gallery kèm mockup.
  • Show only the first mockup containing the correct printarea: chỉ hiển thị mockup đầu tiên của variant kích thước đang chọn. Lựa chọn này hữu ích khi bạn bán sản phẩm có nhiều kích thước, ví dụ Canvas.
• Show Close text: hiển thị nút chữ Close trong popup preview. Bạn nên bật setting này, vì nút X ở phía trên có thể bị che mất trên một số màn hình.

• Block Preview if required fields are empty: khách hàng phải điền đầy đủ các trường bắt buộc, bao gồm cả ô xác nhận, trước khi có thể xem trước thiết kế.

ATC button

• Show Quantity input: hiển thị ô chọn số lượng trên trang sản phẩm. Setting này chỉ hoạt động với Campaign tạo từ Product Base.

• Show "Confirmation checkbox": khách hàng phải tick vào ô xác nhận trước khi có thể thêm sản phẩm vào giỏ hàng.

• Show "Buy now" button: hiển thị hoặc ẩn nút Buy now trên trang sản phẩm.

• Show ATC/Buy now button on Preview popup: hiển thị nút Add to cart và Buy now trong popup preview.

• Action for "Add to cart" button: chọn điều gì xảy ra sau khi khách hàng click Add to cart. Bạn có thể hiển thị thông báo phản hồi, hoặc chuyển thẳng khách hàng đến trang giỏ hàng.

• Notify "Shopify.onItemAdded" when new item added to cart (for developers): bạn có thể bỏ qua setting này. Developer dùng setting này để nút Add to cart của Teeinblue hoạt động với cart drawer hoặc bộ đếm giỏ hàng của theme.

Addon Charge

Bạn có thể tìm hiểu thêm về tính năng này trong bài Upsell your product design with Addon Charge.

• Show addon price warning message: hiển thị thông báo cho khách hàng biết về khoản phí bổ sung. Shopify yêu cầu bắt buộc phải có thông báo này, nên setting luôn bật. Để thay đổi, hãy liên hệ đội Support của Teeinblue.
• Show addon price on options: hiển thị giá Addon Charge bên cạnh các option dạng Dropdown, Inline Button, Checkbox và Radio.
• Add addon price to product price: cộng giá Addon Charge trực tiếp vào giá chính của sản phẩm trên trang sản phẩm. Setting này hoạt động với tất cả Shopify Markets.

Mobile

• Show "Personalize" button on mobile: hiển thị nút Personalize ở cuối màn hình khi khách hàng chưa cuộn tới form cá nhân hóa. Bấm vào nút sẽ cuộn xuống form.

• Show gallery navigation button on mobile: hiển thị nút mũi tên trên mobile, giúp khách hàng bấm để chuyển giữa các ảnh.

• Show sticky buttons: giữ nút Preview và Add to cart luôn hiển thị ở cuối màn hình. Khi tắt, khách hàng phải cuộn tới cuối form cá nhân hóa mới thấy các nút này.

• Show gallery's thumbnails on mobile: hiển thị thumbnail bên dưới ảnh chính trên mobile. Khi tắt, chỉ ảnh mockup chính được hiển thị.

Extras

• Show product description by app: hiển thị mô tả sản phẩm bằng khối mô tả của Teeinblue thay cho khối mô tả của theme. Mô tả của theme sẽ bị ẩn theo mặc định. Setting này chỉ áp dụng cho Campaign tạo từ Product Base.

• Block inspecting clipart: bảo vệ Clipart của bạn khỏi bị sao chép bằng công cụ inspect của trình duyệt.
• Load scripts on all page outside of product page: tải Teeinblue trên cả các trang ngoài trang sản phẩm, để ảnh cá nhân hóa hiển thị cả trong cart drawer và các vị trí khác.
• Enable skeleton loader: hiển thị khung tải (loading placeholder) trong lúc form Teeinblue đang tải, thay cho nội dung mặc định của theme. Để dùng tính năng này, hãy thêm block Teeinblue Product form vào section Product information của product template trong theme editor của Shopify.

Tab Styles & Colors

Trong tab này, cột bên trái cho phép bạn tùy chỉnh style của trang sản phẩm. Cột bên phải hiển thị live preview, giúp bạn thấy ngay các thay đổi.

Variant section

Tùy chỉnh khu vực variant, bao gồm màu sắc, viền và căn lề.

Personalization form

Tùy chỉnh form cá nhân hóa, bao gồm màu sắc, viền, căn lề, số Clipart trên mỗi hàng, và nhiều hơn nữa.

ATC Buttons

Tùy chỉnh khu vực nút Add to cart, bao gồm màu sắc, bố cục, và nhiều hơn nữa.

Colors

Tùy chỉnh màu sắc của các thành phần khác nhau cho phù hợp với thương hiệu của bạn.

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