Tùy chỉnh Thiết kế & Chủ đề

Trang cài đặt thiết kế với chế độ xem trước trực tiếp của trang thanh toán, cổng thông tin khách hàng và cửa hàng trực tuyến

Trang Design là trung tâm chính để xây dựng thương hiệu cho mọi giao diện hướng đến khách hàng: checkout, storefront và Customer Portal. Các thay đổi được áp dụng ngay lập tức trên cả ba giao diện và được xem trước theo thời gian thực trước khi bạn lưu. Test mode và live mode có thiết kế riêng — xem Sao chép thiết kế từ Test sang Live Mode.

Điểm nổi bật chính

Trung tâm thiết kế hợp nhất — Cấu hình giao diện checkout, storefront và Customer Portal từ một trang duy nhất
Chủ đề dựng sẵn — Bắt đầu với một chủ đề được tuyển chọn và tùy chỉnh từ đó
Chế độ sáng & tối — Xác định bảng màu riêng cho từng chế độ
Xem trước trực tiếp — Xem các thay đổi của bạn hiển thị như thế nào trên tất cả các giao diện trước khi lưu
Ghi đè theo từng phần — Tinh chỉnh từng phần riêng lẻ mà không ảnh hưởng đến các phần khác
Điều khiển bằng lập trình — Ghi đè chủ đề tại thời điểm checkout thông qua Checkout Sessions API (customization.theme_config). theme_config của một session được ưu tiên hơn thiết kế trên dashboard. Tùy chọn themeConfig phía client của Checkout SDK đã không còn được khuyến nghị sử dụng
Sao chép thiết kế kiểm thử sang môi trường live — Chuyển một thiết kế đã hoàn thiện trong chế độ kiểm thử sang chế độ live chỉ với một bước

Bắt đầu

Điều hướng đến Cài đặt → Thiết kế trong Bảng điều khiển thương gia của bạn. Trang Thiết kế có bốn tab:

Tab	Mục đích
General	Tên doanh nghiệp, logo, lựa chọn chủ đề và các cài đặt nâng cao toàn cục
Checkout	Ghi đè cài đặt chủ đề dành riêng cho trang checkout
Storefront	Ghi đè cài đặt chủ đề và cấu hình bố cục storefront
Customer Portal	Ghi đè cài đặt chủ đề cho Customer Portal

Cài đặt Chung

Tab Chung điều khiển bản sắc thương hiệu cơ bản và chủ đề toàn cục của bạn.

Tab Chung hiển thị cài đặt nâng cao với cấu hình kiểu chữ, màu sắc và viền

Cấu hình cơ bản

Cài đặt	Mô tả
Tên doanh nghiệp	Tên được hiển thị trên checkout, storefront và Customer Portal
Logo doanh nghiệp	Logo thương hiệu của bạn được hiển thị trên tất cả các trang hướng đến khách hàng
Chủ đề	Chọn một chủ đề dựng sẵn làm điểm bắt đầu

Cài đặt nâng cao

Mở rộng Cài đặt nâng cao để truy cập các điều khiển chi tiết:

Kiểu chữ

Cài đặt	Tùy chọn	Mô tả
Phông chữ chính	Bất kỳ Google Font nào	Phông chữ chính cho tiêu đề và nội dung
Phông chữ phụ	Bất kỳ Google Font nào	Phông chữ nhấn cho nhãn và văn bản phụ
Cỡ chữ	`xs`, `sm`, `md`, `lg`, `xl`, `2xl`	Cỡ chữ cơ sở toàn cục
Độ đậm phông chữ	`normal`, `medium`, `bold`, `extraBold`	Độ đậm phông chữ mặc định

Cấu hình màu sắc

Xác định bảng màu riêng cho Light Mode và Dark Mode. Mỗi chế độ hỗ trợ:

Thuộc tính	Mô tả
Nền chính	Màu nền chính
Nền phụ	Nền phụ (tab, thẻ)
Văn bản chính	Màu văn bản chính
Văn bản phụ	Màu văn bản mờ
Nút chính	Nền của nút chính
Văn bản trên nút chính	Màu văn bản trên các nút chính
Nút phụ	Nền của nút phụ
Văn bản trên nút phụ	Màu văn bản trên các nút phụ
Viền chính	Màu viền chính
Viền phụ	Màu viền nhấn

Viền

Cài đặt	Mô tả
Bo góc	Kiểm soát độ bo của ô nhập, nút, tab và thẻ (ví dụ: `0` cho góc sắc nét, `8px` cho góc bo tròn, `16px` cho dạng viên thuốc)

Chủ đề dựng sẵn

Dodo Payments đi kèm bốn chủ đề được tuyển chọn. Chọn một chủ đề từ menu Chủ đề trong tab Chung để áp dụng ngay một thiết kế đồng nhất cho thanh toán, cửa hàng và cổng khách hàng.

Dodo Pulses

Chủ đề mặc định của Dodo Payments. Điểm nhấn xanh chanh mang đến cảm giác năng động và tươi mới. Kiểu chữ sans-serif sạch với khoảng cách rộng rãi.

Light Mode
Dark Mode

Chủ đề Dodo Pulses ở chế độ sáng hiển thị thanh toán, cổng khách hàng và cửa hàng — Dodo Pulses in light mode

Terminal

Chủ đề dành cho nhà phát triển với kiểu chữ monospaced và điểm nhấn xanh hoàng gia. Góc nhọn và thẩm mỹ kỹ thuật phù hợp với các sản phẩm hướng công cụ dev và ưu tiên API.

Light Mode
Dark Mode

Chủ đề Terminal ở chế độ sáng hiển thị thanh toán với các điểm nhấn màu xanh lam và phông chữ monospace — Terminal in light mode

Bumblebee

Điểm nhấn hổ phách và vàng ấm cùng phong cách bo tròn hiện đại. Nổi bật và tương phản cao, phù hợp với các sản phẩm hướng tới người tiêu dùng muốn tạo cảm giác cao cấp.

Light Mode
Dark Mode

Chủ đề Bumblebee ở chế độ sáng hiển thị thanh toán với các điểm nhấn màu hổ phách — Bumblebee in light mode

Bubblegum

Điểm nhấn hồng và magenta vui nhộn với góc bo tròn hoàn toàn. Giao diện hiện đại, thân thiện phù hợp cho công cụ sáng tạo, sản phẩm thiết kế và thương hiệu phong cách sống.

Light Mode
Dark Mode

Chủ đề Bubblegum ở chế độ sáng hiển thị thanh toán, cổng thông tin khách hàng và cửa hàng với các điểm nhấn màu hồng — Bubblegum in light mode

Sau khi chọn một chủ đề dựng sẵn, hãy tùy chỉnh từng thuộc tính trong Advanced Settings. Các thuộc tính không được chỉ định sẽ sử dụng giá trị mặc định của chủ đề.

Ghi đè từng phần

Mỗi tab phần (Thanh toán, Cửa hàng, Cổng khách hàng) bao gồm công tắc Ghi đè Chủ đề. Khi bật, bạn có thể tùy chỉnh giao diện của phần đó độc lập với chủ đề toàn cục.

Tab Thanh toán

Ghi đè kiểu chữ, màu sắc và cài đặt viền dành riêng cho trải nghiệm checkout. Bản xem trước trực tiếp hiển thị:

Thông tin sản phẩm và giá
Các tùy chọn express checkout (Apple Pay, Google Pay)
Lựa chọn phương thức thanh toán và biểu mẫu thẻ
Ô nhập mã giảm giá và phân tích giá

Tab Storefront

Storefront tab showing store URL, branding controls, and storefront preview

Cấu hình các cài đặt dành riêng cho storefront:

Cài đặt	Mô tả
URL cửa hàng	Địa chỉ storefront của bạn (ví dụ: `store.dodopayments.com/your-store`)
Tên cửa hàng	Bật/tắt và thiết lập tên hiển thị trên storefront
Logo cửa hàng	Bật/tắt và tải logo lên cho phần đầu storefront
Banner cửa hàng	Bật/tắt và tải hình ảnh banner lên
Mô tả sản phẩm	Bật/tắt để hiển thị hoặc ẩn mô tả sản phẩm trên các thẻ
Ghi đè chủ đề	Bật để tùy chỉnh kiểu chữ, màu sắc và đường viền chỉ dành cho storefront

Tab Customer Portal

Customer portal tab showing subscription management, billing history, and payment methods preview

Ghi đè chủ đề cho Customer Portal, bao gồm:

Quản lý gói đăng ký
Lịch sử thanh toán
Phương thức thanh toán
Ví và tín dụng

Sao chép thiết kế từ Test sang Live Mode

Test mode và live mode duy trì các cấu hình thiết kế riêng biệt. Chủ đề bạn xây dựng trong quá trình kiểm thử sẽ không tự động xuất hiện với khách hàng thực. Thay vì tạo lại thủ công, hãy sao chép thiết kế từ test mode sang live mode chỉ với một bước.

Open Design in Test Mode

Chuyển sang chế độ kiểm thử và đi đến Settings → Design. Trước tiên, hãy lưu mọi thay đổi đang chờ xử lý: chỉ thiết kế kiểm thử đã lưu mới được sao chép.

Start the Copy

Nhấp vào Copy to Live Mode. Nút này xuất hiện sau khi bạn đã lưu một chủ đề hoặc xuất bản một storefront kiểm thử, đồng thời chế độ live phải được kích hoạt.

Choose What to Copy

Chọn Theme & customizations (chủ đề chung cùng các ghi đè cho checkout, storefront và Customer Portal) và Storefront details (tên storefront, logo và banner). Storefront details không khả dụng nếu chưa có storefront nào được xuất bản trong chế độ kiểm thử.

Confirm

Nhấp vào Copy to Live Mode trong hộp thoại.

Việc sao chép sẽ ghi đè thiết kế hiện có trong live mode. Hãy xem lại checkout và storefront trong live mode sau khi sao chép để xác nhận mọi thứ hiển thị đúng như mong đợi.

Các trang liên quan

Checkout Features

Các tính năng checkout bao gồm tiền tệ, ngôn ngữ, thuế, chiết khấu và nhiều tính năng khác.

Overlay Checkout SDK

Nhúng checkout dưới dạng lớp phủ modal trên trang của bạn.

Inline Checkout SDK

Nhúng checkout trực tiếp vào bố cục trang của bạn.

Storefront

Thiết lập và quản lý storefront mang thương hiệu của bạn.

Customer Portal

Cổng tự phục vụ dành cho khách hàng để quản lý gói đăng ký và thanh toán.

Multi-Brand Setup

Vận hành nhiều thương hiệu trong cùng một tài khoản với nhận diện thương hiệu riêng biệt.

Getting Started

Features

Integrate

Merchant of Record

Miscellaneous

Điểm nổi bật chính

Bắt đầu