Checkout Blocks에서 브랜딩 편집기 사용
Checkout Branding API로 구동되는 Checkout Blocks의 브랜딩 편집기를 사용하면 코드를 수정하지 않고도 체크아웃 및 계정 페이지의 미관을 사용자 지정할 수 있습니다.
브랜딩 편집기를 사용하여 모든 체크아웃 구성의 색상 및 체크아웃 요소를 편집할 수 있습니다. 브랜딩 편집기를 사용하여 체크아웃 디자인을 변경하면 감사 페이지, 주문 상태 페이지, 신규 고객 계정 페이지를 포함한 모든 체크아웃 페이지에 적용됩니다.
Shopify 관리자에서 브랜딩 편집기를 시작하려면 앱 > Checkout Blocks를 클릭한 다음 브랜딩 편집기를 클릭합니다.
체크아웃 색상 맞춤 설정
색상 섹션에서 체크아웃의 기본 색상을 맞춤 설정할 수 있습니다. 디자인을 더 세밀하게 편집하려는 경우 개별 섹션에 적용되는 색상 구성표를 최대 4개까지 맞춤 설정할 수도 있습니다. 링크와 같은 대화형 요소에 사용되는 강조 색상 및 기본/보조 버튼과 같은 요소에 사용되는 브랜드 색상을 비롯한 색상 유형을 편집할 수 있습니다.
단계:
전역 색상 맞춤 설정
Shopify 관리자에서 앱 > Checkout Blocks로 이동합니다.
브랜딩 편집기를 클릭합니다.
색상 섹션에서 전역 색상을 클릭합니다.
기존 체크아웃 색상을 재정의하려면 전역 색상 섹션에서 ⊕ 아이콘을 클릭한 다음 다음 작업 중 하나를 수행하여 원하는 색상을 선택합니다.
- 색상 선택기를 사용하여 색상을 선택합니다.
- 사용 가능한 필드에 HEX 색상 코드를 입력합니다.
저장을 클릭합니다.
색상 구성표 맞춤 설정
Shopify 관리자에서 앱 > Checkout Blocks로 이동합니다.
브랜딩 편집기를 클릭합니다.
색상 섹션에서 구성표 1, 구성표 2, 구성표 3 또는 구성표 4를 클릭하여 특정 색상 구성표를 맞춤 설정합니다.
맞춤 설정할 구성 요소를 선택하십시오.
- 기본 색상
- 양식 컨트롤
- 기본 버튼
- 보조 버튼
기준 섹션에서 맞춤 설정하려는 색상 유형 옆의 ⊕ 아이콘을 클릭한 다음 다음 작업 중 하나를 수행하여 원하는 색상을 선택합니다.
- 색상 선택기를 사용하여 색상을 선택합니다.
- 사용 가능한 필드에 HEX 색상 코드를 입력합니다.
선택 사항: 양식 컨트롤, 기본 버튼 또는 보조 버튼의 구성표를 편집하는 경우 선택 시 또는 마우스오버 시 상호 작용 동작에 대한 색상을 맞춤 설정할 수도 있습니다. 맞춤 설정하려는 색상 유형 옆의 ⊕ 아이콘을 클릭한 다음 다음 작업 중 하나를 수행하여 원하는 색상을 선택합니다.
- 색상 선택기를 사용하여 색상을 선택합니다.
- 사용 가능한 필드에 HEX 색상 코드를 입력합니다.
저장을 클릭합니다.
체크아웃 요소 맞춤 설정
브랜딩 편집기의 맞춤 설정 섹션에서 다음 체크아웃 요소를 편집할 수 있습니다.
- 파비콘: 체크아웃 중 브라우저 탭에 고객에게 표시되는 아이콘을 선택합니다.
- 전역: 모든 요소(양식 입력, 버튼, 카드)의 모서리 반경을 조정합니다.
- 머리글 및 로고: 체크아웃에서 머리글 위치를 선택하고 이동 경로, 카트 링크, 로고 표시 여부를 선택합니다.
- 기본: 배경 이미지, 테두리 너비, 색상 구성표를 포함하여 체크아웃의 기본 콘텐츠 영역에 디자인 구성표를 적용합니다.
- 주문 요약: 배경 이미지, 테두리 너비, 색상 구성표를 포함하여 고객의 주문 요약을 포함하는 체크아웃 사이드바에 디자인 구성표를 적용합니다.
- 바닥글: 체크아웃에서 바닥글 너비를 선택하고 스토어 정책 표시 여부를 선택합니다.
- 타이포그래피: 최대 3단계의 머리글에 대한 글꼴 크기, 글꼴 모음, 글꼴 두께, 크기, 커닝, 대소문자를 선택합니다.
- 버튼: 기본 버튼과 보조 버튼의 패딩, 테두리, 스타일을 선택합니다.
- 양식: 확인란, 텍스트 필드, 목록에서 선택한 옵션 등 체크아웃 양식 입력에 대한 스타일을 맞춤 설정합니다.
- 제품 썸네일: 체크아웃의 제품 이미지에 대한 테두리 및 모서리 반경 스타일을 조정합니다.
단계:
Shopify 관리자에서 앱 > Checkout Blocks로 이동합니다.
브랜딩 편집기를 클릭합니다.
맞춤 설정 섹션에서 맞춤 설정할 요소(예: 머리글 및 로고)를 클릭합니다.
사용 가능한 맞춤 설정 옵션을 사용하여 원하는 대로 체크아웃 요소를 조정합니다.
저장을 클릭합니다.
체크아웃 구성 전환
브랜딩 편집기를 열면 기본적으로 현재 활성 상태인 체크아웃 구성을 편집하게 됩니다. 하지만 브랜딩 편집기를 사용하여 편집하려는 체크아웃 구성을 변경할 수 있으며, 새 체크아웃 구성을 생성할 수도 있습니다.
활성 및 초안 체크아웃 구성 관리에 대해 자세히 알아보십시오.
단계:
Shopify 관리자에서 앱 > Checkout Blocks로 이동합니다.
브랜딩 편집기를 클릭합니다.
현재 체크아웃 구성의 이름을 클릭하여 활성 구성과 모든 초안 구성 목록이 포함된 드롭다운 메뉴를 연 다음 사용자 지정하려는 체크아웃 구성을 선택합니다.
- 편집할 기존 구성을 선택합니다.
- ⊕ 새 구성 만들기를 클릭하면 Shopify 관리자의 체크아웃 설정으로 리디렉션됩니다.
체크아웃 미리 보기
미리 보려는 체크아웃 구성을 선택한 다음 미리 보기를 클릭하면 언제든지 브랜딩 편집기에서 변경한 내용을 미리 볼 수 있습니다. 모든 변경 사항이 적용된 체크아웃 및 계정 편집기가 별도의 탭에서 시작되므로 체크아웃에 표시되는 방식을 미리 볼 수 있습니다.
단계:
Shopify 관리자에서 앱 > Checkout Blocks로 이동합니다.
브랜딩 편집기를 클릭합니다.
조정하려는 체크아웃 구성의 색상 또는 체크아웃 요소를 맞춤 설정합니다.
미리 보기를 클릭합니다.
체크아웃 구성 내보내기 및 가져오기
JSON 파일을 사용하여 체크아웃 구성을 내보내고 가져올 수 있습니다.
체크아웃 구성 내보내기:
Shopify 관리자에서 앱 > Checkout Blocks로 이동합니다.
브랜딩 편집기를 클릭합니다.
브랜딩 편집기를 사용하여 맞춤 설정이 적용된 체크아웃 구성을 선택합니다.
추가 작업 > 구성 내보내기를 클릭합니다.
체크아웃 구성이 .json 파일로 로컬 장치에 다운로드됩니다.
체크아웃 구성 가져오기:
Shopify 관리자에서 앱 > Checkout Blocks로 이동합니다.
브랜딩 편집기를 클릭합니다.
가져온 브랜딩 프로필을 적용할 체크아웃 구성을 선택합니다.
추가 작업 > 구성 가져오기를 클릭합니다.
체크아웃 브랜딩 가져오기 대화 상자에서 브랜딩 JSON 파일을 업로드합니다.
- 파일 추가를 클릭합니다.
- 장치에서 적절한 JSON 파일을 선택합니다.
- 가져오기 및 계속을 클릭합니다.
미리 로드된 맞춤 설정 구성을 검토합니다. 필요에 따라 수정합니다.
저장을 클릭합니다.
체크아웃 스타일을 기본값으로 재설정
브랜딩 편집기를 사용하여 색상 또는 체크아웃 요소를 편집하는 경우, 변경한 색상 또는 요소 옆에 있는 재설정을 클릭하여 특정 값을 기본값으로 재설정할 수 있습니다.
언제든지 전체 체크아웃 구성 브랜딩을 Shopify 기본값으로 재설정할 수 있습니다. 체크아웃 구성을 재설정하면 브랜딩 편집기의 모든 페이지에 걸쳐 모든 맞춤 설정이 지워집니다. 이 작업은 취소할 수 없습니다.
단계:
Shopify 관리자에서 앱 > Checkout Blocks로 이동합니다.
브랜딩 편집기를 클릭합니다.
재설정할 체크아웃 구성을 선택하십시오.
기본값으로 재설정을 클릭하십시오.
기본 스타일로 재설정하시겠습니까? 대화 상자에서 계속을 클릭하십시오.