Bộ Lọc Sản Phẩm & Mẫu Màu: Hướng Dẫn Toàn Diện

Tối đa hóa khả năng hiển thị sản phẩm và sự tương tác của khách hàng với ứng dụng Bộ lọc sản phẩm & Bảng màu. Ứng dụng này cung cấp ba chức năng chính: Bảng màu, Bộ lọc và Sắp xếp, giúp cải thiện đáng kể các trang sản phẩm của bạn.

Hãy theo dõi hướng dẫn toàn diện này để tìm hiểu về quy trình cài đặt và khám phá cách các tính năng này có thể nâng cao hiển thị sản phẩm và tăng tỷ lệ chuyển đổi cho cửa hàng của bạn.

Cài đặt ứng dụng

Dưới đây là cách cài đặt ứng dụng Bộ lọc sản phẩm & Bảng màu:

1. Từ bảng quản trị SHOPLINE của bạn, vào Ứng dụng > Đi đến cửa hàng ứng dụng.
   
2. Tìm kiếm Bộ lọc sản phẩm & Bảng màu và nhấn Cài đặt.
   
3. Tùy chọn, ghim ứng dụng vào phần Ứng dụng trong bảng quản trị để truy cập nhanh.
   

Cấu hình bảng màu

Bảng màu tự động khớp các mẫu màu dựa trên các thông số bạn nhập. Khi được kích hoạt, chúng thay thế văn bản đơn giản bằng các mẫu màu sống động trên trang chi tiết và danh sách sản phẩm, tạo trải nghiệm mua sắm hấp dẫn và trực quan.

Khớp màu cho thuộc tính biến thể

Bạn có thể tạo bảng màu cho các thuộc tính khác nhau. Hệ thống tự động liên kết các biến thể sản phẩm với các bảng màu cụ thể dựa trên loại thuộc tính và tùy chọn đã thiết lập. Thực hiện theo các bước sau:

1. Trong ứng dụng, chuyển đến tab Bảng màu và nhấp vào Chọn một tùy chọn. (Đối với người dùng lần đầu, nhấp vào Thêm bảng màu sản phẩm.)
   
2. Hệ thống sẽ hiển thị tất cả các tùy chọn biến thể và số lượng mục liên quan. Chọn tùy chọn mong muốn để tạo bảng màu tương ứng. Bạn có thể tạo một bảng màu cho mỗi tùy chọn.
3. Chọn phương pháp khớp màu ưu tiên:
   

• Chính xác: Thuộc tính biến thể sản phẩm phải khớp chính xác với danh sách tên màu quốc tế. (Ví dụ, giá trị thuộc tính phải là "Đỏ" để khớp với màu đỏ.)
• Mờ: Tự động khớp màu dựa trên thông tin văn bản trong các biến thể (hỗ trợ nhiều ngôn ngữ). (Ví dụ, "Đỏ nhạt" cũng sẽ khớp với màu đỏ.) 

4. Đánh dấu chọn Khớp hình ảnh sản phẩm thông minh nếu bạn muốn hệ thống tự động áp dụng hình ảnh biến thể sản phẩm hoặc SKU cho các giá trị biến thể không có màu khớp.
   

5. Sau khi bạn đã chọn, nhấp vào Chọn tùy chọn để tạo bảng màu.

   Lưu ý: Ứng dụng hỗ trợ khớp dịch tự động cho tiếng Đức, Nga, Pháp, Tây Ban Nha, Nhật, Thái và Trung Hoa Phồn thể.

6. Trong danh sách bảng màu, chọn bảng màu bạn đã tạo để điều chỉnh quy tắc hiển thị cho một thuộc tính cụ thể.
7. Bạn có thể tùy chỉnh kiểu cho một thuộc tính cụ thể và chọn hiển thị màu hoặc hình ảnh.
   

• Khi chọn màu, bạn có thể điều chỉnh màu tương ứng cho giá trị thuộc tính. 
• Khi chọn hình ảnh, bạn có thể tải lên hình ảnh tương ứng với thuộc tính. 

8. Để lọc các mục cần cấu hình thủ công, hãy chọn Hiển thị các mục cần cấu hình thủ công.
   
9. Nếu bạn muốn đặt quy tắc hiển thị đặc biệt cho một sản phẩm cụ thể, hãy nhấp vào Tùy chỉnh.
   

9.1 Chọn sản phẩm mong muốn, sau đó nhấp vào Tùy chỉnh bên cạnh sản phẩm.

9.2 Trong cửa sổ bật lên, xác định các loại và kiểu hiển thị cho các giá trị thuộc tính khác nhau.

Cấu hình Kiểu Hiển thị

Khi bảng màu đã được thiết lập, chuyển đến tab Bảng màu và nhấp vào Cấu hình hiển thị để điều chỉnh kiểu hiển thị cho cả Trang Chi tiết Sản phẩm và Trang Danh sách Sản phẩm:

Trong trang cài đặt, cấu hình các thiết lập sau:

• Kiểu bảng màu:
  • Kiểu mặc định: Chọn từ ba kiểu mặc định: Tròn, Vuông hoặc Hình chữ nhật bo tròn.

  • Kiểu tùy chỉnh: Điều chỉnh độ mờ, bán kính góc, kích thước và độ dày.

    Lưu ý: Kích thước và độ dày tùy chỉnh chỉ áp dụng cho Trang Chi tiết Sản phẩm và không được hỗ trợ trên Trang Danh sách Sản phẩm.

• Biến thể đặc biệt:
  • Cấu hình ba kiểu bong bóng được đặt sẵn trực tiếp.
  • Tùy chỉnh màu sắc bong bóng.
  • Tùy chọn hiển thị bảng màu cụ thể trên Trang Chi tiết Sản phẩm theo các dòng riêng biệt và tùy chỉnh dòng tiêu đề phù hợp với nhu cầu của bạn.
• Trang Chi tiết Sản phẩm: Chọn có hiển thị bảng màu trong plugin Thêm vào giỏ hàng hay không.

• Trang danh sách sản phẩm:

  Lưu ý: Trên các chủ đề OS 3.0 (Fashion và Bottle), các mẫu biến thể hết hàng trên trang chi tiết sản phẩm sẽ tự động được hiển thị với dấu gạch ngang. Dấu hiệu này xuất hiện sau khi người mua chọn ít nhất một tùy chọn. Bất kỳ mẫu còn lại nào dẫn đến sự kết hợp biến thể không có sẵn cũng sẽ được đánh dấu tương ứng. Hành vi này chỉ áp dụng cho các mẫu được plugin hiển thị và không ảnh hưởng đến các mẫu được chủ đề hiển thị gốc.

• Hiển thị trạng thái Hết hàng: Khi bật, các biến thể hết hàng sẽ được đánh dấu là "Hết hàng".
• Hạn chế hiển thị bảng màu: Chọn hiển thị 1 dòng, 2 dòng hoặc không giới hạn dòng (hiển thị tất cả) cho bảng màu.
• Kiểu hiển thị khi vượt quá giới hạn: Chọn hiển thị biểu tượng "Thêm" hoặc số lượng còn lại khi vượt quá giới hạn.
• Vị trí hiển thị: Chọn hiển thị bảng màu Phía trên hoặc Phía dưới thông tin sản phẩm.
• Kiểu chuyển đổi hình ảnh sản phẩm: Chọn xem hình ảnh sản phẩm có thay đổi khi khách hàng di chuột qua bảng màu hoặc nhấp vào một tùy chọn bảng màu hay không.
• Quy tắc cắt ảnh sản phẩm: Chọn theo chủ đề hoặc sử dụng kiểu cắt mặc định.

Nếu bảng màu được cấu hình thành công, hiệu ứng hiển thị trên trang danh sách sản phẩm có thể trông như sau:

Thiết Lập Bộ Lọc Sản Phẩm  

Tính năng Bộ Lọc cho phép bạn tạo các bộ lọc giúp khách hàng sắp xếp sản phẩm dựa trên thuộc tính sản phẩm. Khi được cấu hình, các bộ lọc này sẽ hiển thị trên các trang bộ sưu tập của bạn, giúp khách hàng nhanh chóng tìm thấy các biến thể họ cần, từ đó tăng tỷ lệ chuyển đổi.

1. Đi đến phần Bộ Lọc của ứng dụng.
   
2. Cấu hình vị trí hiển thị bộ lọc cho cả di động và máy tính để bàn, với bản xem trước trực tiếp:
   

• Di động: Chọn giữa Trượt ra từ hai bên hoặc Trượt ra từ dưới lên.
• Máy tính để bàn: Chọn giữa Cố định bên trái hoặc Cố định ở trên cùng.

3. Tùy chỉnh cách bộ lọc thu gọn:
   

• Sau khi chọn: Bộ lọc tự động thu gọn sau khi khách hàng chọn một giá trị bộ lọc.
• Sau khi xác nhận ứng dụng: Bộ lọc thu gọn sau khi khách hàng chọn một giá trị bộ lọc và xác nhận điều kiện lọc.

4. Tùy chỉnh các bộ lọc như kích thước, màu sắc và giá cả phù hợp với sản phẩm của bạn. Nếu cần, nhấp vào Thêm bộ lọc để thêm các tùy chọn bổ sung. Khi bạn chọn loại bộ lọc, ứng dụng sẽ tự động lấy các giá trị bộ lọc liên quan cho các sản phẩm trong cửa hàng của bạn.
   

Khi các bộ lọc đã được thiết lập, chúng sẽ được áp dụng cho các trang bộ sưu tập trong cửa hàng của bạn. Dưới đây là các ví dụ về cách hiển thị có thể trông như thế nào:

• Cố định ở trên cùng
  
• Cố định bên trái
  

Thiết Lập Tùy Chọn Sắp Xếp 

Tính năng sắp xếp trong ứng dụng Bộ Lọc Sản Phẩm & Mẫu Màu đang được ngừng hỗ trợ. Mặc dù các cấu hình hiện tại có thể tiếp tục hoạt động tạm thời, tính năng này không còn được khuyến nghị để quản lý việc sắp xếp sản phẩm nữa. 

Để đảm bảo thiết lập ổn định và bền vững trong tương lai, chúng tôi khuyên bạn nên cấu hình việc sắp xếp sản phẩm bằng giải pháp sắp xếp được hỗ trợ thay thế. 

Để biết hướng dẫn chi tiết, vui lòng tham khảo hướng dẫn "Quản lý Thứ tự Gợi ý Sản phẩm".

Hỗ Trợ Truy Cập Cho Bộ Lọc Sản Phẩm và Mẫu Màu

Các widget Bộ Lọc Sản Phẩm và Mẫu Màu hỗ trợ điều hướng bằng bàn phím và tương thích với trình đọc màn hình trên toàn bộ cửa hàng của bạn. Điều này áp dụng ở mọi nơi có mẫu màu và bộ lọc xuất hiện: trang chi tiết sản phẩm, trang danh sách sản phẩm, kết quả tìm kiếm và cửa sổ thêm nhanh. Hỗ trợ này được cung cấp tự động — không cần thiết lập.

Khách hàng sẽ trải nghiệm những điều sau khi duyệt cửa hàng của bạn:

• Điều hướng bằng bàn phím: Khách hàng có thể duyệt các mẫu màu, chọn biến thể, xem thêm màu sắc, và mở, chọn, áp dụng, xóa, và đóng bộ lọc hoàn toàn bằng bàn phím.
• Hỗ trợ trình đọc màn hình: Trình đọc màn hình sẽ thông báo tên mẫu màu và bộ lọc, giá trị hiện tại, và trạng thái lựa chọn, cùng với các cập nhật như thay đổi hình ảnh sản phẩm, số lượng kết quả bộ lọc, và thông báo lỗi.
• Tiêu điểm bàn phím hiển thị rõ ràng: Khi khách hàng điều hướng bằng bàn phím, mẫu màu hoặc bộ lọc đang được tiêu điểm sẽ được làm nổi bật về mặt hình ảnh.
• Kết hợp không khả dụng có thể chọn được: Nếu một màu chỉ không khả dụng khi kết hợp với một tùy chọn đã chọn khác (ví dụ, kích thước), nó vẫn có thể được chọn để khách hàng có thể khám phá các kết hợp khác. Chỉ những tùy chọn hoàn toàn không khả dụng mới bị chặn không cho chọn.
• Hành vi nhất quán sau khi cập nhật: Hỗ trợ này tiếp tục hoạt động khi danh sách sản phẩm của bạn tải thêm mục, bộ lọc cập nhật kết quả, hoặc trang được tải lại động.

Các câu hỏi thường gặp về bộ lọc sản phẩm và mẫu màu

H1: Tại sao không có gì xảy ra sau khi khách hàng áp dụng bộ lọc trên máy tính để bàn?

Điều này có thể xảy ra khi vị trí bộ lọc cho PC được đặt thành Cố định ở trên cùng và Kiểu thu gọn bộ lọc được đặt thành Sau khi xác nhận ứng dụng. Với cấu hình này, một nút xác nhận sẽ hiển thị để khách hàng áp dụng lựa chọn bộ lọc của họ. Tuy nhiên, tùy theo kiểu dáng nút của chủ đề, màu nền nút có thể hòa vào nền bộ lọc, khiến nút khó nhìn thấy.

Hãy vào trang Bộ sưu tập trong trình chỉnh sửa chủ đề và điều chỉnh màu Nền nút để đảm bảo nút xác nhận hiển thị rõ ràng trên nền bộ lọc.

H2: Tại sao tỷ lệ hình ảnh sản phẩm thay đổi sau khi khách hàng chọn mẫu màu trên chủ đề OS 3.0?

Theo mặc định, hình ảnh hiển thị khi khách hàng chọn mẫu màu có thể không theo kiểu dáng hình ảnh của chủ đề bạn. Trong tab Bảng màu, nhấp vào Cấu hình hiển thị. Dưới cài đặt Trang danh sách sản phẩm, đặt Quy tắc cắt hình ảnh sản phẩm thành Theo chủ đề thay vì Kiểu mặc định. Điều này đảm bảo hình ảnh hiển thị cho mẫu màu sử dụng tỷ lệ hình ảnh phù hợp với chủ đề của bạn.

Câu hỏi 3: Tại sao các hình ảnh mẫu màu tôi đã cấu hình không hiển thị trên cửa hàng của tôi?

Hình ảnh mẫu màu chỉ được hiển thị cho các giá trị tùy chọn sản phẩm khớp với một màu đã được cấu hình. Cách các giá trị được khớp phụ thuộc vào chế độ Khớp màu được chọn:

• Chính xác: Giá trị tùy chọn sản phẩm phải khớp chính xác với tên màu trong danh sách màu tiêu chuẩn. Ví dụ, Đỏ có thể được khớp, trong khi Đỏ nhạt thì không.
• Mờ: Hệ thống khớp màu dựa trên văn bản trong giá trị tùy chọn sản phẩm. Ví dụ, Đỏ nhạt có thể được khớp với Đỏ.

Nếu một giá trị tùy chọn sản phẩm không khớp với bất kỳ màu nào đã cấu hình theo chế độ khớp được chọn, hình ảnh mẫu màu tương ứng sẽ không được hiển thị.

Hãy kiểm tra xem các giá trị tùy chọn sản phẩm của bạn có thể được khớp với các màu đã cấu hình hay không. Bạn cũng có thể bật Khớp thông minh hình ảnh sản phẩm để tự động sử dụng hình ảnh tùy chọn sản phẩm hoặc SKU tương ứng cho các giá trị không thể khớp với màu.