Thiết Kế Trang Giỏ Hàng & Thanh Toán trong Trình Chỉnh Sửa Giao Diện (Giao Diện OS 3.0)

Giỏ hàng và Thanh toán là các bước cuối cùng trong hành trình mua sắm của khách hàng. Cùng nhau, chúng giúp khách hàng xem lại đơn hàng, hoàn tất thanh toán và đặt hàng thành công.

Đối với giao diện OS 3.0, trang Giỏ hàng được thiết kế trong Trình chỉnh sửa giao diện, nơi bạn có thể tùy chỉnh các thành phần cốt lõi và thêm nội dung khuyến mãi hoặc thông tin để khuyến khích khách hàng hoàn tất mua hàng. Tuy nhiên, trang Thanh toán được cấu hình riêng trong Trình chỉnh sửa Thanh toán, cung cấp các cài đặt chuyên biệt cho trải nghiệm thanh toán của cửa hàng bạn.

Hướng dẫn này giải thích cách tùy chỉnh trang Giỏ hàng trong Trình chỉnh sửa giao diện, giới thiệu về Trình chỉnh sửa Thanh toán, và hướng dẫn bạn đến các tài liệu phù hợp để cấu hình các trang thanh toán của bạn.

Điều hướng đến trang Giỏ hàng trong Trình chỉnh sửa giao diện

Để mở trang Giỏ hàng trong Trình chỉnh sửa giao diện:

1. Từ bảng quản trị SHOPLINE của bạn, vào Cửa hàng trực tuyến > Thiết kế, sau đó nhấn nút Thiết kế trên giao diện OS 3.0 mà bạn muốn chỉnh sửa.

2. Ở đầu Trình chỉnh sửa giao diện, nhấn bộ chọn trang và chọn Giỏ hàng từ danh sách các loại trang.

   

Thanh bên trái của Trình chỉnh sửa giao diện luôn được tổ chức thành ba nhóm: 

• đầu trang và chân trang: Áp dụng cho toàn bộ cửa hàng của bạn.
• Mẫu: Chứa nội dung đặc thù cho trang bạn đang chỉnh sửa. Đối với trang Giỏ hàng, Mẫu chứa thành phần Giỏ hàng, bao gồm các khối Tiêu đề, Danh sách sản phẩm, và Tổng phụ được đề cập trong hướng dẫn này.

Hiểu về Các Thành Phần Cốt Lõi của Trang Giỏ Hàng

Thành phần Giỏ hàng nằm dưới mục Mẫu trong Trình chỉnh sửa Giao diện và bao gồm ba khối cốt lõi: Tiêu đề, Danh sách sản phẩm, và Tổng phụ. Mỗi khối có một chức năng khác nhau: 

• Tiêu đề: Hiển thị tiêu đề trang (ví dụ, "Giỏ hàng") ở đầu trang.
• Danh sách sản phẩm: Hiển thị từng mặt hàng trong giỏ hàng của người mua, bao gồm hình ảnh sản phẩm, tên, bộ chọn số lượng và tổng tiền từng dòng.
• Tổng phụ: Hiển thị tổng tiền hiện tại của giỏ hàng và bao gồm hai khối bổ sung:
  • Giá tổng phụ: Hiển thị tổng chi phí của các mặt hàng hiện có trong giỏ hàng.
  • Nút thanh toán: Nút mà người mua nhấn để tiến hành thanh toán.

Nhấp vào một khối để mở bảng cài đặt của nó. Mỗi khối chỉ hỗ trợ các cài đặt Lề và Đệm tiêu chuẩn có sẵn trong toàn bộ Trình chỉnh sửa Giao diện và không bao gồm bất kỳ tùy chọn nội dung hoặc hiển thị bổ sung nào. 

Bạn cũng có thể nhấp và kéo tay cầm sáu chấm để sắp xếp lại các khối trong thành phần.

Thêm và Sắp xếp Các Thành Phần Tùy Chỉnh trên Trang Giỏ Hàng

Bên cạnh các thành phần cốt lõi, bạn có thể thêm nội dung bổ sung vào trang Giỏ hàng bằng cách sử dụng các thành phần tùy chỉnh. Điều này hữu ích để làm nổi bật chương trình khuyến mãi, tạo sự cấp bách hoặc tạo sự yên tâm cho người mua khi họ chuẩn bị thanh toán.

Thêm Các Thành Phần Tùy Chỉnh vào Trang Giỏ Hàng

Để thêm một thành phần vào trang Giỏ hàng của bạn:

1. Trong Trình chỉnh sửa Chủ đề, chuyển đến trang Giỏ hàng.

2. Dưới Mẫu, nhấp vào + Thêm thành phần.

   

3. Trong bảng mở ra, duyệt hoặc tìm kiếm một thành phần trong tab Chủ đề.

   

4. Nhấp vào thành phần để thêm nó vào trang Giỏ hàng, sau đó cấu hình cài đặt của nó.

Các Thành Phần Tùy Chỉnh Được Đề Xuất cho Trang Giỏ Hàng

Các thành phần sau thường được thêm vào trang Giỏ hàng để tăng tỷ lệ chuyển đổi, khuyến khích mua thêm, và xây dựng sự tin tưởng của khách hàng trước khi thanh toán.

Ví dụ: Thêm Đồng Hồ Đếm Ngược vào Trang Giỏ Hàng của Bạn

Để thêm và cấu hình Đồng hồ đếm ngược trên trang Giỏ hàng của bạn:

1. Trong Trình chỉnh sửa Chủ đề, chuyển đến trang Giỏ hàng.

2. Dưới mục Mẫu, nhấp vào + Thêm thành phần, sau đó chọn Đồng hồ đếm ngược từ tab Chủ đề.

   

3. Nhấp vào thành phần Đồng hồ đếm ngược mới được thêm để mở bảng Cài đặt của nó. Cấu hình giao diện tổng thể của thành phần, bao gồm màu chữ đồng hồ đếm ngược, bảng màu, hiển thị toàn màn hình và bố cục, để phù hợp với thiết kế cửa hàng của bạn.

   

4. Dưới mục Đồng hồ đếm ngược, nhấp vào Hình ảnh để tải lên hình ảnh khuyến mãi cho banner đếm ngược, đặt chiều rộng hình ảnh và cấu hình liên kết đích của nó.

   

5. Nhấp vào Cài đặt đếm ngược. Dưới Cài đặt, chọn xem nội dung có kế thừa bảng màu của thành phần hay không. Dưới Bố cục, điều chỉnh khoảng cách và bố cục khu vực nội dung theo nhu cầu.

   

Sau đó cấu hình các khối sau:

• Tiêu đề: Nhập tiêu đề chính cho chương trình khuyến mãi.
• Mô tả: Thêm văn bản hỗ trợ, chẳng hạn như chi tiết khuyến mãi hoặc lời kêu gọi hành động.
• Phân cách: Thêm hoặc xóa phân cách để tách các phần nội dung.
• Đồng hồ đếm ngược: Đặt ngày và giờ kết thúc đếm ngược, và tùy chỉnh giao diện đồng hồ.
• Nút bấm: Cấu hình văn bản nút và liên kết đích để hướng khách hàng đến trang hoặc chương trình khuyến mãi liên quan.

6. Nhấp Lưu để áp dụng các thay đổi của bạn.

Thiết kế Trang Thanh Toán

Trang Thanh toán được cấu hình trong Trình chỉnh sửa Thanh toán, một trình chỉnh sửa chuyên dụng để quản lý trải nghiệm thanh toán của cửa hàng bạn.

Để truy cập, mở trình chọn trang ở đầu Trình chỉnh sửa Chủ đề và chọn Thanh toán. Bạn sẽ được chuyển đến Trình chỉnh sửa Thanh toán, nơi bạn có thể tùy chỉnh các cài đặt như bố cục trang thanh toán, phương thức thanh toán và thông tin vận chuyển.

Để biết hướng dẫn chi tiết về thiết lập và tùy chỉnh, xem "Lựa chọn Quy trình Thanh toán của Bạn" và "Tùy chỉnh Các trang Thanh toán của Cửa hàng."