주요 하이라이트
- 통합 디자인 허브 — 단일 페이지에서 checkout, storefront, Customer Portal의 외관을 구성
- 사전 제작 테마 — 엄선된 테마로 시작한 후 원하는 대로 사용자 지정
- 라이트 및 다크 모드 — 각 모드에 대해 별도의 색상 팔레트 정의
- 실시간 미리보기 — 저장하기 전에 모든 화면에서 변경 사항이 어떻게 표시되는지 확인
- 섹션별 재정의 — 다른 섹션에 영향을 주지 않고 개별 섹션을 세밀하게 조정
- 프로그래밍 방식 제어 — Checkout Sessions API (
customization.theme_config)를 통해 checkout 시점에 테마 재정의. 세션의theme_config이 대시보드 디자인보다 우선 적용됩니다. Checkout SDK의 클라이언트 측themeConfig옵션은 더 이상 사용되지 않습니다 - 테스트 디자인을 라이브로 복사 — 테스트 모드에서 완성한 디자인을 한 단계로 라이브 모드로 이동
시작하기
상인 대시보드의 왼쪽 사이드바에서 디자인으로 이동하세요. 디자인 페이지에는 네 개의 탭이 있습니다:일반 설정
일반 탭은 기본 브랜드 아이덴티티와 전역 테마를 제어합니다.
기본 구성
고급 설정
고급 설정을 확장하여 세부 제어에 접근하세요:
타이포그래피
색상 구성
Light Mode와 Dark Mode에 대해 서로 다른 색상 팔레트를 정의합니다. 각 모드는 다음을 지원합니다:테두리
미리 제작된 테마
Dodo Payments는 네 가지 선별 테마를 제공합니다. 일반 탭의 테마 드롭다운에서 하나를 선택하면 결제, 스토어프론트, 고객 포털 전반에 통합된 디자인이 즉시 적용됩니다.Dodo Pulses
기본 Dodo Payments 테마입니다. 라임색 강조는 에너지 넘치고 신선한 느낌을 주며, 깨끗한 산세리프 타이포그래피와 넉넉한 여백을 특징으로 합니다.- Light Mode
- Dark Mode
Dodo Pulses in light mode
Terminal
모노스페이스 타이포그래피와 로열 블루 강조가 있는 개발자 지향 테마입니다. 날카로운 모서리와 기술적인 미학이 개발 도구 및 API 중심 제품과 잘 어울립니다.- Light Mode
- Dark Mode
Terminal in light mode
Bumblebee
따뜻한 호박색 및 금색 강조와 둥근 현대적 스타일입니다. 대담하고 대비가 강해 프리미엄으로 보이길 원하는 소비자 대상 제품에 적합합니다.- Light Mode
- Dark Mode
Bumblebee in light mode
Bubblegum
장난기 있는 핑크 및 마젠타 강조와 완전히 둥근 모서리입니다. 크리에이티브 도구, 디자인 제품, 라이프스타일 브랜드에 잘 어울리는 현대적이고 접근성 있는 룩입니다.- Light Mode
- Dark Mode
Bubblegum in light mode
섹션별 오버라이드
각 섹션 탭(결제, 스토어프론트, 고객 포털)에는 테마 오버라이드 토글이 포함되어 있습니다. 활성화하면 그 섹션의 외관을 전역 테마와 별개로 커스터마이징할 수 있습니다.결제 탭
- 제품 정보 및 가격
- Express checkout 옵션(Apple Pay, Google Pay)
- 결제 수단 선택 및 카드 양식
- 할인 코드 입력 및 가격 내역
Storefront 탭
Customer Portal 탭
- 구독 관리
- 청구 내역
- 결제 수단
- 지갑 및 크레딧
테스트 모드에서 라이브 모드로 디자인 복사
테스트 모드와 라이브 모드는 서로 다른 디자인 구성을 유지합니다. 테스트 중에 만든 테마는 실제 고객에게 자동으로 표시되지 않습니다. 수동으로 다시 만들 필요 없이 한 단계로 테스트 모드의 디자인을 라이브 모드로 복사할 수 있습니다.1
Open Design in Test Mode
테스트 모드로 전환한 다음 Settings → Design으로 이동합니다. 저장되지 않은 변경 사항이 있다면 먼저 저장하세요. 저장된 테스트 디자인만 복사됩니다.
2
Start the Copy
Copy to Live Mode를 클릭합니다. 저장된 테마 또는 게시된 테스트 storefront가 있으면 버튼이 표시되며, 라이브 모드가 활성화되어 있어야 합니다.
3
Choose What to Copy
Theme & customizations(일반 테마와 checkout, storefront, Customer Portal 재정의) 및 Storefront details(스토어 이름, 로고, 배너)를 선택합니다. 테스트 모드에서 게시된 storefront가 없으면 Storefront details를 사용할 수 없습니다.
4
Confirm
대화상자에서 Copy to Live Mode를 클릭합니다.
관련 페이지
Checkout Features
통화, 언어, 세금, 할인 등을 포함한 checkout 기능입니다.
Overlay Checkout SDK
페이지에 모달 오버레이로 checkout을 삽입합니다.
Inline Checkout SDK
페이지 레이아웃에 checkout을 직접 삽입합니다.
Storefront
브랜드 storefront를 설정하고 관리합니다.
Customer Portal
구독 및 청구를 위한 고객 셀프서비스 포털입니다.
Multi-Brand Setup
별도의 브랜딩으로 하나의 계정에서 여러 브랜드를 운영합니다.