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