Tùy chỉnh Variant picker trong Website Builder
Variant picker (lựa chọn biến thể) trên cửa hàng thương mại điện tử đóng vai trò quan trọng trong việc nâng cao trải nghiệm mua sắm của khách hàng bằng cách cho phép người mua xem và chọn các phiên bản khác nhau của sản phẩm một cách liền mạch, chẳng hạn như kích thước, màu sắc, chất liệu hoặc các thuộc tính khác.
Bài viết này sẽ hướng dẫn bạn cách tùy chỉnh Variant Picker trong Website Builder.
A. Thêm Variant picker
B. Chỉnh sửa nội dung cho Variant picker
C. Chỉnh sửa thiết kế cho Variant picker
Trên trang quản trị, đi tới Online Store > Design > Customize.
Nhấp vào dấu + (Insert) > Nhập từ khóa Variant picker > Kéo khối Variant picker đến vị trí bạn muốn hiển thị trên trang.
Chọn khối Variant picker > tab Content.
Data Source: Theo mặc định, nguồn dữ liệu (Data source) của Variant Picker sẽ là nguồn dữ liệu của vùng chứa. Sau khi bạn thay đổi nguồn dữ liệu 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 của vùng chứa sẽ được cập nhật lại giống như của Variant Picker.
Chọn khối Variant picker > tab Design
Variant type: 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).
Option layout: Lựa chọn phong cách hiển thị của các biến thể trên trang sản phẩm. Có ba lựa chọn gồm:
Text only: Biến thể hiển thị dạng văn bản (tên biến thể).
Enable slider: Bật hiển thị dạng thanh trượt để điều hướng thuận tiện hơn.
Slider arrow: Thêm mũi tên để điều hướng thanh trượt nếu tùy chọn Enable slider đang hoạt động.
Text & thumbnail: Thiết lập biến thể hiển thị bằng hình ảnh kèm văn bản.
Use actual color: Thiết lập các biến thể thuộc tùy chọn màu sắc hiển thị bằng ô màu.
Biến thể chỉ hiển thị dưới dạng ô màu khi tên tùy chọn chứa 1 trong 4 từ : Color, Colors, Colour hoặc Colours, và tên biến thể nằm trong danh sách màu được ShopBase hỗ trợ.
Enable slider: Bật hiển thị dạng thanh trượt để điều hướng thuận tiện hơn, lựa chọn bật thanh trượt ở tùy chọn chứa hình ảnh (Images) và/hoặc tùy chọn chứa màu sắc (Colors, và/hoặc tùy chọn chứa văn bản (Text) .
Slider arrow: HIển thị mũi tên điều hướng nếu thanh trượt được bật (Enable slider).
Thumbnail only: Thiết lập biến thể hiển thị dưới dạng hình ảnh.
Use actual color: Thiết lập các biến thể thuộc tùy chọn màu sắc hiển thị bằng ô màu.
Biến thể chỉ hiển thị dưới dạng ô màu khi tên tùy chọn chứa 1 trong 4 từ : Color, Colors, Colour hoặc Colours, và tên biến thể nằm trong danh sách màu được ShopBase hỗ trợ.
Image ratio: Cài đặt tỷ lệ hình ảnh thành Square (1:1), Portrait (3:4), or Landscape (16:9) tùy theo mong muốn của bạn.
Enable slider: Bật hiển thị dạng thanh trượt để điều hướng thuận tiện hơn, lựa chọn bật thanh trượt ở tùy chọn chứa hình ảnh (Images) và/hoặc tùy chọn chứa màu sắc (Colors, và/hoặc tùy chọn chứa văn bản (Text) .
Slider arrow: Hiển thị mũi tên điều hướng thanh trượt.
Show option in: Để nâng cao trải nghiệm người dùng, đặc biệt đối với các sản phẩm có nhiều tùy chọn biến thể, bạn nên thiết lập giới hạn hiển thị theo dòng. Lựa chọn này sẽ được áp dụng khi bạn không bật thanh trượt (Enable Slider). Có sẵn sáu cấu hình hiển thị: 1 row, 2 rows, 3 rows, 4 rows, 5 rows, Show all.
Shape: Tùy chỉnh hình dạng của các biến thể thành Rectangle (hình chữ nhật), Rounded (hình tròn), hoặc Pill (hình viên thuốc).
Label color: Tùy chỉnh màu của tên biến thể.
Biến thể chỉ hiển thị dưới dạng hình ảnh (image thumbnail) khi tất cả biến thể đều có ảnh và hình ảnh biến thể không trùng lặp giữa các nhóm biến thể. Bên cạnh đó, chỉ các biến thể thuộc nhóm chỉ định mới có thể hiển thị dạng hình ảnh. Để thiết lập nhóm biến thể, vui lòng tham khảo tại bài viết này.
Bạn có thể 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ắt đầu với Website Builder
Khởi tạo trang web bằng Website Builder
Hiểu về thiết lập giao diện trên Website Builder
Bài viết này sẽ hướng dẫn bạn cách tùy chỉnh Variant Picker trong Website Builder.
Trong bài viết này
A. Thêm Variant picker
B. Chỉnh sửa nội dung cho Variant picker
C. Chỉnh sửa thiết kế cho Variant picker
A. Thêm Variant picker
Trên trang quản trị, đi tới Online Store > Design > Customize.
Nhấp vào dấu + (Insert) > Nhập từ khóa Variant picker > Kéo khối Variant picker đến vị trí bạn muốn hiển thị trên trang.
B. Chỉnh sửa nội dung cho Variant picker
Chọn khối Variant picker > tab Content.
Data Source: Theo mặc định, nguồn dữ liệu (Data source) của Variant Picker sẽ là nguồn dữ liệu của vùng chứa. Sau khi bạn thay đổi nguồn dữ liệu 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 của vùng chứa sẽ được cập nhật lại giống như của Variant Picker.
C. Chỉnh sửa thiết kế cho Variant picker
Chọn khối Variant picker > tab Design
Mục Variant:
Variant type: 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).
Option layout: Lựa chọn phong cách hiển thị của các biến thể trên trang sản phẩm. Có ba lựa chọn gồm:
Text only: Biến thể hiển thị dạng văn bản (tên biến thể).
Enable slider: Bật hiển thị dạng thanh trượt để điều hướng thuận tiện hơn.
Slider arrow: Thêm mũi tên để điều hướng thanh trượt nếu tùy chọn Enable slider đang hoạt động.
Text & thumbnail: Thiết lập biến thể hiển thị bằng hình ảnh kèm văn bản.
Use actual color: Thiết lập các biến thể thuộc tùy chọn màu sắc hiển thị bằng ô màu.
Biến thể chỉ hiển thị dưới dạng ô màu khi tên tùy chọn chứa 1 trong 4 từ : Color, Colors, Colour hoặc Colours, và tên biến thể nằm trong danh sách màu được ShopBase hỗ trợ.
Enable slider: Bật hiển thị dạng thanh trượt để điều hướng thuận tiện hơn, lựa chọn bật thanh trượt ở tùy chọn chứa hình ảnh (Images) và/hoặc tùy chọn chứa màu sắc (Colors, và/hoặc tùy chọn chứa văn bản (Text) .
Slider arrow: HIển thị mũi tên điều hướng nếu thanh trượt được bật (Enable slider).
Thumbnail only: Thiết lập biến thể hiển thị dưới dạng hình ảnh.
Use actual color: Thiết lập các biến thể thuộc tùy chọn màu sắc hiển thị bằng ô màu.
Biến thể chỉ hiển thị dưới dạng ô màu khi tên tùy chọn chứa 1 trong 4 từ : Color, Colors, Colour hoặc Colours, và tên biến thể nằm trong danh sách màu được ShopBase hỗ trợ.
Image ratio: Cài đặt tỷ lệ hình ảnh thành Square (1:1), Portrait (3:4), or Landscape (16:9) tùy theo mong muốn của bạn.
Enable slider: Bật hiển thị dạng thanh trượt để điều hướng thuận tiện hơn, lựa chọn bật thanh trượt ở tùy chọn chứa hình ảnh (Images) và/hoặc tùy chọn chứa màu sắc (Colors, và/hoặc tùy chọn chứa văn bản (Text) .
Slider arrow: Hiển thị mũi tên điều hướng thanh trượt.
Show option in: Để nâng cao trải nghiệm người dùng, đặc biệt đối với các sản phẩm có nhiều tùy chọn biến thể, bạn nên thiết lập giới hạn hiển thị theo dòng. Lựa chọn này sẽ được áp dụng khi bạn không bật thanh trượt (Enable Slider). Có sẵn sáu cấu hình hiển thị: 1 row, 2 rows, 3 rows, 4 rows, 5 rows, Show all.
Shape: Tùy chỉnh hình dạng của các biến thể thành Rectangle (hình chữ nhật), Rounded (hình tròn), hoặc Pill (hình viên thuốc).
Label color: Tùy chỉnh màu của tên biến thể.
Biến thể chỉ hiển thị dưới dạng hình ảnh (image thumbnail) khi tất cả biến thể đều có ảnh và hình ảnh biến thể không trùng lặp giữa các nhóm biến thể. Bên cạnh đó, chỉ các biến thể thuộc nhóm chỉ định mới có thể hiển thị dạng hình ảnh. Để thiết lập nhóm biến thể, vui lòng tham khảo tại bài viết này.
Mục Common:
Bạn có thể 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
Bắt đầu với Website Builder
Khởi tạo trang web bằng Website Builder
Hiểu về thiết lập giao diện trên Website Builder
Cập nhật vào: 16/05/2024
Cảm ơn!