Hiển thị bộ lọc trên cửa hàng

Với ShopBase, bạn có thể tùy chỉnh bộ lọc hiển thị trên trang bộ sưu tập để khách hàng có thể dễ dàng tìm kiếm sản phẩm dựa theo tính khả dụng, giá cả, màu sắc, v.v... Trong bài viết này, chúng tôi sẽ hướng dẫn bạn cách hiển thị bộ lọc trên cửa hàng.

Nội dung bài viết

A. Cửa hàng sử dụng Website Builder

B. Cửa hàng sử dụng Theme Editor

Trước khi thao tác, bạn cần đảm bảo đã tạo bộ lọc theo hướng dẫn tại bài viết này.

Bộ lọc chỉ được hiển thị trong bộ sưu tập có ÍT HƠN 1.000 sản phẩm.

Bộ lọc sẽ KHÔNG hiển thị nếu các bộ sưu tập được sắp xếp theo Featured (hoặc Manual).

A. Cửa hàng sử dụng Website Builder

Hiển thị bộ lọc trên cửa hàng

Tại trang quản trị cửa hàng, truy cập Online Store > Design > Cusomize

Đi đến mục Pages > Collection detail.

Nhấp vào mục Product List. Tại tab Content, bật nút Show Filter.

Thay đổi bố cục của bộ lọc

Trong mục Product List, chuyển sang tab Design, tìm đến mục Filter > Position. Tại đây chọn 1 trong 3 bố cục có sẵn:

Top: Bộ lọc được hiển thị theo chiều ngang phía trên danh sách sản phẩm.

Left: Bộ lọc hiển thị bên trái sản phẩm.

In drawer: Bộ lọc được hiển thị sau khi khách hàng nhấp vào nút Filters.

Nhấn Save để lưu lại.

Hiển thị hình ảnh biến thể theo bộ lọc

Khi bộ lọc của bạn chứa các tùy chọn về màu sắc sản phẩm, nếu tất cả biến thể màu trong bộ lọc đều nằm trong danh sách các giá trị màu được hỗ trợ thì tại bộ lọc sẽ hiển thị dạng khối màu - color swatches (thay vì dạng chữ).

Nếu có từ 1 biến thể màu không nằm trong danh sách hỗ trợ, color swatches sẽ không được hiển thị trong bộ lọc.

"Pastel Green" không phải là giá trị màu được hỗ trợ, do đó, các tùy chọn bộ lọc sẽ được hiển thị dưới dạng chữ thay vì bảng màu

Bạn có thể bật hiển thị hình ảnh biến thể dựa trên điều kiện lọc của người dùng. Ví dụ: người dùng lọc các sản phẩm theo màu đen, hình ảnh sản phẩm sẽ lập tức chuyển thành màu đen.

Để cài đặt, trong Website Builder, đi đến Website Settings > Product Variant, bật tùy chọn Show image variations based on user's filter selections.

B. Cửa hàng sử dụng Theme Editor

Hiển thị bộ lọc trên cửa hàng

Tại trang quản trị cửa hàng, đi tới Online store > Themes > Customize

Nhấp vào menu thả xuống và chọn Collection.

Nhấp vào mục Collection.

Tích chọn Enable filtering để hiển thị bộ lọc trên các trang bộ sưu tập.

Trong mục Filter title, bạn có thể chỉnh sửa tiêu đề của bộ lọc. Tiêu đề mặc định là Filters.

Nhấp vào Save khi hoàn thành.

Thay đổi bố cục của bộ lọc

Trong mục Collection.

Tìm đến Filter position, chọn:

Left sidebar: Bộ lọc sẽ được hiển thị bên trái sản phẩm

In drawer: Bộ lọc được hiển thị sau khi khách hàng nhấp vào nút Filters.

On top: Bộ lọc được hiển thị theo chiều ngang phía trên danh sách sản phẩm.

Nhấp vào Save khi hoàn thành.

Bật Color Swatches trong bộ lọc

Khi bộ lọc của bạn chứa các tùy chọn về màu sắc (color), bạn có thể hiển thị dạng khối màu thay vì dạng chữ, giúp khách hàng dễ hình dung hơn về sản phẩm.

Trong mục Collection.

Tích chọn Enable color swatches in Color filters.

Tính năng này sẽ chỉ hoạt động nếu tên tùy chọn của sản phẩm trong bộ lọc bao gồm các chữ Color, Colors, Colour, hoặc Colours.

Đảm bảo rằng các giá trị của tất cả biến thể màu trong bộ lọc của bạn đều được hỗ trợ. Bạn có thể tham khảo danh sách các giá trị màu được hỗ trợ tại đây. Nếu biến thể màu bạn đang sử dụng không nằm trong dánh sách được hỗ trợ, bộ lọc sẽ không hiển thị khối màu.

"Auburn" không phải là giá trị màu được hỗ trợ, do đó, các tùy chọn bộ lọc sẽ được hiển thị dưới dạng chữ thay vì bảng màu

Tổng quan về sản phẩm

Tổng quan về bộ sưu tập

Tùy chỉnh bộ lọc tìm kiếm sản phẩm

Hiển thị bộ lọc trên cửa hàng

Nội dung bài viết

A. Cửa hàng sử dụng Website Builder

B. Cửa hàng sử dụng Theme Editor

Bài viết liên quan