접근 방법
여기서 브랜딩을 편집하려면 Shopify Plus 플랜이 필요해요. Shopify는 Plus에서만 앱이 체크아웃 브랜딩을 읽고 쓸 수 있도록 허용하므로 다른 플랜에서는 이 설정을 저장할 수 없어요. 스토어가 Plus가 아니라면 대신 Shopify 체크아웃 편집기에서 동일한 변경을 하세요: Shopify 관리자에서 Settings → Checkout → Customize.
Design system
전역 색상
- Brand – 기본 브랜드 색상이에요.
- Accent – 상호작용 요소와 강조 요소에 사용돼요.
- Decorative – 보조 장식 요소에 사용돼요.
- Success – 확인 상태예요.
- Warning – 주의 메시지예요.
- Critical – 오류와 경고예요.
- Info – 정보성 메시지예요.
표면 및 버튼 색상은 여기서 설정하지 않아요. Advanced > Color schemes에 있어요.
타이포그래피
- Font size – Base size와 나머지 타입 스케일을 파생시키는 Scale ratio를 설정하세요.
- Primary font – 일반 텍스트, 버튼, 양식 컨트롤 같은 대부분의 구성 요소에 사용돼요. Font family, Base weight, Bold weight를 선택하세요.
- Secondary font – 제목 구성 요소에 사용되며 동일한 세 가지 컨트롤이 있어요.
모서리 반경
Customizations
- Corner radius – Small, Medium, Large 또는 None(각진 모서리).
- Background – Solid 또는 None.
- Vertical padding 및 Horizontal padding.
- Show border.
버튼 색상은 색상 스킴에서 상속돼요. 스킴 값이 설정되지 않은 경우 전역 색상이 사용돼요.
양식 필드
- Corner radius
- Label position – Inside 또는 Outside.
- Show border
제품 썸네일
- Show border
- Border radius
- Fit
- Badge background color – Accent(스킴 강조 색상) 또는 Base(스킴 기본 색상).
헤더
- Layout – Placement(Top bar, Left section 또는 Right section)와 Alignment(Left, Center 또는 Right).
- Container – Padding, Color scheme, Show divider.
콘텐츠 영역
메인 영역
- Section containers – 각 섹션 주위의 배경 및 테두리 래퍼: Background, Show border, Border style, Border weight.
- Section dividers – 섹션 사이에 표시되는 선.
주문 요약
- Container – 전체 주문 요약 컨테이너에 적용되는 Color scheme.
- Section dividers – Show divider, Border style, Border weight.
- Section containers – 각 섹션 주위의 배경과 테두리: Show border, Background, Border style, Border weight, Color scheme, Corner radius, Padding, Shadow.
- Layout – Placement와 Alignment.
- Container – Show footer content, Padding, Color scheme, Show divider.
Advanced
색상 스킴
- Scheme 1 - Main area
- Scheme 2 - Supporting areas
- Buttons – 주요 결제 버튼과 보조 작업에 사용돼요. Primary button과 Secondary button은 별도로 구성되며 각각 기본 상태와 호버 상태가 있어요.
- Form controls – 텍스트 필드, 드롭다운, 선택 목록에 사용돼요.
- Base surfaces – 표면 배경, 본문 텍스트 및 보조 역할: 테두리, 강조(링크와 포커스), 장식(은은한 강조), 아이콘 색상.