Cách thiết kế trang Sản Phẩm trên store
Để chỉnh sửa trang Sản Phẩm trên store bằng teeinblue, hãy đến trang Store Settings > Product Page Settings. Thay đổi trên trang này chỉ được áp dụng cho 1 store mà bạn đang Log in. Nếu bạn muốn chỉnh sửa trang Sản phẩm cho các store khác, vui lòng ấn Switch Store
Chú ý: Một vài settings trên trang này sẽ chỉ hoạt động với Campaign by Product Base hoặc SDK v1.
Ở trang này, cột phía bên trái là các lựa chọn giúp bạn ẩn/hiện chức năng, sắp xếp lại các ô nội dung hoặc thiết kế lại trang sản phẩm. Cột bên phải hiển thị bản xem trước trực tiếp của trang sản phẩm, cho phép bạn hình dung những thay đổi theo thời gian thực.
Show Gallery & live preview: Bật chế độ xem trước trực tiếp của Teeinblue để hiển thị các tùy chỉnh theo thời gian thực. Khi setting này bị tắt, trang sản phẩm sẽ trở lại sử dụng thư viện gốc do Shopify của bạn cung cấp.
Load gallery immediately: hiển thị gallery trong mỗi lần load trang. Nếu tắt tính năng này, gallery sẽ chỉ hiển thị khi khách hàng bắt đầu lựa chọn các option trong form personalize.
Show only one Mockup image: chỉ hiển thị duy nhất một hình ảnh mockup dù bạn có setup nhiều mockup hơn trong campaign.
Zoom Gallery: cho phép khách hàng zoom vào ảnh chính trên gallery để nhìn chi tiết sản phẩm
Show navigation numbers on gallery: Hiển thị các số cho từng hình ảnh mockup, giúp khách hàng dễ dàng điều hướng hơn.
Show only the assigned images of the selected variant: Khi được bật, gallery sẽ chỉ hiển thị hình ảnh mockup được liên kết đến variant đã chọn, giúp khách hàng thấy được hình ảnh có liên quan nhất.
Display of Gallery's Thumbnails:
- Static (exclude real-time change): không cập nhật theo các lựa chọn của khách hàng
- Live preview (include real-time change): cập nhật theo các lựa chọn của khách, tuy nhiên sẽ khiến trang load chậm và có thể bị crash trên các thiết bị Iphone
- Hide thumbnails (only show the large image): ẩn hoàn toàn các ảnh thumbnails
Show Compare at Price: Hiện ẩn giá so sánh Compared price
Show "Save" badge: Hiển thị hoặc ẩn badge làm nổi bật giá tiết kiệm của khách hàng. Bạn có thể chọn hiển thị mức giảm giá dưới dạng phần trăm hoặc theo số tiền.
Position of Price: Chọn vị trí đặt Giá của sản phẩm. Bạn có thể chọn giữa 3 lựa chọn:
Show custom info below price: Hiện thị thông tin thêm dưới giá ví dụ bao gồm thuế. Bạn có thể điền thông tin này ở trang Product Page Content.
Hide option if there's only one value: Ẩn lựa chọn nếu chỉ có 1 giá trị: áp dụng cho lựa chọn về màu (Color) và kích thước (Size) nếu sản phẩm chỉ chứa 1 variant
Với Campaign by Shopify: Setting này chỉ áp dụng cho campaign by Shopify. Lựa chọn hiển thị form personalize theo một trong ba styles dưới đây:
Ảnh dưới đây là ví dụ của việc hiển thị form dưới dạng pop up :
Show options of the first template by default: luôn hiện các lựa chọn mặc định của template đầu tiên. Nếu bạn tắt tính năng này đi, các lựa chọn và form personalize sẽ chỉ hiển thị khi nào khách bắt đầu ấn chọn. Nếu bạn chỉ có 1 template, nó sẽ tự động hiển thị.
Nếu bạn muốn giữ Form personalize ngắn, hãy bật tính năng này.
Search in Dropdown list of clipart sub-category name: Cho phép khách hàng có thể tìm kiếm clipart sub-category theo tên
Search in Dropdown list of cliparts: Giống với bên trên. Lựa chọn này cho phép khách hàng có thể tìm kiếm 1 clipart cụ thể
Photo Reposition on Mockup Cho phép khách hàng thay đổi vị trí hình ảnh upload trực tiếp trên Mockup. Nếu tắt tính năng này, ảnh upload sẽ được thay đổi vị trí trên Artwork. Bạn có thể đọc thêm về tính năng này ở đây.
Sync customer's selection between same title options: Đồng bộ hóa lựa chọn của khách hàng giữa các Artwork template khi các lựa chọn có chung tiêu đề.
Ở ví dụ trên, nếu khách hàng đã chọn tóc đỏ cho cô gái và chó Golden Retriever ở template đầu tiên, khách hàng sẽ không cần chọn lại các lựa chọn này ở template thứ hai.
Auto-select the first clipart when switching to a sub-category: Khi khách hàng chuyển giữa các sub-category trong 1 nhóm category, clipart đầu tiên sẽ được chọn khi chuyển giữa các category, thay thế lựa chọn trước đó của khách hàng.
Ở ví dụ này, Khi khách hàng chọn chuyển sang category Long hair, clipart đầu tiên sẽ được chọn.
Show form header: Hiện thị một thẻ header bên trên bảng customization. Bạn có thể điền tên cho thẻ này ở trang Product Page Content.
Show "Preview" button: Lựa chọn hiện thị hay ẩn nút "Preview" trên trang sản phẩm
All mockups form gallery:** Tất cả các ảnh mockup sẽ hiện ra
Preview artwork only (Chỉ cho phép preview các artwork): Nếu chức năng này được bật, sản phẩm sẽ chỉ hiển thị artwork trong popup preview. Nếu bị tắt, sản phẩm sẽ hiển thị cả artwork và mockup như bình thường.
Show only the first mockup containing the correct printarea (Hiển thị ảnh mockup đầu tiên có chứa vùng in): Trong trường hợp bạn bán Canvas với nhiều Size, setting này sẽ giúp bạn chỉ muốn hiển thị 1 mockup đầu tiên tương ứng với size mà khách chọn.
Show Close text: (Hiển thị nút để khách đóng popup preview): bạn nên bật chức năng này vì nút "X" ở phía đầu popup sẽ bị cắt trong một số trường hợp và khách hàng không để ý
Block Preview if required fields are empty: Khách hàng cần phải hoàn thành tất cả các lựa chọn bắt buộc bao gồm cả ô xác nhận trước khi họ có xem preview
Show Quantity input: Hiện thị thanh số lượng trên trang sản phẩm. Lựa chọn này chỉ hoạt động với Campaigns sử dụng Product base.
Show "Confirmation checkbox": Khách hàng được yêu cầu phải chọn xác nhận trước khi thêm sản phẩm vào cart.
Show "Buy now" button: Chọn ẩn hay hiển thị nút Buy Now trên trang sản phẩm.
Show ATC/Buy now button on Preview popup: Hiển thị nút ATC/Buy Now trong popup khi ấn vào nút Preview
Action for "Add to cart" button to Show response message: Hiển thị thông báo "Add to cart" với 1 message
hoặc đi thẳng đến Cart page.
Notify "Shopify.onItemAdded" when new item added to cart (for developers): Bạn có thể bỏ qua setting này. Setting này được dùng cho các Developers để làm cho nút Add to cart của Teeinblue tương thích với Cart Drawer/Cart Counter
Bạn có thể tìm hiểu thêm về tính năng này ở đây.
Show "Personalize" button on mobile (Hiển thị nút "Personalize" trên điện thoại: nút "Personalize" sẽ hiển thị ở phía cuối của màn hình khi các lựa chọn personalize không còn hiện trên màn hình. Khách hàng ấn vào nút này sẽ được điều hướng xuống phía dưới đến các lựa chọn personalize.
Show gallery navigation button on mobile: Hiển thị các nút điều hướng ảnh sản phẩm trên điện thoại cho phép khách hàng có thể ấn để chuyển ảnh.
Show sticky buttons: Khách hàng cần cuộn xuống cuối form personalization để có thể thấy nút Preview và Add to cart
Show gallery’s thumbnails on mobile: Nếu bật setting này, ảnh thumbnail sẽ hiển thị trên mobile. Nếu bạn tắt, chỉ có mockup chính được hiển thị
Show product description by app: Hiện thị mô tả sản phẩm của Teeinblue thay cho mô tả sản phẩm từ Shopify. Mặc định, block mô tả sản phẩm của theme sẽ được ẩn. Setting này chỉ được áp dụng cho campaign by Product base.
Block inspecting clipart: Bật setting này để bảo vệ clipart của bạn khỏi các trình kiểm tra website.
Load scripts on all page outside of product page: Bật để tải hình ảnh tùy chỉnh vào Cart drawer và những nơi khác.
Ở phần này, bảng điều khiển bên trái cho phép bạn tùy chỉnh style trang sản phẩm, trong khi bên phải hiển thị bản xem trước trực tiếp để bạn có thể thấy những thay đổi theo thời gian thực.
Các thiết lập này được thiết kế đơn giản và dễ sử dụng. Hãy thoải mái khám phá và điều chỉnh chúng để tìm ra phong cách phù hợp nhất với cửa hàng của bạn.
Tùy chỉnh giao diện của phần variant, bao gồm các tùy chọn để định dạng màu sắc, đường viền và căn chỉnh sao cho phù hợp với thiết kế cửa hàng của bạn.
Tùy chỉnh giao diện của form cá nhân hóa, với các tùy chọn để điều chỉnh màu sắc, đường viền, căn chỉnh, số lượng clip nghệ thuật trên mỗi hàng, v.v. để phù hợp với thiết kế cửa hàng của bạn.
Trong phần này, bạn có thể tùy chỉnh chủ đề chung của Trang sản phẩm. Để giữ nguyên phong cách Teeinblue cổ điển, hãy chọn Classic. Để có giao diện mới mẻ, hiện đại, hãy chọn Modern. Nếu bạn đang sử dụng chủ đề Chế độ tối, hãy chọn Dark Mode.
Tùy chỉnh thay đổi của nút Add to cart (ATC), bao gồm lựa chọn thay đổi màu sắc, kiểu dáng, và hơn thế.
Thay đổi màu sắc của các thành phần mà bạn muốn để phù hợp với branding và thiết kế store của bạn.
Chú ý: Một vài settings trên trang này sẽ chỉ hoạt động với Campaign by Product Base hoặc SDK v1.
Elements & Behaviors tab: Tab Thành phần và Hành vi
Ở trang này, cột phía bên trái là các lựa chọn giúp bạn ẩn/hiện chức năng, sắp xếp lại các ô nội dung hoặc thiết kế lại trang sản phẩm. Cột bên phải hiển thị bản xem trước trực tiếp của trang sản phẩm, cho phép bạn hình dung những thay đổi theo thời gian thực.
Gallery & Mockup:
Show Gallery & live preview: Bật chế độ xem trước trực tiếp của Teeinblue để hiển thị các tùy chỉnh theo thời gian thực. Khi setting này bị tắt, trang sản phẩm sẽ trở lại sử dụng thư viện gốc do Shopify của bạn cung cấp.
Load gallery immediately: hiển thị gallery trong mỗi lần load trang. Nếu tắt tính năng này, gallery sẽ chỉ hiển thị khi khách hàng bắt đầu lựa chọn các option trong form personalize.
Show only one Mockup image: chỉ hiển thị duy nhất một hình ảnh mockup dù bạn có setup nhiều mockup hơn trong campaign.
Zoom Gallery: cho phép khách hàng zoom vào ảnh chính trên gallery để nhìn chi tiết sản phẩm
Show navigation numbers on gallery: Hiển thị các số cho từng hình ảnh mockup, giúp khách hàng dễ dàng điều hướng hơn.
Show only the assigned images of the selected variant: Khi được bật, gallery sẽ chỉ hiển thị hình ảnh mockup được liên kết đến variant đã chọn, giúp khách hàng thấy được hình ảnh có liên quan nhất.
Display of Gallery's Thumbnails:
- Static (exclude real-time change): không cập nhật theo các lựa chọn của khách hàng
- Live preview (include real-time change): cập nhật theo các lựa chọn của khách, tuy nhiên sẽ khiến trang load chậm và có thể bị crash trên các thiết bị Iphone
- Hide thumbnails (only show the large image): ẩn hoàn toàn các ảnh thumbnails
Price:
Show Compare at Price: Hiện ẩn giá so sánh Compared price
Show "Save" badge: Hiển thị hoặc ẩn badge làm nổi bật giá tiết kiệm của khách hàng. Bạn có thể chọn hiển thị mức giảm giá dưới dạng phần trăm hoặc theo số tiền.
Position of Price: Chọn vị trí đặt Giá của sản phẩm. Bạn có thể chọn giữa 3 lựa chọn:
Show custom info below price: Hiện thị thông tin thêm dưới giá ví dụ bao gồm thuế. Bạn có thể điền thông tin này ở trang Product Page Content.
Variant options
Hide option if there's only one value: Ẩn lựa chọn nếu chỉ có 1 giá trị: áp dụng cho lựa chọn về màu (Color) và kích thước (Size) nếu sản phẩm chỉ chứa 1 variant
Personalization Form
Với Campaign by Shopify: Setting này chỉ áp dụng cho campaign by Shopify. Lựa chọn hiển thị form personalize theo một trong ba styles dưới đây:
Ảnh dưới đây là ví dụ của việc hiển thị form dưới dạng pop up :
Show options of the first template by default: luôn hiện các lựa chọn mặc định của template đầu tiên. Nếu bạn tắt tính năng này đi, các lựa chọn và form personalize sẽ chỉ hiển thị khi nào khách bắt đầu ấn chọn. Nếu bạn chỉ có 1 template, nó sẽ tự động hiển thị.
Nếu bạn muốn giữ Form personalize ngắn, hãy bật tính năng này.
Search in Dropdown list of clipart sub-category name: Cho phép khách hàng có thể tìm kiếm clipart sub-category theo tên
Search in Dropdown list of cliparts: Giống với bên trên. Lựa chọn này cho phép khách hàng có thể tìm kiếm 1 clipart cụ thể
Photo Reposition on Mockup Cho phép khách hàng thay đổi vị trí hình ảnh upload trực tiếp trên Mockup. Nếu tắt tính năng này, ảnh upload sẽ được thay đổi vị trí trên Artwork. Bạn có thể đọc thêm về tính năng này ở đây.
Sync customer's selection between same title options: Đồng bộ hóa lựa chọn của khách hàng giữa các Artwork template khi các lựa chọn có chung tiêu đề.
Ở ví dụ trên, nếu khách hàng đã chọn tóc đỏ cho cô gái và chó Golden Retriever ở template đầu tiên, khách hàng sẽ không cần chọn lại các lựa chọn này ở template thứ hai.
Auto-select the first clipart when switching to a sub-category: Khi khách hàng chuyển giữa các sub-category trong 1 nhóm category, clipart đầu tiên sẽ được chọn khi chuyển giữa các category, thay thế lựa chọn trước đó của khách hàng.
Ở ví dụ này, Khi khách hàng chọn chuyển sang category Long hair, clipart đầu tiên sẽ được chọn.
Show form header: Hiện thị một thẻ header bên trên bảng customization. Bạn có thể điền tên cho thẻ này ở trang Product Page Content.
Preview button:
Show "Preview" button: Lựa chọn hiện thị hay ẩn nút "Preview" trên trang sản phẩm
All mockups form gallery:** Tất cả các ảnh mockup sẽ hiện ra
Preview artwork only (Chỉ cho phép preview các artwork): Nếu chức năng này được bật, sản phẩm sẽ chỉ hiển thị artwork trong popup preview. Nếu bị tắt, sản phẩm sẽ hiển thị cả artwork và mockup như bình thường.
Show only the first mockup containing the correct printarea (Hiển thị ảnh mockup đầu tiên có chứa vùng in): Trong trường hợp bạn bán Canvas với nhiều Size, setting này sẽ giúp bạn chỉ muốn hiển thị 1 mockup đầu tiên tương ứng với size mà khách chọn.
Show Close text: (Hiển thị nút để khách đóng popup preview): bạn nên bật chức năng này vì nút "X" ở phía đầu popup sẽ bị cắt trong một số trường hợp và khách hàng không để ý
Block Preview if required fields are empty: Khách hàng cần phải hoàn thành tất cả các lựa chọn bắt buộc bao gồm cả ô xác nhận trước khi họ có xem preview
ATC button:
Show Quantity input: Hiện thị thanh số lượng trên trang sản phẩm. Lựa chọn này chỉ hoạt động với Campaigns sử dụng Product base.
Show "Confirmation checkbox": Khách hàng được yêu cầu phải chọn xác nhận trước khi thêm sản phẩm vào cart.
Show "Buy now" button: Chọn ẩn hay hiển thị nút Buy Now trên trang sản phẩm.
Show ATC/Buy now button on Preview popup: Hiển thị nút ATC/Buy Now trong popup khi ấn vào nút Preview
Action for "Add to cart" button to Show response message: Hiển thị thông báo "Add to cart" với 1 message
hoặc đi thẳng đến Cart page.
Notify "Shopify.onItemAdded" when new item added to cart (for developers): Bạn có thể bỏ qua setting này. Setting này được dùng cho các Developers để làm cho nút Add to cart của Teeinblue tương thích với Cart Drawer/Cart Counter
Addon Charge:
Bạn có thể tìm hiểu thêm về tính năng này ở đây.
Mobile:
Show "Personalize" button on mobile (Hiển thị nút "Personalize" trên điện thoại: nút "Personalize" sẽ hiển thị ở phía cuối của màn hình khi các lựa chọn personalize không còn hiện trên màn hình. Khách hàng ấn vào nút này sẽ được điều hướng xuống phía dưới đến các lựa chọn personalize.
Show gallery navigation button on mobile: Hiển thị các nút điều hướng ảnh sản phẩm trên điện thoại cho phép khách hàng có thể ấn để chuyển ảnh.
Show sticky buttons: Khách hàng cần cuộn xuống cuối form personalization để có thể thấy nút Preview và Add to cart
Show gallery’s thumbnails on mobile: Nếu bật setting này, ảnh thumbnail sẽ hiển thị trên mobile. Nếu bạn tắt, chỉ có mockup chính được hiển thị
Extras:
Show product description by app: Hiện thị mô tả sản phẩm của Teeinblue thay cho mô tả sản phẩm từ Shopify. Mặc định, block mô tả sản phẩm của theme sẽ được ẩn. Setting này chỉ được áp dụng cho campaign by Product base.
Block inspecting clipart: Bật setting này để bảo vệ clipart của bạn khỏi các trình kiểm tra website.
Load scripts on all page outside of product page: Bật để tải hình ảnh tùy chỉnh vào Cart drawer và những nơi khác.
Styles & Colors
Ở phần này, bảng điều khiển bên trái cho phép bạn tùy chỉnh style trang sản phẩm, trong khi bên phải hiển thị bản xem trước trực tiếp để bạn có thể thấy những thay đổi theo thời gian thực.
Các thiết lập này được thiết kế đơn giản và dễ sử dụng. Hãy thoải mái khám phá và điều chỉnh chúng để tìm ra phong cách phù hợp nhất với cửa hàng của bạn.
Variant section
Tùy chỉnh giao diện của phần variant, bao gồm các tùy chọn để định dạng màu sắc, đường viền và căn chỉnh sao cho phù hợp với thiết kế cửa hàng của bạn.
Personalization form
Tùy chỉnh giao diện của form cá nhân hóa, với các tùy chọn để điều chỉnh màu sắc, đường viền, căn chỉnh, số lượng clip nghệ thuật trên mỗi hàng, v.v. để phù hợp với thiết kế cửa hàng của bạn.
Trong phần này, bạn có thể tùy chỉnh chủ đề chung của Trang sản phẩm. Để giữ nguyên phong cách Teeinblue cổ điển, hãy chọn Classic. Để có giao diện mới mẻ, hiện đại, hãy chọn Modern. Nếu bạn đang sử dụng chủ đề Chế độ tối, hãy chọn Dark Mode.
ATC Buttons
Tùy chỉnh thay đổi của nút Add to cart (ATC), bao gồm lựa chọn thay đổi màu sắc, kiểu dáng, và hơn thế.
Colors
Thay đổi màu sắc của các thành phần mà bạn muốn để phù hợp với branding và thiết kế store của bạn.
Cập nhật vào: 16/04/2025
Cảm ơn!