Tăng cường bán hàng và 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 Phong cách tùy chỉnh trong ứng dụng Upsells & Bundles sản phẩm cho phép bạn kiểm soát tốt hơn cách mà các gói sản phẩm của bạn xuất hiện trên các 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 để giới thiệu các gói của bạ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 Phong cách tùy chỉnh để tùy chỉnh các gói sản phẩm của bạn một cách dễ dàng.

Cách áp dụng phong cách gói: Quy tắc và logic

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

Điều kiện tùy chỉnh phong cách

Chỉ các chiến dịch gói cho phép Theo cài đặt nâng cao trong phần Cài đặt phong cách mới có thể áp dụng các cấu hình phong cách được thiết lập trong tính năng Phong cách 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 phong cách được cấu hình thông qua mẫu tùy chỉnh.

Ví dụ: Nếu bạn đặt màu nút thành màu đỏ trong cấu hình phong cách 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 phù hợp

Khi một sản phẩm phù hợ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 phong cách hoặc không có chiến dịch nào nhưng sử dụng cùng một mẫu), cấu hình hiển thị dưới Phong cách 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 mô-đun 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 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ác cài đặt tương ứng của chúng.
B	B sử dụng Toàn bộ chiều rộng, dưới mô-đun sản phẩm

Vị trí hiển thị gói

Khi một chiến dịch gói được đặt thành 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 Tự động nhúng widget được chọn, vị trí sẽ theo mẫu được chọn trong phần Phong cách tùy chỉnh.
• Nếu Thêm khối gói sản phẩm vào chủ đề của bạn một cách thủ công được chọn, vị trí sẽ theo bố cục được cấu hình trong trình chỉnh sửa chủ đề.

Cấu hình cài đặt phong cách tùy chỉnh

Sau khi hiểu cách mà cài đặt phong cách được áp dụng, 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 Upsells & Bundles sản phẩm của bạn và đi đến tab Gói sản phẩm. Tìm phần Phong cách tùy chỉnh và nhấp vào Đặt ngay.
   
2. Tùy chỉnh các mẫu gói:
   
   Để cấu hình mẫu cho một gói đơn, điều chỉnh các cài đặt sau trong phần Gói đơn. Bạn có thể xem trước các thay đổi của mình trong bảng Gói đơn.

   Ghi chú: Nếu bạn đã chọn Thêm khối gói sản phẩm vào chủ đề của bạn một cách thủ công trong Cài đặt nâng cao, vị trí gói sẽ theo phong cách thành phần được xác định trong trình chỉnh sửa chủ đề và sẽ không bị ảnh hưởng bởi mẫu được thiết lập trong cài đặt Phong cách tùy chỉnh.

• • • 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 biệt
      • 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 di động: Đặt kích thước phông chữ cho tiêu đề gói trên chế độ xem 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 cửa hàng, hãy chọn Theo màu chủ đề.
    • Độ dày phông chữ tiêu đề: Chọn Phông chữ đậm để làm cho tiêu đề đậm.

Đối với các sản phẩm phù hợp với nhiều 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 Nhiều gói và xem trước các thay đổi trong bảng Nhiều gói.

• • • 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 giữa chúng. 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 các tiêu đề của mỗi 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 di động.
        • Màu tiêu đề tab: Tùy chỉnh màu của tab. Nếu bạn muốn nó phù hợp với chủ đề của cửa hàng, hãy chọn Theo màu chủ đề.
        • Độ dày phông chữ tiêu đề tab: Chọn Phông chữ đậm để làm cho các tiêu đề tab trở nên đậm.
      • Chế độ gạch: Các gói sẽ được hiển thị trong một bố cục gạch.

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 Các gói sản phẩm:

• • Tỷ lệ hình ảnh sản phẩm: Đặt tỷ lệ cho các 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 tỷ lệ 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 đã chọn: Tùy chỉnh Màu nổi bật cho các mục đã chọn.

4. Cấu hình các cài đặt liên quan đến nút mua trong phần Nút mua:

• • 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 trên chế độ xem máy tính để bàn.
  • Kích thước phông chữ văn bản nút trên di động: Đặt kích thước phông chữ cho văn bản nút mua trên chế độ xem 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 bán kính viền của nút mua. Để phù hợp với chủ đề của cửa hàng, hãy chọn Áp dụng cài đặt bán kính viền của chủ đề.

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

   Ghi chú:  Nếu mã CSS tùy chỉnh được triển khai, nó sẽ có ưu tiên và ghi đè bất kỳ cài đặt nào xung đột được cấu hình thông qua Phong cách tùy chỉnh. Chế độ xem trước sẽ không phản ánh các hiệu ứng của các cấu hình CSS của bạn. Vui lòng lưu cài đặt của bạn 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à di động để xem trước hiệu ứng. Khi bạn hài lòng với kết quả, hãy nhấp vào Cập nhật để lưu và áp dụng cài đặt của bạn.