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.
Ở 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 hoặc thiết kế lại trang sản phẩm. Trong khi đó phía cột bên phải cho phép bạn thay đổi màu sắc của các tiêu đề và nút trên trang Sản phẩm.
Các thay đổi ở trang này sẽ hiển thị sau 1-4 giờ.
Disable Gallery & live preview: Ẩn chức năng live preview: sử dụng hình ảnh sản phẩm từ Shopify. Nếu chức năng này được bật, khách hàng sẽ không được nhìn thấy trực tiếp các thay đổi và phần hình ảnh sản phẩm cũng sẽ không giữ nguyên vị trí (sticky) khi khách hàng kéo xuống.
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.
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 xoay vòng
Chọn để ẩn giá (price), compared price hoặc saving price
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
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 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. Vabh cí rgể đich 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.
Hide Preview button: Ẩn nút Preview
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 để ý
Hide Quantity input (Ẩn nút số lượng sản phẩm khách chọn):
Show "Confirmation box" (Hiển thị ô xác nhận khi chọn sản phẩm): khách hàng sẽ cần phải đánh dấu vào ô này để cho sản phẩm vào giỏ hàng
Hide "Buy now" button: Ẩn nút mua hàng "Buy Now"
Show ATC/Buy now button on Preview popup: Hiển thị nút ATC/Buy Now trong popup Preview
Action for "Add to Cart" button (Chọn cách điều hướng sau khi khách hàng ấn "Add to cart"): Bạn có thể cho phép điều hướng đến trang Checkout luôn hoặc chỉ hiển thị tin nhắn báo đơn hàng đã được thêm thành công.
Notify "Shopify.onItemAdded" when new item added to cart (for developers): Bạn có thể bỏ qua setting này. Nó được sử dụng cho các Developers để làm cho nút ATC của teeinblue tương thích với Cart Drawer/Cart Counter của theme.
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.
Hide gallery navigation button on mobile (Ẩn các nút định vị ảnh sản phẩm trên điện thoại): khách hàng sẽ có thể trượt để xem ảnh.
Disable sticky buttons (Ẩn các nút cố định): khách hàng sẽ cần phải cuộn xuống cuối trang để nhìn thấy các nút Preview và Add to cart.
Hide product description by app (Ẩn phần mô tả sản phẩm của app teeinblue): ẩn phần mô tả sản phẩm từ trang Product Base của teeinblue. Thay vào đó, bạn có thể sử dụng phần mô tả sản phẩm của theme.
Block inspecting clipart: Tính năng này bảo vệ các clipart của bạn khỏi bị trộm cắp.
Load scripts on all page outside of product page: Bật tính năng này để hiển thị ảnh customization trong cart drawer và các nơi khác.
Chọn hiển thị màu của các nút trên trang sản phẩm với Color Picker.
Ở 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 hoặc thiết kế lại trang sản phẩm. Trong khi đó phía cột bên phải cho phép bạn thay đổi màu sắc của các tiêu đề và nút trên trang Sản phẩm.
Các thay đổi ở trang này sẽ hiển thị sau 1-4 giờ.
Cách hiện/ẩn chức năng
Gallery & Mockup:
Disable Gallery & live preview: Ẩn chức năng live preview: sử dụng hình ảnh sản phẩm từ Shopify. Nếu chức năng này được bật, khách hàng sẽ không được nhìn thấy trực tiếp các thay đổi và phần hình ảnh sản phẩm cũng sẽ không giữ nguyên vị trí (sticky) khi khách hàng kéo xuống.
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.
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 xoay vòng
Price:
Chọn để ẩn giá (price), compared price hoặc saving price
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:
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 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. Vabh cí rgể đich 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.
Preview button:
Hide Preview button: Ẩn nút Preview
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 để ý
ATC button:
Hide Quantity input (Ẩn nút số lượng sản phẩm khách chọn):
Show "Confirmation box" (Hiển thị ô xác nhận khi chọn sản phẩm): khách hàng sẽ cần phải đánh dấu vào ô này để cho sản phẩm vào giỏ hàng
Hide "Buy now" button: Ẩn nút mua hàng "Buy Now"
Show ATC/Buy now button on Preview popup: Hiển thị nút ATC/Buy Now trong popup Preview
Action for "Add to Cart" button (Chọn cách điều hướng sau khi khách hàng ấn "Add to cart"): Bạn có thể cho phép điều hướng đến trang Checkout luôn hoặc chỉ hiển thị tin nhắn báo đơn hàng đã được thêm thành công.
Notify "Shopify.onItemAdded" when new item added to cart (for developers): Bạn có thể bỏ qua setting này. Nó được sử dụng cho các Developers để làm cho nút ATC của teeinblue tương thích với Cart Drawer/Cart Counter của theme.
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.
Hide gallery navigation button on mobile (Ẩn các nút định vị ảnh sản phẩm trên điện thoại): khách hàng sẽ có thể trượt để xem ảnh.
Disable sticky buttons (Ẩn các nút cố định): khách hàng sẽ cần phải cuộn xuống cuối trang để nhìn thấy các nút Preview và Add to cart.
Extras:
Hide product description by app (Ẩn phần mô tả sản phẩm của app teeinblue): ẩn phần mô tả sản phẩm từ trang Product Base của teeinblue. Thay vào đó, bạn có thể sử dụng phần mô tả sản phẩm của theme.
Block inspecting clipart: Tính năng này bảo vệ các clipart của bạn khỏi bị trộm cắp.
Load scripts on all page outside of product page: Bật tính năng này để hiển thị ảnh customization trong cart drawer và các nơi khác.
Color
Chọn hiển thị màu của các nút trên trang sản phẩm với Color Picker.
Cập nhật vào: 15/08/2024
Cảm ơn!