브랜딩과 테마: CheckoutOS 문서

CheckoutOS 확장 기능은 Shopify 결제 브랜딩을 자동으로 적용해요. 색상, 글꼴, 스타일을 추가로 조정해 브랜드 정체성과 어울리는 자연스러운 경험을 만들 수 있어요.

Dashboard → Settings → Branding에서 브랜딩 설정을 열어요.

Shopify 결제 브랜딩

CheckoutOS는 Shopify 결제 브랜딩 설정을 따라요. 먼저 Shopify Admin → Settings → Checkout에서 기본 결제 디자인을 설정한 다음 CheckoutOS 브랜딩에서 확장 기능별로 조정하세요.

브랜드 색상

모든 결제 확장 기능에서 사용할 브랜드 색상 팔레트를 지정하세요.

기본 색상

브랜드의 기본 색상은 다음에 사용돼요.

행동 유도 버튼(Accept, Add to Order)
진행률 표시줄 채우기
활성 상태 표시
링크 텍스트

색상 변수

/* CheckoutOS automatically generates these CSS variables */
--checkoutos-primary: #4F46E5;
--checkoutos-primary-hover: #4338CA;
--checkoutos-primary-light: #EEF2FF;
--checkoutos-primary-contrast: #FFFFFF;

보조 색상

보조 색상은 기본 색상을 보완해요.

Accent Color — 배지, 강조 표시, 보조 버튼
Success Color — 확인 메시지와 체크 표시
Warning Color — 긴급성 표시와 타이머

타이포그래피

기본적으로 CheckoutOS는 Shopify 결제 글꼴을 사용해요. 특정 요소에는 다른 글꼴을 적용할 수 있어요.

글꼴 설정

Heading Font — 추가 판매 제목과 확장 기능 머리말에 사용해요
Body Font — 설명과 본문에 사용해요
Button Font — 행동 유도 버튼 텍스트에 사용해요

CheckoutOS는 Google Fonts와 모든 웹 안전 글꼴을 지원해요. 맞춤 글꼴은 CSS로 불러올 수 있어요.

성능 고려 사항

맞춤 글꼴을 불러오면 결제 성능에 영향을 줄 수 있어요. 추가 네트워크 요청을 피하려면 Shopify 테마에서 이미 불러온 글꼴을 사용하는 것이 좋아요.

로고 설정

브랜드 일관성을 위해 구매 후 추가 판매 페이지에 로고를 추가하세요.

로고 업로드

로고 위치 설정

다크 모드 버전 설정

버튼 스타일

동작 버튼의 디자인을 맞춤 설정하세요.

버튼 모양

Rounded — 부드럽게 둥근 모서리(반경 8px)
Pill — 양 끝이 완전히 둥근 모양
Square — 각진 모서리(반경 0px)
Custom — 모서리 반경을 직접 지정해요

버튼 크기

Small — 공간을 적게 차지하는 작은 버튼
Medium — 균형 잡힌 크기(권장)
Large — 강조하기 좋은 눈에 잘 띄는 버튼

버튼 구성

{
  "primaryButton": {
    "backgroundColor": "#4F46E5",
    "textColor": "#FFFFFF",
    "borderRadius": "8px",
    "fontSize": "16px",
    "padding": "12px 24px",
    "hoverEffect": "darken"
  },
  "secondaryButton": {
    "backgroundColor": "transparent",
    "textColor": "#4F46E5",
    "border": "1px solid #4F46E5",
    "borderRadius": "8px"
  }
}

맞춤 CSS

고급 맞춤 설정을 위해 모든 CheckoutOS 확장 기능에 적용되는 CSS를 추가할 수 있어요.

맞춤 CSS 예시

/* Target upsell offer cards */
.checkoutos-upsell-card {
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  border: 1px solid #E5E7EB;
}

/* Customize the accept button */
.checkoutos-accept-btn {
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
}

/* Style the countdown timer */
.checkoutos-timer {
  background: linear-gradient(90deg, #EF4444, #DC2626);
  color: white;
  padding: 4px 12px;
  border-radius: 999px;
}

CSS 명시도

맞춤 CSS는 Shopify 결제 스타일보다 명시도가 낮아요. !important는 꼭 필요한 경우에만 사용하고 여러 기기에서 충분히 테스트하세요.

미리 보기와 테스트

브랜딩 변경 사항은 게시 전에 항상 미리 확인하세요.

Live Preview — 편집하면서 변경 사항을 실시간으로 확인해요
Device Preview — 데스크톱, 태블릿, 모바일 화면에서 테스트해요
Test Mode — 고객에게 영향을 주지 않고 실제 주문에서 변경 사항을 보도록 테스트 모드를 활성화해요

변경 사항 적용

모든 기기에서 미리 보기

테스트 모드 활성화

변경 사항 게시

다음 단계

첫 추가 판매 만들기

구매 후 추가 판매에 브랜드 경험을 활용해요

결제 확장 기능

브랜드 디자인을 적용한 신뢰 배지와 진행률 표시줄을 추가해요