체크아웃 스타일 맞춤 설정
온라인 스토어를 사용하여 제품을 판매하는 경우 체크아웃 및 계정 편집기에서 체크아웃 페이지의 스타일을 맞춤 설정할 수 있습니다. 회사 로고를 추가하거나 색상을 변경하거나 새 글꼴을 선택하여 비즈니스에 맞게 체크아웃을 설정할 수 있습니다.
체크아웃 페이지에 대해 선택한 일부 브랜딩은 새 고객 계정 페이지에도 적용됩니다.
이 페이지의 내용
체크아웃 및 고객 계정 스타일 사용자 지정 시 고려 사항
체크아웃 스타일을 맞춤 설정하기 전에 다음 고려 사항을 검토하십시오.
- 관리자 패널의 체크아웃 설정 섹션에 있는 구성 영역은 플랜을 선택하고 첫 제품을 생성하기 전까지는 숨겨져 있습니다.
- Shopify Plus를 사용하는 경우 Checkout Branding API를 사용하여 고급 체크아웃 브랜딩 맞춤 설정을 수행할 수 있습니다.
- 카트 및 체크아웃 스타일 맞춤 설정에 도움이 필요한 경우 Shopify 파트너를 고용할 수 있습니다. Shopify 파트너 고용에 대해 자세히 알아보십시오.
- 체크아웃 페이지에 다양한 색상과 흥미로운 요소를 추가하고 싶을 수 있지만 디자인은 단순하게 유지하는 것이 가장 좋습니다. 고객은 이 페이지에서 주문에 대한 배송 및 결제 정보를 입력하므로 고객의 주의를 분산시키거나 정보를 읽기 어렵게 만들지 않아야 합니다. 대비가 높은 색상을 선택하고 페이지의 텍스트에서 주의를 분산시키지 않는 이미지를 선택하십시오.
체크아웃 및 고객 계정 색상 팔레트 생성하기
색상 팔레트를 생성하면 체크아웃 및 계정 편집기의 여러 설정에 색상을 빠르게 재사용할 수 있습니다. 색상 팔레트에서 색상을 변경하면 해당 색상을 사용하는 모든 설정이 새 색상으로 동적 업데이트됩니다. 즉, 한 색상을 여러 번 사용할 때 16진수 코드를 기억할 필요가 없습니다.
단계:
데스크톱
Shopify 관리자에서 설정 > 체크아웃으로 이동합니다.
구성 섹션에서 사용자 지정하려는 구성 옆의 편집을 클릭합니다.
체크아웃 및 계정 편집기에서
을(를) 클릭하여 설정 사이드바에 액세스합니다.
색상 팔레트 섹션에서
+을(를) 클릭하여 팔레트에 추가할 색상을 선택합니다.선택 사항: 팔레트에서 더 이상 필요하지 않은 색상을 제거하려면 다음을 수행합니다.
- 색상을 클릭한 다음 색상 삭제를 클릭합니다.
- 체크아웃에서 삭제된 색상이 사용된 위치를 대체할 교체 색상을 선택합니다.
- 확인을 클릭합니다.
저장을 클릭합니다.
모바일
Shopify 앱에서
을(를) 탭한 후
설정을 탭합니다.
스토어 설정 섹션에서 체크아웃을 탭합니다.
구성 섹션에서 사용자 지정하려는 구성의 편집을 탭합니다.
체크아웃 및 계정 편집기에서 설정을 탭합니다.
색상 팔레트 섹션에서
+을(를) 탭하여 팔레트에 추가할 색상을 선택합니다.선택 사항: 팔레트에서 더 이상 필요하지 않은 색상을 제거하려면 다음을 수행합니다.
- 색상을 탭한 다음 색상 삭제를 탭합니다.
- 체크아웃에서 삭제된 색상이 사용된 위치를 대체할 교체 색상을 선택합니다.
- 확인을 탭합니다.
저장 또는 ✓를 탭합니다.
체크아웃 및 계정 편집기에서 색상 선택기 사용하기
체크아웃 및 계정 편집기에서 색상이 필요한 필드를 사용자 지정할 때 색상 선택기를 사용하여 원하는 색상을 선택할 수 있습니다. 색상 선택기에서 다음 방법 중 하나로 색상을 선택할 수 있습니다.
- 색상 슬라이더를 사용하여 선택기 미리 보기에 제공되는 색상의 색조를 변경합니다.
- 표준 순수 파란색인
#0000FF와 같이 특정 색상의 코드를 입력하려면 16진수 필드를 사용합니다. - 화면의 어느 위치에서나 커서를 사용하여 특정 색상을 선택하려면
을(를) 사용합니다.
- 선택기 미리 보기에 제공되는 색상의 수를 40개로 좁히려면
을(를) 사용합니다.
색상 팔레트 섹션에는 체크아웃 및 계정 편집기의 색상 팔레트에 추가한 모든 색상 견본이 표시됩니다.
체크아웃 및 계정 편집기에서 세션 중에 이전에 색상을 수동으로 선택한 경우 최근 사용 색상 견본에서도 선택할 수 있습니다.
머리글 색상 사용자 지정하기
각 체크아웃 및 고객 계정 페이지 상단의 머리글에는 스토어 이름이 표시됩니다. 해당 배너의 배경색을 변경할 수 있습니다. 브랜드와 어울리는 색상을 선택하십시오.
단계:
데스크톱
Shopify 관리자에서 설정 > 체크아웃으로 이동합니다.
구성 섹션에서 사용자 지정하려는 구성 옆의 편집을 클릭합니다.
체크아웃 및 계정 편집기에서
을(를) 클릭하여 설정 사이드바에 액세스합니다.
머리글 섹션에서 다음 색상 사용자 지정 중 하나를 수행합니다.
- 머리글의 배경색을 설정하려면 배경을 사용합니다.
- 머리글의 카트 아이콘과 링크의 색상을 설정하려면 강조색을 사용합니다.
저장을 클릭합니다.
모바일
Shopify 앱에서
을(를) 탭한 후
설정을 탭합니다.
스토어 설정 섹션에서 체크아웃을 탭합니다.
구성 섹션에서 사용자 지정하려는 구성의 편집을 탭합니다.
체크아웃 및 계정 편집기에서 설정을 탭합니다.
머리글 섹션에서 다음 색상 사용자 지정 중 하나를 수행합니다.
- 머리글의 배경색을 설정하려면 배경을 사용합니다.
- 머리글의 카트 아이콘과 링크의 색상을 설정하려면 강조색을 사용합니다.
저장 또는 ✓를 탭합니다.
체크아웃 페이지에 로고 추가하기
체크아웃 페이지에 스토어 로고를 추가할 수 있습니다. 체크아웃 페이지 배너 영역의 왼쪽, 오른쪽 또는 가운데에 로고를 정렬할 수 있습니다.
단계:
데스크톱
Shopify 관리자에서 설정 > 체크아웃으로 이동합니다.
구성 섹션에서 사용자 지정하려는 구성 옆의 편집을 클릭합니다.
체크아웃 및 계정 편집기에서
을(를) 클릭하여 설정 사이드바에 액세스합니다.
로고 섹션에서 이미지 필드를 클릭합니다.
라이브러리에서 기존 이미지를 선택하려면 라이브러리에서 선택을 클릭합니다.
선택 사항: 로고 섹션에서 다음 설정으로 로고를 조정합니다.
- 로고 사이즈(픽셀)를 선택하려면 너비를 사용합니다.
- 로고를 배너의 왼쪽, 가운데, 오른쪽 중 어디에 표시할지 선택하려면 정렬을 사용합니다.
저장을 클릭합니다.
모바일
Shopify 앱에서
을(를) 탭한 후
설정을 탭합니다.
스토어 설정 섹션에서 체크아웃을 탭합니다.
구성 섹션에서 사용자 지정하려는 구성의 편집을 탭합니다.
체크아웃 및 계정 편집기에서 설정을 탭합니다.
로고 섹션에서 이미지 필드를 탭합니다.
라이브러리에서 기존 이미지를 선택하려면 라이브러리에서 선택을 탭합니다.
선택 사항: 로고 섹션에서 다음 설정으로 로고를 조정합니다.
- 로고 사이즈(픽셀)를 선택하려면 너비를 사용합니다.
- 로고를 배너의 왼쪽, 가운데, 오른쪽 중 어디에 표시할지 선택하려면 정렬을 사용합니다.
저장 또는 ✓를 탭합니다.
메인 콘텐츠 영역에 배경 색상 추가
체크아웃 페이지의 메인 콘텐츠 영역에 배경 색상을 추가할 수 있습니다. 이 영역은 고객이 배송 및 결제 정보를 입력하는 곳이므로 배경 위에서 필드를 명확하게 읽을 수 있는지 확인하십시오.
단계:
데스크톱
Shopify 관리자에서 설정 > 체크아웃으로 이동합니다.
구성 섹션에서 사용자 지정하려는 구성 옆의 편집을 클릭합니다.
체크아웃 및 계정 편집기에서
을(를) 클릭하여 설정 사이드바에 액세스합니다.
메인 섹션에서 색상을 클릭하여 색상 선택기를 연 다음 색상을 선택하거나 16진수 코드를 입력하십시오.
저장을 클릭합니다.
모바일
Shopify 앱에서
을(를) 탭한 후
설정을 탭합니다.
스토어 설정 섹션에서 체크아웃을 탭합니다.
구성 섹션에서 사용자 지정하려는 구성의 편집을 탭합니다.
체크아웃 및 계정 편집기에서 설정을 탭합니다.
메인 섹션에서 색상을 탭하여 색상 선택기를 연 다음 색상을 선택하거나 16진수 코드를 입력하십시오.
저장 또는 ✓를 탭합니다.
양식 필드 색상 변경하기
체크아웃에서 양식 필드의 색상을 변경할 수 있습니다. 오류 메시지의 색상을 변경하여 흰색이나 투명하게 만들 수도 있습니다. 필드의 텍스트를 명확하게 읽을 수 있는지 확인하십시오.
단계:
데스크톱
Shopify 관리자에서 설정 > 체크아웃으로 이동합니다.
구성 섹션에서 사용자 지정하려는 구성 옆의 편집을 클릭합니다.
체크아웃 및 계정 편집기에서
을(를) 클릭하여 설정 사이드바에 액세스합니다.
입력 필드 섹션에서 다음 사용자 지정 중 하나를 수행합니다.
- 입력 필드의 색상을 변경하려면 입력으로 이동한 다음 투명 또는 흰색을 클릭합니다.
- 오류 메시지의 색상을 변경하려면 오류 필드를 클릭한 다음 색상을 선택합니다.
저장을 클릭합니다.
모바일
Shopify 앱에서
을(를) 탭한 후
설정을 탭합니다.
스토어 설정 섹션에서 체크아웃을 탭합니다.
구성 섹션에서 사용자 지정하려는 구성의 편집을 탭합니다.
체크아웃 및 계정 편집기에서 설정을 탭합니다.
입력 필드 섹션에서 다음 사용자 지정 중 하나를 수행합니다.
- 입력 필드의 색상을 변경하려면 입력으로 이동한 다음 투명 또는 흰색을 탭합니다.
- 오류 메시지의 색상을 변경하려면 오류 필드를 탭한 다음 색상을 선택합니다.
저장 또는 ✓를 탭합니다.
주문 요약에 배경 이미지 또는 색상 추가하기
고객이 체크아웃 페이지에서 주문 요약 표시를 클릭하면 구매하는 제품 목록이 표시됩니다. 주문 요약에 배경 이미지나 색상을 추가할 수 있습니다. 테마 편집기의 미리 보기에서 주문 요약 표시를 클릭하여 주문 요약이 만족스럽게 표시되는지 확인할 수 있습니다.
작은 이미지는 타일처럼 배경에서 세로 및 가로로 반복됩니다.
단계:
데스크톱
Shopify 관리자에서 설정 > 체크아웃으로 이동합니다.
구성 섹션에서 사용자 지정하려는 구성 옆의 편집을 클릭합니다.
체크아웃 및 계정 편집기에서
을(를) 클릭하여 설정 사이드바에 액세스합니다.
주문 요약 섹션에서 주문 요약을 클릭합니다.
배경색 또는 이미지 추가:
- 색상을 추가하려면 배경을 클릭하여 색상 선택기를 연 다음 색상을 선택하거나 16진수 코드를 입력합니다.
- 이미지를 추가하려면 이미지 > 선택을 클릭합니다. 라이브러리에서 기존 이미지를 선택하려면 라이브러리에서 선택을 클릭합니다.
저장을 클릭합니다.
모바일
Shopify 앱에서
을(를) 탭한 후
설정을 탭합니다.
스토어 설정 섹션에서 체크아웃을 탭합니다.
구성 섹션에서 사용자 지정하려는 구성의 편집을 탭합니다.
체크아웃 및 계정 편집기에서 설정을 탭합니다.
주문 요약 섹션에서 주문 요약을 탭합니다.
배경색 또는 이미지 추가:
- 색상을 추가하려면 배경을 탭하여 색상 선택기를 연 다음 색상을 선택하거나 16진수 코드를 입력합니다.
- 이미지를 추가하려면 이미지 > 선택을 탭합니다. 라이브러리에서 기존 이미지를 선택하려면 라이브러리에서 선택을 탭합니다.
저장 또는 ✓를 탭합니다.
주문 요약에서 이미지 변경 또는 제거
주문 요약에 추가한 이미지를 변경하거나 제거할 수 있습니다.
단계:
데스크톱
Shopify 관리자에서 설정 > 체크아웃으로 이동합니다.
구성 섹션에서 사용자 지정하려는 구성 옆의 편집을 클릭합니다.
체크아웃 및 계정 편집기에서
을(를) 클릭하여 설정 사이드바에 액세스합니다.
주문 요약 섹션에서 주문 요약을 클릭합니다.
바꾸려는 이미지 아래에서 변경을 클릭하여 라이브러리에서 이미지를 선택하거나 무료 이미지를 탐색합니다.
저장을 클릭합니다.
모바일
Shopify 앱에서
을(를) 탭한 후
설정을 탭합니다.
스토어 설정 섹션에서 체크아웃을 탭합니다.
구성 섹션에서 사용자 지정하려는 구성의 편집을 탭합니다.
체크아웃 및 계정 편집기에서 설정을 탭합니다.
주문 요약 섹션에서 주문 요약을 탭합니다.
바꾸려는 이미지 아래에서 변경을 탭하여 라이브러리에서 이미지를 선택하거나 무료 이미지를 탐색합니다.
저장 또는 ✓를 탭합니다.
이미지를 제거하려면 변경 > 이미지 제거를 클릭합니다. 이 작업은 Shopify에서 이미지를 삭제하지 않습니다.
체크아웃 페이지 글꼴 변경하기
글꼴 목록에서 선택하여 체크아웃 페이지를 사용자 지정할 수 있습니다.
단계:
데스크톱
Shopify 관리자에서 설정 > 체크아웃으로 이동합니다.
구성 섹션에서 사용자 지정하려는 구성 옆의 편집을 클릭합니다.
체크아웃 및 계정 편집기에서
을(를) 클릭하여 설정 사이드바에 액세스합니다.
타이포그래피 섹션에서 제목 드롭다운 메뉴 또는 본문 드롭다운 메뉴를 클릭한 다음 글꼴을 선택합니다.
저장을 클릭합니다.
모바일
Shopify 앱에서
을(를) 탭한 후
설정을 탭합니다.
스토어 설정 섹션에서 체크아웃을 탭합니다.
구성 섹션에서 사용자 지정하려는 구성의 편집을 탭합니다.
체크아웃 및 계정 편집기에서 설정을 탭합니다.
타이포그래피 섹션에서 제목 드롭다운 메뉴 또는 본문 드롭다운 메뉴를 탭한 다음 글꼴을 선택합니다.
저장 또는 ✓를 탭합니다.
체크아웃 페이지에서 버튼 및 강조 색상 변경하기
체크아웃 페이지에서 버튼 및 링크와 같은 강조색을 변경할 수 있습니다. 색상을 변경하는 경우 메인 콘텐츠 영역과 주문 요약의 배경과 대비하여 텍스트를 명확하게 읽을 수 있는지 확인하십시오.
단계:
데스크톱
Shopify 관리자에서 설정 > 체크아웃으로 이동합니다.
구성 섹션에서 사용자 지정하려는 구성 옆의 편집을 클릭합니다.
체크아웃 및 계정 편집기에서
을(를) 클릭하여 설정 사이드바에 액세스합니다.
강조색 및 버튼 섹션에서 강조색 또는 버튼 옆에 있는 색상 상자를 클릭하여 색상 선택기를 연 다음 색상을 선택하거나 16진수 코드를 입력합니다.
저장을 클릭합니다.
모바일
Shopify 앱에서
을(를) 탭한 후
설정을 탭합니다.
스토어 설정 섹션에서 체크아웃을 탭합니다.
구성 섹션에서 사용자 지정하려는 구성의 편집을 탭합니다.
체크아웃 및 계정 편집기에서 설정을 탭합니다.
강조 및 버튼 섹션에서 강조 또는 버튼 옆에 있는 색상 상자를 탭하여 색상 선택기를 연 다음 색상을 선택하거나 16진수 코드를 입력합니다.
저장 또는 ✓를 탭합니다.
체크아웃 레이아웃 변경
기본적으로 스토어의 체크아웃 레이아웃은 원페이지 체크아웃으로 설정되어 있습니다. Shopify 관리자에서 원페이지 체크아웃과 3페이지 체크아웃 간에 전환할 수 있습니다. 체크아웃 레이아웃을 변경하기 전에 원페이지 체크아웃과 3페이지 체크아웃의 차이점을 검토하세요.
체크아웃 레이아웃을 전환하면 체크아웃 및 계정 편집기의 미리 보기가 실시간으로 표시되지 않습니다. 변경 사항을 저장한 후 스토어프론트 체크아웃으로 이동하여 새 체크아웃 레이아웃을 확인하세요.
단계:
데스크톱
Shopify 관리자에서 설정 > 체크아웃으로 이동합니다.
구성 섹션에서 사용자 지정하려는 구성 옆의 편집을 클릭합니다.
체크아웃 및 계정 편집기에서 톱니바퀴 아이콘을 클릭하여 설정 사이드바에 액세스합니다.
체크아웃 레이아웃 섹션에서 현재 레이아웃을 클릭하여 체크아웃 레이아웃 옵션을 여십시오.
원페이지 체크아웃 또는 3페이지 체크아웃을 클릭하여 체크아웃 레이아웃을 설정하십시오.
저장을 클릭합니다.
모바일
Shopify 앱에서
을(를) 탭한 후
설정을 탭합니다.
스토어 설정 섹션에서 체크아웃을 탭합니다.
구성 섹션에서 사용자 지정을 탭하십시오.
체크아웃 및 계정 편집기에서 톱니바퀴 아이콘을 탭하여 설정 사이드바에 액세스하십시오.
체크아웃 레이아웃 섹션에서 원페이지 체크아웃 또는 3페이지 체크아웃을 탭하여 체크아웃 레이아웃을 설정하십시오.
저장 또는 ✓를 탭합니다.
재구매 버튼 관리
재구매 버튼은 고객이 구매한 품목을 재주문할 수 있도록 주문 상태 페이지에 표시됩니다.
단계:
Shopify 관리자에서 설정 > 체크아웃으로 이동합니다.
구성 섹션에서 맞춤 설정하려는 구성 옆의 맞춤 설정을 클릭합니다.
체크아웃 및 계정 편집기에서 설정 아이콘을 클릭하십시오.
재구매 버튼 섹션에서 버튼을 켜거나 끄십시오.
모바일 장치에 기본적으로 할인 코드 필드 표시
기본적으로 고객이 모바일 장치에서 체크아웃하면 주문 요약 및 할인 코드 필드가 숨겨집니다. 고객은 주문 요약 표시를 탭하여 전체 주문 요약 세부 정보를 펼치고 할인 코드 필드를 표시하여 주문에 할인 코드나 기프트 카드 코드를 추가할 수 있습니다.
모바일 장치에서 체크아웃 시 항상 주문 요약 및 할인 코드 필드를 표시하도록 기본 동작을 변경할 수 있습니다. 고객은 주문 요약 숨기기를 탭하여 할인 코드 필드를 숨길 수 있습니다.
이 설정에 액세스하려면 체크아웃에서 3페이지 체크아웃 레이아웃을 사용해야 합니다.
단계:
데스크톱
Shopify 관리자에서 설정 > 체크아웃으로 이동합니다.
구성 섹션에서 사용자 지정하려는 구성 옆의 편집을 클릭합니다.
체크아웃 및 계정 편집기에서 섹션 아이콘을 클릭하여 섹션 사이드바에 액세스하십시오.
정보, 배송 또는 결제 페이지에서 주문 요약을 클릭하십시오.
항상 할인 코드 필드 표시 설정을 활성화하십시오.
저장을 클릭합니다.
모바일
Shopify 앱에서
을(를) 탭한 후
설정을 탭합니다.
스토어 설정 섹션에서 체크아웃을 탭합니다.
구성 섹션에서 사용자 지정하려는 구성의 편집을 탭합니다.
체크아웃 및 계정 편집기에서 섹션을 탭하십시오.
정보, 배송 또는 결제 페이지에서 주문 요약을 탭하십시오.
항상 할인 코드 필드 표시 설정을 활성화하십시오.
저장 또는 ✓를 탭합니다.
체크아웃 페이지에 블록 추가
블록을 사용하여 사용자 지정 배너나 로열티 리워드와 같은 기능을 고객 체크아웃 환경에 추가할 수 있습니다. 체크아웃의 정보, 배송 및 결제 페이지를 사용자 지정하는 앱을 포함한 일부 체크아웃 앱은 Shopify Plus 플랜을 사용하는 스토어에서만 사용할 수 있습니다. 체크아웃에 추가할 앱을 선택할 때 체크아웃 앱 사용 가능 여부를 참조하세요.
섹션 사이드바 또는 앱 사이드바를 사용하여 페이지의 섹션에 기존 블록을 직접 추가할 수 있습니다.
앱으로 체크아웃 구성 사용자 지정에 대해 자세히 알아보세요.
섹션 사이드바를 사용하여 블록 추가
섹션 사이드바를 사용하여 설치한 앱의 블록을 현재 보고 있는 페이지에 추가할 수 있습니다. 페이지나 섹션에 설치할 수 있는 블록만 선택 가능한 옵션으로 표시됩니다.
단계:
데스크톱
모바일
Shopify 앱에서
을(를) 탭한 후
설정을 탭합니다.
스토어 설정 섹션에서 체크아웃을 탭합니다.
구성 섹션에서 사용자 지정할 체크아웃 구성의 사용자 지정을 탭하십시오.
체크아웃 및 계정 편집기에서 앱을 추가할 페이지를 선택한 다음 섹션을 탭하십시오.
앱을 추가할 섹션에서 ⊕ 블록 추가를 탭하십시오.
추가할 블록을 탭하십시오.
필요에 따라 블록을 사용자 지정하십시오.
- 블록의 위치를 재정렬하려면 섹션 목록에서 블록을 위나 아래로 끌어서 놓거나 미리 보기 창의 이동 버튼을 사용하십시오.
- 블록을 탭하여 블록 설정을 구성하십시오.
저장 또는 ✓를 탭합니다.
앱 사이드바를 사용하여 블록 추가
앱 사이드바를 사용하여 설치한 앱의 블록을 현재 보고 있는 페이지에 추가할 수 있습니다. 블록을 추가할 때 특정 블록을 설치할 수 있는 페이지만 옵션으로 표시됩니다.
체크아웃 및 계정 편집기에서 앱 사이드바 사용에 대해 자세히 알아보세요.