Checkout Blocks의 브랜딩 편집기 사용

Checkout Branding API로 구동되는 Checkout Blocks의 브랜딩 편집기를 사용하면 코드를 수정하지 않고도 결제 및 계정 페이지의 미적 감각을 맞춤 설정할 수 있습니다.

브랜딩 편집기를 사용하여 모든 결제 구성의 색상과 결제 요소를 편집할 수 있습니다. 브랜딩 편집기를 사용하여 결제 디자인에 적용하는 변경 사항은 감사 페이지, 주문 상태 페이지, 새 고객 계정 페이지를 포함한 모든 결제 페이지에 적용됩니다.

Shopify 관리자에서 브랜딩 편집기를 실행하려면 앱 > Checkout Blocks를 클릭한 다음 브랜딩 편집기를 클릭합니다.

이 페이지의 정보

결제 색상 맞춤 설정

색상 섹션에서 결제의 기본 색상을 맞춤 설정할 수 있습니다. 디자인을 보다 세부적으로 편집하려는 경우 개별 섹션에 적용되는 색상 구성표를 최대 4개까지 맞춤 설정할 수도 있습니다. 강조 색상(링크 등 대화형 요소의 경우) 및 브랜드 색상(기본 버튼 및 보조 버튼 등의 요소에 사용) 등의 색상 유형을 편집할 수 있습니다.

단계:

Customize global colors

Shopify 관리자에서 앱 > Checkout Blocks를 클릭합니다.
브랜딩 편집기를 클릭합니다.
색상 섹션에서 글로벌 색상을 클릭합니다.
기존 결제 색상을 재정의하려면 글로벌 색상 섹션에서 ⊕ 아이콘을 클릭한 후 다음 작업 중 하나를 수행하여 원하는 색상을 선택합니다.
- 색상 선택기를 사용하여 색상을 선택합니다.
- 사용 가능한 필드에 HEX 색상 코드를 입력합니다.
저장을 클릭합니다.

Customize color schemes

Shopify 관리자에서 앱 > Checkout Blocks를 클릭합니다.
브랜딩 편집기를 클릭합니다.
색상 섹션에서 구성표 1, 구성표 2, 구성표 3 또는 구성표 4를 클릭하여 특정 색상 구성표를 맞춤 설정합니다.
맞춤 설정하려는 다음 구성 요소 중 하나를 선택합니다.
- 주요 색상
- 양식 컨트롤
- 기본 버튼
- 보조 버튼
기본 섹션에서 맞춤 설정하려는 색상 유형 옆에 있는 ⊕ 아이콘을 클릭한 후 다음 작업 중 하나를 수행하여 원하는 색상을 선택합니다.
- 색상 선택기를 사용하여 색상을 선택합니다.
- 사용 가능한 필드에 HEX 색상 코드를 입력합니다.
선택 사항: 양식 컨트롤, 기본 버튼 또는 보조 버튼에 대한 구성표를 편집하는 경우 선택 시 또는 마우스 호버 시 상호 작용 동작의 색상을 맞춤 설정할 수도 있습니다. 맞춤 설정하려는 색상 유형 옆에 있는 ⊕ 아이콘을 클릭한 후 다음 작업 중 하나를 수행하여 원하는 색상을 선택합니다.
- 색상 선택기를 사용하여 색상을 선택합니다.
- 사용 가능한 필드에 HEX 색상 코드를 입력합니다.
저장을 클릭합니다.

결제 요소 맞춤 설정

브랜딩 편집기의 맞춤 설정 섹션에서 다음과 같은 결제 요소를 편집할 수 있습니다.

Favicon: 결제 중 브라우저 탭에서 고객에게 표시할 아이콘을 선택합니다.
글로벌: 모든 요소(양식 입력, 버튼, 카드)의 모서리 반경을 조정합니다.
머리글 및 로고: 이동 경로, 카트 링크, 로고를 표시할지 여부와 결제 시 머리글 위치를 선택합니다.
주요: 배경 이미지, 테두리 너비, 색상 구성표 등의 디자인 체계를 결제의 주요 콘텐츠 영역에 적용합니다.
주문 요약: 배경 이미지, 테두리 너비, 색상 구성표 등의 디자인 체계를 고객의 주문 요약이 포함된 결제의 사이드바에 적용합니다.
바닥글: 스토어 정책을 표시할지 여부와 결제 시 바닥글 너비를 선택합니다.
타이포그래피: 최대 3단계의 머리글에 대해 글꼴 크기, 글꼴 패밀리 및 글꼴 두께, 크기, 커닝, 대소문자를 선택합니다.
버튼: 기본 및 보조 버튼의 패딩, 테두리, 스타일을 선택합니다.
양식: 확인란, 텍스트 필드, 목록에서 선택한 옵션 등 결제 양식 입력에 대한 스타일을 맞춤 설정합니다.
제품 썸네일: 결제 시 제품 이미지의 테두리 및 모서리 반경 스타일을 조정합니다.

단계:

Shopify 관리자에서 앱 > Checkout Blocks를 클릭합니다.
브랜딩 편집기를 클릭합니다.
맞춤 설정 섹션에서 머리글 및 로고와 같이 맞춤 설정하려는 요소를 클릭합니다.
사용 가능한 맞춤 설정 옵션을 사용하여 원하는 대로 결제 요소를 조정합니다.
저장을 클릭합니다.

결제 구성 전환

브랜딩 편집기를 열면 기본적으로 현재 실시간인 결제 구성을 편집하게 됩니다. 그러나 브랜딩 편집기를 사용하여 편집하려는 결제 구성을 변경할 수 있을 뿐만 아니라 새 결제 구성도 생성할 수 있습니다.

실시간 및 초안 결제 구성 관리에 대해 자세히 알아보세요.

단계:

Shopify 관리자에서 앱 > Checkout Blocks를 클릭합니다.
브랜딩 편집기를 클릭합니다.
현재 결제 구성의 이름을 클릭하여 실시간 구성과 초안 구성 목록이 포함된 드롭다운 메뉴를 연 다음 맞춤 설정하려는 결제 구성을 선택합니다.
- 편집하려는 기존 구성을 선택합니다.
- ⊕ 새 구성 생성을 클릭하면 Shopify 관리자의 결제 설정으로 리디렉션됩니다.

결제 미리 보기

미리 보려는 결제 구성을 선택한 다음 미리 보기를 클릭하여 언제든지 브랜딩 편집기에서 변경한 사항을 미리 볼 수 있습니다. 결제 및 계정 편집기는 모든 변경 사항이 적용된 별도의 탭에서 실행되므로 결제 시 어떻게 표시되는지 미리 볼 수 있습니다.

단계:

Shopify 관리자에서 앱 > Checkout Blocks를 클릭합니다.
브랜딩 편집기를 클릭합니다.
조정하려는 결제 구성의 색상이나 결제 요소를 맞춤 설정합니다.
미리 보기를 클릭합니다.

결제 구성 내보내기 및 가져오기

JSON 파일을 사용하여 결제 구성을 내보내고 가져올 수 있습니다.

결제 구성 내보내기:

Shopify 관리자에서 앱 > Checkout Blocks를 클릭합니다.
브랜딩 편집기를 클릭합니다.
브랜딩 편집기를 사용하여 맞춤 설정이 적용된 결제 구성을 선택합니다.
기타 작업 > 구성 내보내기를 클릭합니다.

결제 구성이 로컬 장치에 .json으로 다운로드됩니다.

결제 구성 가져오기:

Shopify 관리자에서 앱 > Checkout Blocks를 클릭합니다.
브랜딩 편집기를 클릭합니다.
가져온 브랜딩 프로필을 적용하려는 결제 구성을 선택합니다.
기타 작업 > 구성 가져오기를 클릭합니다.
결제 브랜딩 가져오기 대화 상자에서 브랜딩 JSON 파일을 업로드합니다.
1. 파일 추가를 클릭합니다.
2. 장치에서 적절한 JSON 파일을 선택합니다.
3. 가져오기 및 계속을 클릭합니다.
미리 로드된 맞춤 설정 구성을 검토합니다. 필요에 따라 수정합니다.
저장을 클릭합니다.

결제 스타일을 기본값으로 재설정

브랜딩 편집기를 사용하여 색상이나 결제 요소를 편집할 때, 변경한 색상이나 요소 옆의 재설정을 클릭하여 특정 값을 다시 기본값으로 재설정할 수 있습니다.

언제든지 전체 결제 구성 브랜딩을 Shopify 기본값으로 재설정할 수 있습니다. 결제 구성을 재설정하면 브랜딩 편집기의 모든 페이지에서 모든 맞춤 설정이 지워집니다. 이 작업은 취소할 수 없습니다.

단계:

Shopify 관리자에서 앱 > Checkout Blocks를 클릭합니다.
브랜딩 편집기를 클릭합니다.
재설정하려는 결제 구성을 선택합니다.
기본값으로 재설정을 클릭합니다.
기본 스타일로 재설정하시겠습니까? 대화 상자에서 계속을 클릭합니다.