Trước đây trang thanh toán (checkout) là trang mặc định, Seller không thể chỉnh sửa màu sắc hay bố cục mà hoàn toàn phụ thuộc vào giao diện mặc định của nền tảng.
Tổng quan #
Seller có thể tùy chỉnh trang checkout bằng hai cách: kéo thả các thành phần (element) có sẵn để tự dựng bố cục, hoặc chọn nhanh các mẫu bố cục dựng sẵn (pattern) rồi chỉnh sửa lại theo ý muốn. Toàn bộ thao tác được thực hiện ngay trong trình chỉnh sửa (Page Editor), không cần biết code.
Mục 1: Truy cập chỉnh sửa trang checkout #
Trước tiên, đăng nhập vào dashboard BettaMax, vào mục Online store, sau đó chọn Theme. Lúc này có hai trường hợp, tùy vào việc store đã từng có trang checkout tùy chỉnh hay chưa.
Trường hợp 1: Store đã có sẵn trang checkout đã chỉnh sửa từ trước
- Vào mục Online store
- Chọn đến phần Themes,
- Bảng nội dung bên phải tìm đến tab Checkout page.
- Ấn Edit page để mở trang checkout hiện có và tiếp tục chỉnh sửa.
Trường hợp 2: Store chưa có trang checkout tùy chỉnh
- Ở khu vực theme hiện tại (Current theme), ấn Edit theme.
- Trong trình chỉnh sửa, ấn vào tên theme ở góc trên bên trái, chọn tab Checkout.
- Ấn Create template để tạo mới trang checkout.
Mục 2: Tạo template checkout mới #
Sau khi ấn Create template, một hộp thoại hiện ra yêu cầu nhập tên template và chọn loại checkout (Checkout type).
Có hai loại checkout để lựa chọn:
- Onepage (Single scroll): toàn bộ thông tin (giỏ hàng, thông tin giao hàng, thanh toán) nằm trên cùng một trang, khách hàng chỉ cần cuộn xuống để hoàn tất.
- Multi-step (Step by step): quy trình được chia thành nhiều bước tuần tự, ví dụ nhập thông tin liên hệ và giao hàng trước, sau đó mới đến bước thanh toán và xác nhận đơn hàng.
Seller nên chọn loại phù hợp với nhu cầu, Onepage phù hợp khi muốn checkout nhanh gọn, Multi-step phù hợp khi cần thu thập thông tin rõ ràng theo từng bước. Sau khi chọn xong, ấn Confirm để vào trình chỉnh sửa.
Mục 3: Chỉnh sửa bố cục và nội dung #
Trình chỉnh sửa trang checkout gồm nhiều khu vực chức năng ở thanh công cụ bên trái.
1. Page content
Đây là cây cấu trúc toàn bộ trang, gồm Header, Body và Footer. Mỗi phần lại chia thành các Section, Layout, Column chứa các thành phần cụ thể như Contact and Delivery, Order summary, Continue button. Seller có thể chọn từng thành phần trong cây này để chỉnh sửa riêng, hoặc ấn Add section để thêm section mới vào trang.
2. Element
Chuyển sang tab Element để xem danh sách các thành phần có thể kéo thả vào trang, chia theo nhóm như Text & button (Heading, Text, Button), Media (Image), Icon & line, Content list (Accordion), Conversion booster (Session count, Block Countdown) và các thành phần khác. Seller kéo thành phần muốn thêm từ danh sách này và thả vào vị trí mong muốn trên trang.
3. Tùy chỉnh từng element
Khi chọn một element trên trang, panel bên phải hiện ra với tab Setting để chỉnh style (ví dụ layout dạng cột, số cột, khoảng cách giữa các cột, căn chỉnh ngang dọc, kích thước, padding, màu nền).
Chuyển sang tab Advanced để chỉnh các thiết lập nâng cao hơn như hiển thị trên Desktop/Mobile (Visible on), khoảng cách (Spacing) và độ trong suốt (Opacity) của element đó.
Mục 4: Dùng mẫu bố cục dựng sẵn #
Ngoài việc tự kéo thả từng element, Seller có thể dùng tab Pattern để chọn nhanh các mẫu bố cục đã được BettaMax dựng sẵn theo từng chủ đề, ví dụ nhóm Trusted Guarantee gồm các mẫu hiển thị icon phương thức thanh toán và cam kết an toàn.
Mục 5: Tùy chỉnh giao diện tổng thể #
Global style áp dụng cho toàn bộ trang checkout, giúp đồng bộ giao diện thay vì chỉnh từng element riêng lẻ.
Logo và favicon
Cho phép đổi logo và favicon riêng cho trang checkout, khác với logo mặc định của store nếu cần. Bật tùy chọn Different logo for header & footer nếu muốn dùng logo khác nhau giữa hai vị trí này.
Color
Chọn bảng màu áp dụng cho toàn trang checkout, gồm màu chính, màu phụ, màu chữ, màu nền. Seller có thể tự chọn màu riêng (Custom color) hoặc chọn nhanh từ các bảng màu gợi ý sẵn (Recommended color) để đảm bảo phối màu hài hòa.
Font manager
Chọn font chữ dùng cho tiêu đề (Heading) và nội dung (Paragraph) của toàn trang checkout.
Typography
Thiết lập kích thước chữ cho từng cấp tiêu đề (Heading 1 đến Heading 6) và từng cấp đoạn văn (Paragraph 1 đến Paragraph 3), giúp phân cấp nội dung rõ ràng, dễ đọc.
Corners
Thiết lập độ bo góc chung cho các khối trên trang, từ 2XS đến 2XL, áp dụng cho nút bấm, ô nhập liệu, khung ảnh và các khối khác để đồng bộ phong cách bo góc trên toàn trang.
Mục 6: Cài đặt bổ sung #
Ở mục Settings (biểu tượng bánh răng), Seller có thể cấu hình thêm các tùy chọn liên quan đến giỏ hàng và trải nghiệm thanh toán:
- Cart type: chọn hiển thị giỏ hàng dạng Page (mở thành trang riêng) hoặc Drawer (mở dạng khung trượt ra từ cạnh màn hình).
- Pay with PayPal: bật/tắt hiển thị nút thanh toán nhanh qua PayPal.
- Add to cart auto-opens drawer: tự động mở khung giỏ hàng ngay khi khách thêm sản phẩm vào giỏ.
- Compared price: hiển thị giá gốc gạch ngang bên cạnh giá bán trong giỏ hàng.
- Quantity badge: hiển thị số lượng sản phẩm dạng huy hiệu nhỏ trên icon giỏ hàng.
- Trust Badges: hiển thị các icon cam kết uy tín (giao hàng, đổi trả, bảo mật…) trong giỏ hàng.
Mục 7: Lưu và xuất bản #
Sau khi chỉnh sửa xong, ấn Save để lưu bản nháp, hoặc ấn Publish để xuất bản trang checkout đã tùy chỉnh lên store. Trang checkout hoàn chỉnh sẽ hiển thị đúng theo bố cục, màu sắc, font chữ mà Seller đã thiết lập, kèm các tùy chọn thanh toán nhanh như PayPal, Apple Pay, Google Pay.
