구매 버튼 생성하기
Shopify 관리자에서 구매 버튼 판매 채널을 추가한 후 제품 또는 컬렉션에 대한 구매 버튼을 생성할 수 있습니다.
구매 버튼을 생성한 후 자동으로 생성된 코드를 복사한 다음 버튼을 표시할 웹 페이지나 블로그 게시물에 코드를 추가합니다. 예를 들어 Wordpress 블로그나 Squarespace 웹사이트에 구매 버튼을 추가할 수 있습니다.
구매 버튼을 웹사이트에 임베드한 후에는 모양을 변경할 수 없습니다. 변경하려면 채널에서 새 버튼을 생성하고 원본 코드를 새 코드로 교체해야 합니다.
구매 버튼 사용자 지정
구매 버튼의 모양과 동작을 사용자 지정할 수 있습니다.
- 색상
- 사이즈
- 글꼴
- 버튼을 클릭했을 때 수행되는 작업
- 새 브라우저 창에서 체크아웃이 열리는지 여부
버튼을 사용자 지정하면서 변경 사항을 미리 볼 수 있습니다. 미리 보기를 클릭하여 구매 버튼의 동작을 테스트할 수 있습니다.
레이아웃 스타일
구매 버튼의 레이아웃을 선택할 수 있습니다.
| 기본 | 제품 이미지 없이 구매 버튼을 추가하려면 이 레이아웃을 선택합니다. 이미 온라인 다른 곳에 제품을 표시했지만 구매 버튼만 추가하려는 경우 이 레이아웃을 사용할 수 있습니다. |
| 클래식 | 구매 버튼 옆에 제품 이미지와 가격을 표시하려면 이 레이아웃을 선택합니다. 이 레이아웃은 블로그 게시물과 같은 빠른 제품 미리 보기에 유용합니다. |
| 전체 보기 | 구매 버튼 옆에 제품 이미지, 가격, 설명을 표시하려면 이 레이아웃을 선택합니다. 이 레이아웃은 온라인 스토어의 제품 세부 정보 페이지를 에뮬레이트합니다. |
구매 버튼 작업
구매 버튼을 생성할 때 버튼을 클릭하면 발생하는 작업을 선택할 수 있습니다.
구매 버튼이 컬렉션용인 경우 작업은 컬렉션의 각 제품에 적용됩니다.
- 카트에 제품 추가는 쇼핑 카트에 제품을 추가합니다. 고객은 쇼핑을 계속하고 카트에 다른 제품을 추가할 수 있습니다.
- 체크아웃으로 바로 이동은 고객을 체크아웃으로 바로 이동시켜 고객이 제품을 구매할 수 있도록 합니다. 고객은 주문에 다른 제품을 추가할 수 없습니다.
- 제품 세부 정보 열기 “ 제품 보기 ” 버튼이 표시됩니다. 고객이 버튼을 클릭하면 제품 설명을 보고, 사용 가능한 제품 이형을 선택하고, 제품을 카트에 추가할 수 있습니다. 제품에 제품 이미지가 여러 개 있는 경우 해당 이미지도 표시됩니다.
- 전체 보기 레이아웃에는 이미 모든 제품 세부 정보가 표시되므로 전체 보기 레이아웃을 선택하는 경우에는 이 옵션을 사용할 수 없습니다.
체크아웃이 새 브라우저 창에서 열릴지 또는 웹사이트와 동일한 탭에서 열릴지 선택할 수도 있습니다. 기본적으로 체크아웃은 새 창에서 열립니다.
구매 버튼 디자인
- 버튼 스타일에는 구매 버튼의 버튼 부분에 대한 모양, 색상, 서체가 포함됩니다.
- 레이아웃 선택하는 레이아웃 스타일에 따라 버튼 정렬, 이미지 크기, 버튼 텍스트, 글꼴, 색상, 사이즈와 같은 설정을 사용자 지정할 수 있습니다.
- 쇼핑 카트 에는 임베디드 쇼핑 카트의 텍스트 및 색상 옵션이 포함됩니다. 또한 “ 주문 메모 ” 필드에 대한 레이블을 활성화하고 사용자 지정할 수 있습니다. 주문 메모를 사용하여 주문 준비 및 배송 방법에 대한 고객의 특별 지침을 수집할 수 있습니다. 추가 정보 필드를 통해 고객에게 메시지를 전달할 수 있습니다.
- 버튼의 작업으로 카트에 제품 추가 또는 제품 세부 정보 열기를 선택한 경우에만 쇼핑 카트 설정을 편집할 수 있습니다.
- 세부 정보 팝업에는 제품 세부 정보 팝업 창에 대한 설정이 포함됩니다. 버튼 텍스트, 수량 필드 포함 여부, 배경 및 레이블에 사용되는 색상, 레이블의 글꼴 및 글꼴 크기를 사용자 지정할 수 있습니다. 버튼의 작업으로 제품 세부 정보 열기를 선택한 경우에만 이 설정을 편집할 수 있습니다.
단일 제품의 구매 버튼 생성
단일 제품에 대한 구매 버튼을 생성할 수 있습니다. 구매 버튼에는 제품의 이형 상품 중 하나 또는 전부를 포함할 수 있습니다. 구매 버튼을 생성할 때 레이아웃 스타일을 선택하고 버튼의 색상, 텍스트, 디자인 및 고객이 버튼을 클릭할 때 발생하는 작업을 사용자 지정합니다. 구매 버튼 사용자 지정에 대해 자세히 알아보십시오.
제품에 대한 구매 버튼을 생성하기 전에 Shopify 관리자에 제품을 추가하고 구매 버튼 판매 채널에서 제품을 사용 가능하도록 설정해야 합니다.
단계:
데스크톱
Shopify 관리자에서 판매 채널 > 구매 버튼으로 이동합니다.
구매 버튼 생성을 클릭합니다.
제품 구매 버튼을 클릭합니다.
카탈로그에서 제품을 선택하거나 검색을 사용하여 제품을 찾습니다. 선택을 클릭합니다.
선택 사항: 구매 버튼을 사용자 지정합니다.
- 제품에 이형이 있는 경우 모든 이형을 선택하거나 포함할 이형을 선택합니다.
- 고객이 버튼을 클릭하면 수행되는 레이아웃 스타일과 작업을 선택합니다. 버튼의 디자인을 사용자 지정할 수도 있습니다.
- 기본적으로 체크아웃은 새 창에서 열리지만 웹사이트와 동일한 브라우저 탭에서 체크아웃을 열도록 선택할 수 있습니다. 고급 설정 > 동일한 탭에서 리디렉션을 클릭합니다.
다음을 클릭합니다.
코드 복사를 클릭합니다.
구매 버튼을 표시하려는 웹 페이지의 HTML 편집기를 엽니다. HTML에 구매 버튼 코드 추가를 참조하십시오.
구매 버튼을 표시할 HTML 내에 코드를 붙여넣은 다음 변경 사항을 저장합니다.
모바일
Shopify 앱에서
아이콘을 탭합니다.판매 채널 섹션에서 구매 버튼을 탭합니다.
구매 버튼 생성을 탭합니다.
제품 구매 버튼을 탭합니다.
카탈로그에서 제품을 선택하거나 검색을 사용하여 제품을 찾은 다음 선택을 탭합니다.
선택 사항: 사용자 지정을 탭합니다.
- 제품에 여러 이형이 있는 경우 모든 이형을 선택하거나 드롭다운 목록에서 이형을 선택합니다.
- 고객이 버튼을 클릭하면 수행되는 레이아웃 스타일과 작업을 선택합니다. 버튼의 디자인을 사용자 지정할 수도 있습니다.
- 기본적으로 체크아웃은 새 창에서 열리지만 웹사이트와 동일한 브라우저 탭에서 체크아웃을 열도록 선택할 수 있습니다. 고급 설정 > 동일한 탭에서 리디렉션을 탭합니다.
완료를 탭합니다.
코드 복사를 탭합니다.
구매 버튼을 표시하려는 웹 페이지의 HTML 편집기를 엽니다. HTML에 구매 버튼 코드 추가를 참조하십시오.
구매 버튼을 표시할 HTML 내에 코드를 붙여넣은 다음 변경 사항을 저장합니다.
컬렉션의 구매 버튼 생성
컬렉션의 구매 버튼을 생성하는 것은 실제로 컬렉션의 각 제품에 대한 버튼을 생성하는 것입니다.
구매 버튼을 생성할 때 레이아웃 스타일을 선택하고 버튼의 색상, 텍스트, 디자인 및 고객이 버튼을 클릭할 때 발생하는 작업을 사용자 지정합니다. 구매 버튼 사용자 지정에 대해 자세히 알아보십시오.
컬렉션의 구매 버튼을 생성하기 전에 다음을 완료해야 합니다.
단계:
데스크톱
Shopify 관리자에서 판매 채널 > 구매 버튼으로 이동합니다.
구매 버튼 생성을 클릭합니다.
컬렉션 구매 버튼을 클릭합니다.
컬렉션을 선택하거나 검색을 사용하여 컬렉션을 찾습니다. 선택을 클릭합니다.
선택 사항: 구매 버튼을 사용자 지정합니다.
- 고객이 버튼을 클릭할 때 수행되는 작업을 선택합니다. 버튼 디자인을 맞춤 설정할 수도 있습니다.
- 기본적으로 체크아웃은 새 창에서 열리지만 웹사이트와 동일한 브라우저 탭에서 체크아웃을 열도록 선택할 수 있습니다. 고급 설정 > 동일한 탭에서 리디렉션을 클릭합니다.
다음을 클릭합니다.
코드 복사를 클릭합니다.
구매 버튼을 표시하려는 웹 페이지의 HTML 편집기를 엽니다. HTML에 구매 버튼 코드 추가를 참조하십시오.
구매 버튼을 표시할 HTML 내에 코드를 붙여넣은 다음 변경 사항을 저장합니다.
모바일
Shopify 앱에서
아이콘을 탭합니다.판매 채널 섹션에서 구매 버튼을 탭합니다.
구매 버튼 생성을 탭합니다.
컬렉션 구매 버튼을 탭합니다.
컬렉션을 선택하거나 검색을 사용하여 컬렉션을 찾은 다음 선택을 탭합니다.
선택 사항: 사용자 지정을 탭합니다.
- 고객이 버튼을 클릭할 때 수행되는 작업을 선택합니다. 버튼 디자인을 맞춤 설정할 수도 있습니다.
- 기본적으로 체크아웃은 새 창에서 열리지만 웹사이트와 동일한 브라우저 탭에서 체크아웃을 열도록 선택할 수 있습니다. 고급 설정 > 동일한 탭에서 리디렉션을 탭합니다.
완료를 탭합니다.
코드 복사를 탭합니다.
구매 버튼을 표시하려는 웹 페이지의 HTML 편집기를 엽니다. HTML에 구매 버튼 코드 추가를 참조하십시오.
구매 버튼을 표시할 HTML 내에 코드를 붙여넣은 다음 변경 사항을 저장합니다.