Shopify 구매 버튼: 내 웹사이트에 Shopify 추가하는 방법

Shopify 구매 버튼을 사용하면 WordPress, Squarespace, Wix 등 어떤 웹사이트와도 Shopify의 전자상거래 도구를 완벽하게 통합할 수 있습니다.

Shopify는 본격적인 전자상거래 사업만을 위한 플랫폼이 아닙니다. 블로거, 아티스트, 작가, 디자이너, 팟캐스터, 인플루언서 등 자신의 프로젝트를 수익화하고자 하는 누구나 온라인 판매를 통해 혜택을 누릴 수 있습니다.

하지만 온라인 상점을 설정하는 데는 시간이 걸리며, 웹 트래픽을 다른 페이지로 리디렉션하는 것은 체크아웃 과정에 마찰을 추가하여 판매에 부정적인 영향을 미칠 수 있습니다. Shopify 구매 버튼이 해결책입니다!

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

먼저 Shopify 스토어에 로그인하세요. 왼쪽 메뉴의 판매 채널 아래에 구매 버튼이 나열되어 있다면, 이미 판매 채널이 추가된 것이므로 2단계로 건너뛰어도 됩니다.

데스크탑에서

1. Shopify 앱 스토어의 구매 버튼 판매 채널 페이지로 이동하세요 (또는 설정 > Shopify 앱 스토어 방문으로 가서 구매 버튼을 검색할 수 있습니다).
2. 앱 추가를 클릭한 다음, 다음 화면에서 판매 채널 추가를 클릭하세요.

페이지가 새로 고쳐지면, 왼쪽 메뉴의 판매 채널 아래에 구매 버튼이 나열되어 있어야 합니다. 앞으로 쉽게 접근할 수 있도록 이 채널을 내비게이션에 고정하세요.

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

모바일에서

1. 모바일 기기에서 Shopify 앱을 열고 하단 메뉴에서 스토어를 선택하세요.
2. 판매 채널 옆에서 채널 추가(iPhone) 또는 + (Android)를 선택하세요.
3. 옵션 목록에서 구매 버튼을 선택한 후 구매 버튼 추가를 탭하세요.

2. 구매 버튼 만들기

구매 버튼 판매 채널을 추가한 후, 이제 구매 버튼을 만들 준비가 되었습니다. 구매 버튼 페이지로 이동하려면 구매 버튼을 클릭하세요(내비게이션에 고정했다면) 또는 설정 > 앱 및 판매 채널 > 구매 버튼으로 가세요.

그곳에서 구매 버튼 만들기를 클릭하세요.

단일 제품 또는 전체 제품 컬렉션에 대한 구매 버튼을 만들 수 있습니다. 다음 화면에서 선호하는 옵션을 선택하라는 메시지가 표시됩니다. 원하는 옵션을 클릭한 후, 구매 버튼을 만들기 위해 사용할 제품 또는 컬렉션을 검색하세요.

체크박스가 선택되어 있는지 확인한 후 선택을 클릭하세요.

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

구매 버튼 사용자 정의 방법

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

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

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

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

이 설정을 조정하더라도 이미 임베드된 구매 버튼에는 영향을 미치지 않습니다. 따라서 다음 단계로 진행하기 전에 구매 버튼을 원하는 대로 조정하는 것이 좋습니다.

 

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

다음 버튼을 클릭하면 구매 버튼의 임베드 코드가 자동으로 생성됩니다. 웹페이지에 임베드할 준비가 되었다면 복사 코드 버튼을 클릭하고, 구매 버튼 편집기로 돌아가서 조정하고 싶다면 계속 사용자 정의 버튼을 클릭하세요.

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

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

다음은 Shopify 구매 버튼을 임베드할 수 있는 일반적인 위치와 그에 따라 따라야 할 단계입니다.

Shopify 스토어의 랜딩 페이지나 블로그 포스트에 임베드 코드 추가하기

Shopify 스토어에는 이미 제품 페이지와 장바구니가 내장되어 있지만, 때때로 페이지나 블로그 포스트에 구매 버튼을 직접 추가하여 편의성을 높이고 싶을 수 있습니다.

예를 들어, 새로 출시된 제품에 대한 블로그 포스트를 작성하는 경우, 독자들이 별도의 페이지로 링크되는 대신 포스트에서 직접 구매할 수 있는 쉬운 방법을 제공하고 싶을 수 있습니다.

이런 경우에는 다음 단계를 따르세요.

1. Shopify 관리자에서 온라인 스토어 > 블로그 포스트 또는 온라인 스토어 > 페이지로 이동하세요(블로그 포스트에 추가하는 경우와 페이지에 추가하는 경우에 따라 다름).
2. 구매 버튼을 추가할 블로그 포스트나 페이지를 선택하세요.
3. 내용 창에서 <> 버튼을 선택하여 편집 보기에서 HTML 보기로 전환하세요.

1. 이전에 복사한 임베드 코드를 HTML 편집기에서 원하는 위치에 붙여넣고 저장하세요.

페이지나 블로그 포스트를 저장하면 구매 버튼이 페이지에 추가됩니다. 게시하지 않고도 어떻게 보이는지 확인하려면 페이지 편집기 오른쪽 상단에서 미리보기(페이지에 추가하는 경우 페이지 보기)를 선택하세요.

Squarespace 웹사이트에 구매 버튼 추가하기

Squarespace에서는 개별 포스트나 홈페이지 메뉴에 구매 버튼을 추가할 수 있습니다. Squarespace 사이트에 구매 버튼을 추가하려면

1. Squarespace 대시보드에 로그인하고 구매 버튼을 추가할 페이지를 엽니다.
2. 구매 버튼이 나타나길 원하는 페이지 요소의 페이지 내용 영역 위에 마우스를 올리고 편집을 클릭합니다.
3. 임베드 코드를 추가할 위치를 선택합니다.
4. 콘텐츠 블록 메뉴에서 더 보기 섹션 아래의 코드를 선택합니다.
5. 상단 오른쪽 드롭다운 메뉴에서 HTML이 선택되어 있는지 확인한 후, 구매 버튼 임베드 코드를 코드 필드에 붙여넣습니다.
6. 적용을 클릭합니다.

일부 맞춤 Squarespace 테마는 사용자 정의를 위해 HTML에 대한 더 고급 지식이 필요할 수 있습니다. 이런 경우에는 개발자에게 직접 도움을 요청하는 것이 좋습니다.

WordPress 블로그에 구매 버튼 추가하기

WordPress.org 사이트의 포스트에 구매 버튼을 추가하려면

1. WordPress 대시보드에서 포스트로 이동하여 구매 버튼을 추가할 포스트를 선택합니다.
2. 사용 중인 WordPress 편집기 버전에 따라 다음 단계 중 하나를 완료합니다.
   1. Classic Editor를 사용하는 경우, 편집기에서 텍스트 탭을 클릭하여 비주얼 보기에서 텍스트 보기로 전환합니다.
   2. Block Editor를 사용하는 경우, + 버튼을 클릭한 후 사용자 정의 HTML을 검색하여 선택합니다.
3. 구매 버튼 임베드 코드를 원하는 위치에 붙여넣습니다.
4. 원하는 작업에 따라 초안 저장, 미리보기, 또는 게시를 클릭합니다.

구매 버튼 임베드 코드를 WordPress 메뉴에 추가하려면 다음 단계를 완료하세요.

1. WordPress 대시보드에서 외모를 클릭합니다.
2. 사용자 정의를 선택하여 테마 편집기를 열고 위젯을 선택합니다.
3. 구매 버튼을 추가할 영역을 선택합니다.
4. 위젯 추가를 클릭한 후 텍스트를 선택합니다.
5. 구매 버튼 임베드 코드를 붙여넣습니다.
6. 저장 및 게시를 클릭합니다.

Shopify 구매 버튼은 WordPress.org 플랫폼과 호환되지만, HTML 사용자 정의 제한으로 인해 WordPress.com과는 호환되지 않습니다.

Wix에 구매 버튼 추가하기

Wix 사이트에 Shopify 구매 버튼을 추가하려면 다음 단계를 따르세요.

1. Wix 대시보드에서 내 사이트 페이지에서 구매 버튼을 추가할 사이트를 선택하고 사이트 편집을 선택합니다.
2. Wix 웹사이트 편집기에서 +를 클릭한 다음 더 보기를 선택합니다. HTML 코드를 선택합니다. 이렇게 하면 페이지에 HTML 코드 위젯이 추가됩니다.
3. 코드 입력을 클릭합니다. HTML 설정 팝업에서 구매 버튼 임베드 코드를 여기에 코드를 추가하세요 필드에 붙여넣습니다.
4. 적용을 클릭합니다.
5. HTML 코드 위젯의 크기를 원하는 대로 조정합니다. 구매 버튼에 장바구니가 포함된 경우 장바구니 탭이 보이도록 하는 것을 잊지 마세요.
6. 조정이 완료되면 저장을 클릭합니다.

여러 제품에 대한 구매 버튼을 임베드하려면 단일 제품의 구매 버튼보다는 컬렉션 구매 버튼을 임베드하는 것이 좋습니다. 여러 단일 제품 구매 버튼을 임베드하면 방문자는 각 제품에 대해 별도의 장바구니를 보게 됩니다.

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

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

이를 위해서는 구매 버튼 임베드 코드에서 <script> 요소를 <div> 요소와 분리해야 합니다. 코드의 상단에는 <div></div>와 같은 <div> 요소가 있습니다.

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

이 요소들을 분리한 후에는 다음 단계를 따르세요.

1. 구매 버튼을 임베드할 웹사이트의 페이지 헤더를 엽니다.
2. <script> 요소를 전체적으로 복사하여 웹사이트 페이지 헤더에 붙여넣습니다.
3. 변경 사항을 저장합니다.
4. 이제 Shopify 구매 버튼을 추가할 페이지의 페이지 편집기를 엽니다.
5. <div> 요소를 페이지의 원하는 위치에 복사하여 붙여넣습니다.
6. 변경 사항을 저장합니다.

Shopify 구매 버튼으로 모든 웹사이트에 전자상거래 추가하기

Shopify 구매 버튼은 판매자가 고객이 있는 곳에서 만날 수 있도록 도와줍니다. 페이지나 플랫폼에 관계없이 고객에게 직접 판매하는 편리함은 마찰을 줄이고 판매를 증가시킬 수 있습니다.

스토어 소유자에게는 블로그 페이지에 전략적으로 배치된 구매 버튼이 고객이 현재 보고 있는 페이지를 떠나지 않고도 제품을 쉽게 구매할 수 있는 방법을 제공합니다.

블로거, 아티스트, 작가, 디자이너, 팟캐스터, 인플루언서 및 수익화하려는 모든 사람에게 Shopify 구매 버튼은 새로운 웹사이트를 구축하지 않고도 Shopify의 전자상거래 플랫폼을 활용할 수 있는 쉬운 방법을 제공합니다.

사용자 정의 가능한 스타일, 색상 및 기능을 갖춘 Shopify 구매 버튼은 어떤 페이지나 웹사이트를 완전한 온라인 상점으로 변환할 수 있게 해줍니다.

Shopify의 무료 체험을 시작하세요. 신용카드는 필요 없습니다!