쇼피파이 구매 버튼 활용법

Shopify를 사용하면 본격적인 온라인 스토어를 만들지 않고도 온라인 판매를 할 수 있습니다.

구매 버튼을 사용하면 블로그, 포트폴리오, 소셜 미디어 계정 등 어떤 웹페이지든 수익화할 수 있습니다.

이 글에서 구매 버튼을 모든 유형의 웹사이트에 임베드하여 방문자에게 제품 구매 옵션을 제공하는 방법을 알아보세요.

구매 버튼이란 무엇인가요?

구매 버튼을 사용하면 모든 유형의 웹사이트에 결제 옵션을 생성하고 임베드할 수 있어, 고객이 방문 중인 페이지에서 바로 제품을 구매할 수 있습니다.

Shopify는 제품을 임베드하고 표시하는 데 필요한 코드를 생성하므로, 버튼을 간단하게 설정할 수 있고 모바일 친화적이며 안전합니다.

구매 버튼과 함께 표시되는 색상 구성, 제품 세부 정보, 제품 이미지를 페이지 스타일에 맞게 사용자 정의할 수 있습니다.

Shopify 구매 버튼에 대해 자세히 알아보기

구매 버튼 시작하기: 3단계

1. Shopify 스토어에 구매 버튼 판매 채널 추가하기
2. 구매 버튼 만들기
3. 웹사이트 HTML에 구매 버튼 임베드 코드 추가하기

1. Shopify 스토어에 구매 버튼 판매 채널 추가하기

먼저 Shopify에 로그인하세요. 왼쪽 메뉴의 판매 채널 아래에 구매 버튼이 보이면, 2단계로 건너뛸 수 있습니다.

데스크탑에서

1. Shopify 앱 스토어의 구매 버튼 판매 채널 페이지로 이동하세요.

2. 앱을 설치하세요

3. 앱을 관리자 내비게이션에 고정하세요. (선택 사항)

구매 버튼을 고정하지 않았다면, 판매 채널을 클릭한 후 설치된 채널 아래에서 구매 버튼을 다시 찾을 수 있습니다.

모바일

• 모바일 기기에서 Shopify 앱을 열고 하단 메뉴의 스토어를 선택하세요.
• iPhone에서는 판매 채널 옆의 채널 추가 버튼을, Android에서는 + 버튼을 선택하세요.
• 구매 버튼을 선택한 후 구매 버튼 추가를 탭하세요.

2. 구매 버튼 만들기

구매 버튼 판매 채널을 추가하면 이제 구매 버튼을 만들 준비가 되었다는 것입니다.

구매 버튼 탭에서 구매 버튼 생성하기를 클릭하세요.

단일 제품 또는 전체 제품 컬렉션에 대한 구매 버튼을 만들 수 있습니다. 다음 화면에서 선호하는 옵션을 선택하세요.

옵션을 선택한 후, 구매 버튼을 만들 제품을 선택하세요.

선택을 완료하면 구매 버튼 편집기로 이동하여 구매 버튼의 모양을 사용자 정의할 수 있습니다.

구매 버튼 사용자 정의 방법

구매 버튼 편집기에서는 왼쪽에 여러 옵션이 나열되어 있어 구매 버튼의 모양과 느낌을 사용자 정의할 수 있습니다. 오른쪽에서는 구매 버튼이 어떻게 보일지 미리 볼 수 있습니다.

왼쪽의 옵션을 원하는 대로 조정하세요. 미리보기가 자동으로 업데이트되므로, 구매 버튼을 만드는 동안 어떤 모습이 될지 미리 확인해 볼 수 있습니다. 편집기 상단 중앙에 있는 데스크탑 또는 모바일 아이콘을 클릭하면 데스크탑 및 모바일 화면에서 구매 버튼이 어떻게 보일지 미리 확인할 수 있습니다.

사용자 정의할 수 있는 옵션은 다음과 같습니다.

• 제품 이형 상품: 구매 버튼을 통해 구매할 수 있는 제품 이형 상품을 선택하세요. 기본적으로 모든 옵션이 선택되어 있습니다.
• 레이아웃 스타일: “기본”, “클래식”, “전체 보기” 중에서 선택하세요. 오른쪽의 “레이아웃” 드롭다운에서 각 레이아웃을 선택할 때마다 미리보기를 볼 수 있습니다.
• 클릭 시 작업: "카트에 제품을 추가", "바로 결제", "제품 세부 정보 열기" 중에서 선택하세요. "카트에 제품을 추가" 옵션은 화면 오른쪽에 장바구니 위젯을 생성합니다. "바로 결제" 옵션은 사용자를 결제로 직접 이동시키는 구매 버튼을 생성합니다. 이 옵션을 사용하면 고객이 장바구니에 한 개 이상의 항목을 추가할 수 없습니다. "제품 세부 정보 열기" 옵션은 제품 정보와 장바구니 추가 버튼이 포함된 팝업을 여는 보기 제품 버튼을 생성합니다.
• 버튼 스타일: 여기에서 구매 버튼의 색상, 글꼴, 크기 및 모서리 모양을 조정할 수 있습니다.
• 레이아웃: 레이아웃 메뉴를 통해 버튼의 레이아웃을 세부적으로 조정할 수 있습니다. 글꼴 색상, 버튼 텍스트, 타이포그래피 설정을 사용자 정의할 수 있습니다.
• 쇼핑카트: 여기에서 장바구니 위젯의 설정을 조정할 수 있으며, 복사 및 색상도 변경할 수 있습니다. "바로 결제" 레이아웃을 사용하는 경우 장바구니 위젯이 없기 때문에 이 옵션은 비활성화됩니다.
• 상세 팝업: 클릭 시 작업에서 "제품 세부 정보 열기"를 선택하면 이 섹션에서 팝업의 텍스트, 색상 및 타이포그래피 옵션을 사용자 정의할 수 있습니다.
• 고급 설정: 여기에서 사용자의 결제 방식을 조정할 수 있습니다. "팝업 창 열기"(주문이 완료되면 닫히는 팝업 결제 생성) 또는 "동일한 탭에서 리디렉션"(사용자를 브라우저 창 내에서 Shopify 결제 페이지로 이동시키고 거래가 완료되면 다시 페이지로 돌아오게 함) 중에서 선택할 수 있습니다.

이 설정을 조정하더라도 이미 임베드된 구매 버튼에는 영향을 미치지 않습니다.

디자인이 마음에 들면 오른쪽 상단 코너의 다음 버튼을 클릭하세요.

3. 웹사이트 HTML에 구매 버튼 임베드 코드 추가하기

다음 버튼을 클릭하면 구매 버튼의 임베드 코드가 자동으로 생성됩니다. 웹페이지에 임베드할 준비가 되었다면 코드 복사 버튼을 클릭하세요.

여기서 복사한 코드는 웹페이지의 HTML에 붙여 넣을 수 있으며, Shopify 관리자와 직접 연결되는 구매 버튼과 장바구니를 생성하여 Shopify 관리자 페이지 내에서 어떤 웹페이지에서든 주문을 관리하고 처리할 수 있게 해줍니다.

임베드 코드를 추가하는 과정은 버튼의 표시 방식, 사용하는 웹사이트 빌더 또는 플랫폼에서 사용하는 테마에 따라 약간 다를 수 있습니다.

Shopify 구매 버튼 스크립트 태그 추가하기

일부 웹사이트 빌더에서는 script 태그를 헤더에 별도로 붙여 넣고, 나머지 코드는 페이지 본문에 구매 버튼이 나타나길 원하는 위치에 붙여 넣어야 할 수 있습니다.

이를 위해서는 구매 버튼 임베드 코드에서 script 요소를 div 요소와 분리해야 합니다.

코드의 상단에는 다음과 비슷한 div 요소가 있습니다.

<div id="product-component-1655929612938"></div>

스크립트 요소는 임베드 코드의 나머지를 구성하며, script type="text/javascript"로 시작하고 /script로 끝납니다.

script 요소를 전체적으로 복사하여 웹사이트 페이지 헤더에 붙여 넣습니다.

그런 다음 Shopify 구매 버튼을 추가할 페이지의 페이지 편집기를 엽니다. div 요소를 페이지의 원하는 위치에 붙여 넣습니다.

구매 버튼을 사용하여 모든 웹사이트에 전자상거래 기능 추가하기

구매 버튼은 판매자가 고객이 있는 곳에서 만날 수 있도록 도와줍니다. 고객을 다른 페이지로 보내지 않고 직접 판매하는 것은 마찰을 줄이고 판매를 증가시킬 수 있습니다.

블로거, 아티스트, 작가, 디자이너, 팟캐스터, 인플루언서 및 자신의 작업을 수익화하려는 모든 사람에게 구매 버튼은 새로운 웹사이트를 구축하지 않고도 Shopify를 사용할 수 있는 간편한 방법입니다.