Tăng Bán & Gói Sản Phẩm: Tùy Chỉnh Kiểu Hiển Thị Gói Sản Phẩm

Tính năng Kiểu Tùy chỉnh trong ứng dụng Bán chéo & Gói sản phẩm cho phép bạn kiểm soát tốt hơn cách các gói sản phẩm hiển thị trên trang sản phẩm của cửa hàng. Với tính năng này, bạn có thể dễ dàng cá nhân hóa bố cục, màu sắc, phông chữ, nút bấm và nhiều hơn nữa để trình bày gói sản phẩm tốt hơn và nâng cao trải nghiệm mua sắm.

Trong hướng dẫn này, chúng tôi sẽ hướng dẫn bạn cách truy cập và sử dụng các tùy chọn Kiểu Tùy chỉnh để tùy biến gói sản phẩm một cách dễ dàng.

Cách Áp Dụng Kiểu Gói: Quy Tắc và Logic

Trước khi bắt đầu tùy chỉnh kiểu hiển thị cho các gói sản phẩm, điều quan trọng là bạn phải hiểu cách các cài đặt kiểu được áp dụng. Phần này trình bày các quy tắc và điều kiện chính ảnh hưởng đến cấu hình kiểu của bạn để đảm bảo các tùy chỉnh hoạt động như mong muốn.

Điều Kiện Tùy Chỉnh Kiểu

Chỉ các chiến dịch gói bật Theo dõi cài đặt nâng cao trong phần Cài đặt kiểu mới có thể áp dụng các cấu hình kiểu được thiết lập trong tính năng Kiểu tùy chỉnh.

Ưu Tiên Mã CSS

Nếu mã CSS tùy chỉnh được thêm vào, nó sẽ có ưu tiên và ghi đè các cài đặt kiểu được cấu hình qua mẫu tùy chỉnh.

Ví dụ: Nếu bạn đặt màu nút là đỏ trong cấu hình kiểu tùy chỉnh nhưng bao gồm .bundle-product-title { color: blue; } trong mã CSS của bạn, nút sẽ hiển thị màu xanh.

Hiển Thị Nhiều Chiến Dịch Trùng Khớp

Khi một sản phẩm trùng khớp với nhiều chiến dịch "sử dụng cùng một mẫu" (ví dụ, nếu tất cả các chiến dịch này đều theo Cài đặt nâng cao trong Cài đặt kiểu hoặc không chiến dịch nào theo nhưng sử dụng cùng một mẫu), cấu hình hiển thị dưới Kiểu tùy chỉnh > Nhiều gói sẽ được áp dụng.

Ví dụ:

Gói Sản Phẩm	Cài Đặt Phong Cách	Áp dụng hiển thị 【Nhiều Gói】?
A	Cả A và B đều theo Cài đặt nâng cao	Có
B
A	Cả A và B đều sử dụng Toàn bộ chiều rộng, dưới module sản phẩm	Có
B
A	A theo Cài đặt nâng cao, và chọn mẫu Dưới nút 'Thêm vào giỏ hàng': Tích hợp trong phần Phong cách tùy chỉnh.	Không. Hai chiến dịch gói sẽ được hiển thị với các phong cách khác nhau trên cùng một trang sản phẩm dựa trên cài đặt riêng của chúng.
B	B sử dụng Toàn bộ chiều rộng, dưới module sản phẩm

Vị Trí Hiển Thị Gói

Khi một chiến dịch gói được đặt là Theo cài đặt nâng cao, vị trí hiển thị của nó sẽ được xác định bởi tùy chọn Cài đặt phong cách trong phần Cài đặt nâng cao.

• Nếu chọn Tự động nhúng widget, vị trí sẽ theo mẫu được chọn trong phần Phong cách tùy chỉnh.
• Nếu chọn Thêm thủ công khối Gói sản phẩm vào giao diện, vị trí sẽ theo bố cục được cấu hình trong trình chỉnh sửa giao diện.

Cấu Hình Cài Đặt Phong Cách Tùy Chỉnh

Sau khi hiểu cách áp dụng cài đặt phong cách, bạn có thể bắt đầu tùy chỉnh các mẫu cho các chiến dịch gói đủ điều kiện.

1. Mở ứng dụng Product Upsells & Bundles của bạn và chuyển đến tab Product bundles. Tìm phần Custom style và nhấp vào Set now.
   
2. Tùy chỉnh mẫu gói sản phẩm:
   
   Để cấu hình mẫu cho một gói đơn lẻ, điều chỉnh các cài đặt sau trong phần Single bundle. Bạn có thể xem trước các thay đổi trong bảng Single bundle.

   Lưu ý: Nếu bạn đã chọn Manually add Product bundles block to your theme trong Advanced settings, vị trí gói sẽ theo kiểu thành phần được định nghĩa trong trình chỉnh sửa giao diện và sẽ không bị ảnh hưởng bởi mẫu được đặt trong cài đặt Custom style.

• • • Mẫu: Chọn từ:
      • Dưới nút 'Thêm vào giỏ hàng': Tích hợp
      • Dưới nút 'Thêm vào giỏ hàng': Tách rời
      • Dưới sản phẩm: Toàn bộ chiều rộng
    • Kích thước phông chữ tiêu đề trên máy tính để bàn: Đặt kích thước phông chữ cho tiêu đề gói trên chế độ xem máy tính để bàn.
    • Kích thước phông chữ tiêu đề trên máy tính để bàn: Đặt kích thước phông chữ cho chế độ xem máy tính để bàn.
    • Kích thước phông chữ tiêu đề trên thiết bị di động: Đặt kích thước phông chữ cho tiêu đề gói trên chế độ xem thiết bị di động.
    • Màu tiêu đề: Tùy chỉnh màu tiêu đề. Nếu bạn muốn nó phù hợp với chủ đề cửa hàng của bạn, hãy chọn Follow theme colors.
    • Độ đậm phông chữ tiêu đề: Chọn Bold font để làm tiêu đề đậm.

Đối với các sản phẩm phù hợp với nhiều hơn một chiến dịch gói, bạn có thể cấu hình thêm cách hiển thị của chúng. Điều chỉnh các cài đặt trong phần Multiple bundle và xem trước các thay đổi trong bảng Multiple bundle.

• • • Mẫu: Chọn cách bạn muốn hiển thị các gói:
      • Chế độ tab: Các gói sẽ được hiển thị dưới dạng các tab mà người dùng có thể chuyển đổi. Nếu bạn chọn tùy chọn này, bạn có thể cấu hình thêm:
        • Tiêu đề tab: Đặt tên cho tiêu đề của từng bộ gói.
        • Kích thước phông chữ tiêu đề tab (Máy tính để bàn): Đặt kích thước phông chữ cho tiêu đề tab trên chế độ xem máy tính để bàn.
        • Kích thước phông chữ tiêu đề tab (Di động): Đặt kích thước phông chữ cho tiêu đề tab trên chế độ xem thiết bị di động.
        • Màu tiêu đề tab: Tùy chỉnh màu tab. Nếu bạn muốn nó phù hợp với chủ đề cửa hàng của bạn, hãy chọn Follow theme colors.
        • Độ đậm phông chữ tiêu đề tab: Chọn Bold font để làm tiêu đề tab đậm.
      • Chế độ lưới: Các gói sẽ được hiển thị theo bố cục dạng lưới.

3. Cấu hình các cài đặt liên quan đến các sản phẩm được bao gồm trong gói trong phần Products bundles:

• • Tỷ lệ hình ảnh sản phẩm: Đặt tỷ lệ cho hình ảnh sản phẩm.
  • Quy tắc hiển thị hình ảnh: Chọn giữa Tự động điều chỉnh và Đệm.
  • Màu sắc: Tùy chỉnh màu sắc cho Tiêu đề sản phẩm, Giá bán, và Số tiền hoặc phần trăm giảm giá. Nếu bạn muốn màu sắc theo chủ đề của cửa hàng, hãy chọn Theo màu chủ đề.
  • Sản phẩm được chọn: Tùy chỉnh Màu nổi bật cho các mục được chọn.

4. Cấu hình các thiết lập liên quan đến nút mua hàng trong phần Nút mua hàng:

• • Kích thước phông chữ văn bản nút trên máy tính để bàn: Đặt kích thước phông chữ cho văn bản nút mua hàng trên giao diện máy tính để bàn.
  • Kích thước phông chữ văn bản nút trên thiết bị di động: Đặt kích thước phông chữ cho văn bản nút mua hàng trên giao diện thiết bị di động.
  • Màu nút: Tùy chỉnh màu sắc cho Nền nút và Văn bản nút. Nếu bạn muốn màu sắc theo chủ đề của cửa hàng, hãy chọn Theo màu chủ đề.
  • Bán kính viền nút: Điều chỉnh kiểu border-radius của nút mua hàng. Để phù hợp với chủ đề cửa hàng, hãy chọn Áp dụng cài đặt border-radius của chủ đề.

5. Nếu bạn có kiến thức về lập trình và thành thạo CSS, hãy sử dụng phần CSS tùy chỉnh để tùy chỉnh hiển thị gói sản phẩm của bạn.

   Lưu ý:  Nếu mã CSS tùy chỉnh được triển khai, nó sẽ được ưu tiên và ghi đè các thiết lập xung đột được cấu hình qua Kiểu tùy chỉnh. Bản xem trước sẽ không phản ánh hiệu ứng của các cấu hình CSS của bạn. Vui lòng lưu cài đặt và truy cập cửa hàng để xem kết quả.

   
6. Chuyển đổi giữa chế độ máy tính để bàn và thiết bị di động để xem trước hiệu ứng. Khi bạn hài lòng với kết quả, nhấn Cập nhật để lưu và áp dụng cài đặt.