Cách sử dụng Variant Picker ở Website Builder
Bài viết này sẽ hướng dẫn bạn cách tùy chỉnh thiết kế của Variant Picker trong Website Builder.
A. Thêm biến thể sản phẩm
B. Tùy chỉnh Variant Picker trong Website Builder
Trong trang quản trị, đi tới Products > All products và nhấp vào sản phẩm mà bạn muốn thêm biến thể sản phẩm.
Hướng dẫn thêm biến thể mới sản phẩm: Vui lòng truy cập bài viết để tìm hiểu thêm.
Tab Content
1.1 Trong tab Content của Section: Chọn Data source là Product để bạn có thể tùy chỉnh Variant Picker.
1.2. Trong tab Content của Variant Picker: Chọn tab Variant Picker > Content. Theo mặc định, nguồn dữ liệu (Data source) của Variant Picker sẽ là nguồn dữ liệu (Data source) của vùng chứa. Sau khi bạn thay đổi nguồn dữ liệu (Data source) của Variant Picker thành sản phẩm khác khác với sản phẩm của vùng chứa, nguồn dữ liệu (Data source) của vùng chứa sẽ được cập nhật lại giống như của Variant Picker.
Tab Design: Tab này có 2 phần: Variant và Common.
2.1. Variant
Label color: Bạn có thể tùy chỉnh màu của tên biến thể.
Layout: Bạn có thể chọn Button (Các biến thể được hiển thị dưới dạng nút) hoặc Dropdown (Các biến thể được hiển thị dưới dạng danh sách thả xuống).
Color preview: Bạn có thể hiển thị các biến thể màu thay vì văn bản. Có 3 tùy chọn: None, Color only hoặc Color & Text. Nếu bạn chọn Color only hoặc Color & Text thì tên biến thể phải là 1 trong 4 từ sau: Color, Colors, Colour or Colours.
Image preview: Bạn có thể hiển thị các biến thể dưới dạng hình ảnh thay vì văn bản. Có 3 tùy chọn: None, Image only hoặc Image & Text.
Nếu biến thể tùy chọn có cả mẫu ảnh và mẫu màu thì hệ thống sẽ ưu tiên hiển thị theo mẫu màu. Ví dụ: Nếu bạn chọn Color only / Color & text (ở Color preview) và Image only / Image & text (ở Image preview), hệ thống sẽ ưu tiên Color only hoặc Color & text.
Shape : Bạn có thể tùy chỉnh hình dạng của các biến thể (Hình chữ nhật, Hình tròn hoặc Hình viên thuốc).
2.2. Commons*
Bạn có thể tùy chỉnh các cài đặt chung khác. Vui lòng truy cập bài viết này để tìm hiểu thêm về cách tùy chỉnh các cài đặt chung.
Khởi tạo trang web bằng Website Builder
Tùy chỉnh trang chi tiết sản phẩm
Trong bài viết này
A. Thêm biến thể sản phẩm
B. Tùy chỉnh Variant Picker trong Website Builder
A. Thêm biến thể sản phẩm
Trong trang quản trị, đi tới Products > All products và nhấp vào sản phẩm mà bạn muốn thêm biến thể sản phẩm.
Hướng dẫn thêm biến thể mới sản phẩm: Vui lòng truy cập bài viết để tìm hiểu thêm.
B. Tùy chỉnh Variant Picker trong Website Builder
Tab Content
1.1 Trong tab Content của Section: Chọn Data source là Product để bạn có thể tùy chỉnh Variant Picker.
1.2. Trong tab Content của Variant Picker: Chọn tab Variant Picker > Content. Theo mặc định, nguồn dữ liệu (Data source) của Variant Picker sẽ là nguồn dữ liệu (Data source) của vùng chứa. Sau khi bạn thay đổi nguồn dữ liệu (Data source) của Variant Picker thành sản phẩm khác khác với sản phẩm của vùng chứa, nguồn dữ liệu (Data source) của vùng chứa sẽ được cập nhật lại giống như của Variant Picker.
Tab Design: Tab này có 2 phần: Variant và Common.
2.1. Variant
Label color: Bạn có thể tùy chỉnh màu của tên biến thể.
Layout: Bạn có thể chọn Button (Các biến thể được hiển thị dưới dạng nút) hoặc Dropdown (Các biến thể được hiển thị dưới dạng danh sách thả xuống).
Color preview: Bạn có thể hiển thị các biến thể màu thay vì văn bản. Có 3 tùy chọn: None, Color only hoặc Color & Text. Nếu bạn chọn Color only hoặc Color & Text thì tên biến thể phải là 1 trong 4 từ sau: Color, Colors, Colour or Colours.
Image preview: Bạn có thể hiển thị các biến thể dưới dạng hình ảnh thay vì văn bản. Có 3 tùy chọn: None, Image only hoặc Image & Text.
Nếu biến thể tùy chọn có cả mẫu ảnh và mẫu màu thì hệ thống sẽ ưu tiên hiển thị theo mẫu màu. Ví dụ: Nếu bạn chọn Color only / Color & text (ở Color preview) và Image only / Image & text (ở Image preview), hệ thống sẽ ưu tiên Color only hoặc Color & text.
Shape : Bạn có thể tùy chỉnh hình dạng của các biến thể (Hình chữ nhật, Hình tròn hoặc Hình viên thuốc).
2.2. Commons*
Bạn có thể tùy chỉnh các cài đặt chung khác. Vui lòng truy cập bài viết này để tìm hiểu thêm về cách tùy chỉnh các cài đặt chung.
Bài viết liên quan
Khởi tạo trang web bằng Website Builder
Tùy chỉnh trang chi tiết sản phẩm
Cập nhật vào: 04/11/2023
Cảm ơn!