HTML에 구매 버튼 코드 추가
이 페이지는 Apr 19, 2024에 인쇄되었습니다. 최신 버전은 https://help.shopify.com/ko/manual/online-sales-channels/buy-button/add-embed-code에서 확인하십시오.
Shopify Admin에서 구매 버튼을 생성했으면 판매자의 웹사이트 또는 블로그에 추가할 수 있습니다.
웹사이트의 소스 HTML에 임베드 코드를 넣는 과정은 구매 버튼과 카트가 표시되는 방식 및 위치에 따라 다르고, 게시할 플랫폼과 해당 플랫폼에서 사용 중인 테마에 따라서도 달라집니다.
WordPress에 임베드 코드 추가하기
WordPress 사이트에서 게시물, 페이지, 템플릿에 임베드 코드를 추가할 수 있습니다.
Wordpress 게시물이나 페이지에 임베드 코드 추가
- Shopify에서 구매 버튼을 생성하고 임베드 코드 대화 상자에서 임베드 코드를 복사하거나 클립보드에 임베드 코드 복사를 클릭합니다.
- WordPress 대시보드에서 게시물이나 페이지로 이동합니다.
- 게시물 또는 페이지를 새로 생성하거나 기존 파일을 편집합니다.
- 블록 편집기에서 + 버튼을 클릭하고 사용자 지정 HTML을 검색한 후 사용자 지정 HTML 블록을 클릭하여 삽입합니다.
- 사용자 지정 HTML 블록 내 텍스트 필드에 임베드 코드를 붙여 넣습니다.
-
선택 사항: 사용자 지정 HTML 블록을 이동하거나 구매 버튼이 어떻게 표시되는지 미리 볼 수 있습니다.
- 사용자 지정 HTML 블록을 이동하려면 블록 툴바에서 화살표 버튼을 클릭하거나 블록을 새 위치로 끌어서 놓습니다.
- 구매 버튼을 미리 보려면 블록 툴바에서 미리 보기를 클릭합니다.
작업을 마치면 게시물이나 페이지의 초안 저장, 미리 보기 또는 게시 버튼을 클릭합니다.
WordPress의 Classic Editor Plugin을 사용하는 경우에는 사용자 지정 HTML 블록을 사용하는 대신 텍스트 편집기를 비주얼 모드에서 텍스트 모드로 변경한 후 편집기에 임베드 코드를 붙여 넣습니다.
WordPress 템플릿에 임베드 코드 추가
WordPress 테마에서 사이트 편집기가 지원되는 경우에는 모든 사이트 템플릿에 임베디드 구매 버튼을 추가할 수 있습니다.
단계:
- Shopify에서 구매 버튼을 생성하고 임베드 코드 대화 상자에서 임베드 코드를 복사하거나 클립보드에 임베드 코드 복사를 클릭합니다.
- WordPress 대시보드에서 편집기로 이동합니다.
- 편집할 템플릿으로 이동합니다.
- 블록 편집기에서 + 버튼을 클릭하고 사용자 지정 HTML을 검색한 후 사용자 지정 HTML 블록을 클릭하여 삽입합니다.
- 사용자 지정 HTML 블록 내 텍스트 필드에 임베드 코드를 붙여 넣습니다.
-
선택 사항: 사용자 지정 HTML 블록을 이동하거나 구매 버튼이 어떻게 표시되는지 미리 볼 수 있습니다.
- 사용자 지정 HTML 블록을 이동하려면 블록 툴바에서 화살표 버튼을 클릭하거나 블록을 새 위치로 끌어서 놓습니다.
- 구매 버튼을 미리 보려면 블록 툴바에서 미리 보기를 클릭합니다.
작업을 마치면 템플릿의 미리 보기 또는 저장 버튼을 클릭합니다.
판매자의 Shopify 블로그가 들어간 임베드 코드 추가
참고: #### 단계:- Shopify Admin에서 온라인 스토어 > 블로그 게시물로 이동합니다.
- 블로그 게시물 페이지에서 편집하려는 블로그 게시물의 제목을 클릭하거나 블로그 게시물 추가를 클릭하여 새로 생성합니다.
- 블로그 게시물 작성 섹션의 서식 있는 텍스트 편집기에서 HTML 표시를 클릭합니다.
- 임베드 코드를 주 텍스트 필드에 붙여넣습니다.
- 저장을 클릭합니다.
- Shopify 앱에서 … 버튼을 탭합니다.
- 판매 채널 섹션에서 온라인 스토어를 탭합니다.
- 블로그 게시물을 탭합니다.
- Shopify 앱에서 … 버튼을 탭합니다.
- 판매 채널 섹션에서 온라인 스토어를 탭합니다.
- 블로그 게시물을 탭합니다.
Squarespace의 개별 게시물 및 홈페이지 메뉴에 임베드 코드를 추가할 수 있습니다. 두 가지 작업을 모두 수행해야 하는 경우도 있습니다. 예를 들어 홈페이지에 카트를 임베드하여 개별 게시물에 들어 있는 구매 버튼을 통한 구매를 수신할 수 있습니다.
단계:
- Squarespace 대시보드에서 임베드 코드 추가 웹페이지를 엽니다.
- 구매 버튼이나 임베디드 카트를 표시할 페이지의 요소를 찾은 다음 페이지 콘텐츠 영역으로 커서를 이동하여 편집을 클릭합니다.
- 임베드 코드를 추가하려는 삽입 포인트를 클릭합니다.
- 콘텐츠 블록 대화 상자의 기타 섹션에서 코드를 클릭합니다.
- Shopify Admin의 임베드 코드 대화 상자에서 임베드 코드를 복사합니다.
- Squarespace 대시보드에서 코드 대화 상자에 임베드 코드를 붙여넣습니다. 텍스트 필드가 HTML을 수신하도록 설정되어 있는지 확인하십시오.
- 코드 편집 대화 상자에서 적용을 클릭합니다.
- 페이지 편집기에서 저장을 다시 클릭합니다. Squarespace는 대시보드에서 JavaScript를 사용하지 않도록 설정하므로 페이지를 별도로 미리보기 하여 추가 구매 버튼이나 임베디드 카트가 작동하는지 확인해야 합니다.
단계를 완료했는데도 구매 버튼이 로드되지 않으면 Ajax 로드를 꺼야 할 수 있습니다. 자세한 내용을 확인하려면 Ajax 활성화 또는 비활성화를 참조하십시오.
Wix에 임베드 코드 추가
Shopify Admin에서 구매 버튼이나 컬렉션을 생성한 후에는 Wix 웹사이트 편집기를 사용하여 Wix 웹사이트에 추가할 수 있습니다.
임베드 코드를 편집하지 않고 Wix 웹사이트에 둘 이상의 제품을 표시하려는 경우 컬렉션을 임베드 할 수 있습니다. Wix에 표시할 제품의 경우에는 Shopify Admin에서 새 컬렉션을 생성할 수 있습니다.
단계:
- Shopify Admin에서 제품 또는 컬렉션에 대한 구매 버튼을 생성한 다음 임베드 코드를 복사합니다.
- Wix 계정에서 내 사이트 섹션에서 편집할 사이트를 찾은 다음 사이트 편집을 클릭합니다.
- Wix 웹사이트 편집기에서
+버튼을 클릭한 다음 자세히를 클릭합니다. - HTML 코드를 클릭하여 페이지에 HTML 코드 위젯을 추가합니다.
- 코드 입력을 클릭합니다.
- HTML 설정 대화 상자에서 구매 버튼이나 컬렉션의 임베드 코드를 여기에 코드 추가 필드에 붙여넣은 다음 업데이트를 클릭합니다.
- HTML 코드 위젯의 내용에 맞게 크기를 조정합니다. 카트에 임베드를 생성하는 경우 카트 탭 이 적절한 위치에 표시되어 있는지 확인합니다.
- 작업을 마치면 저장을 클릭합니다.
여러 제품 또는 컬렉션 임베드
단계:
- Shopify Admin에서 제품 또는 컬렉션에 대한 구매 버튼을 생성한 다음 임베드 코드를 복사합니다.
- 코드를 코드 편집기 또는 Wix 웹사이트 빌더에 붙여넣습니다. 필요한 구매 버튼을 만들 때까지 처음 두 단계를 반복합니다.
- 임베드 코드를 편집하여 적절한 정렬 방식으로 표시되는지 확인하십시오.
- Wix 계정에서 내 사이트 섹션에서 편집할 사이트를 찾은 다음 사이트 편집을 클릭합니다.
- Wix 웹사이트 편집기에서
+버튼을 클릭한 다음 자세히를 클릭합니다. - HTML 코드를 클릭하여 페이지에 HTML 코드 위젯을 추가합니다.
- 코드 입력을 클릭합니다.
- HTML 설정 대화 상자에서 코드 추가 필드에 구매 버튼의 편집된 코드를 붙여넣고 업데이트를 클릭합니다.
- HTML 코드 위젯의 내용에 맞게 크기를 조정합니다. 카트에 임베드를 생성하는 경우 카트 탭 이 적절한 위치에 표시되어 있는지 확인합니다.
- 작업을 마치면 저장을 클릭합니다.
스크립트 태그 별도로 추가
Unbounce와 같은 일부 플랫폼에서는 임베드 코드의 <script> 태그를 페이지 헤더에 붙여넣고 구매 버튼을 표시할 페이지의 나머지 임베드 코드를 붙여넣어야 합니다.
단계:
- 구매 버튼 생성 시 생성되는 임베드 코드에서
<div>요소와<script>요소를 모두 복사합니다. 예를 들어:
<script type="text/javascript">
/*<![CDATA[*/
(function () {
var scriptURL = 'https://sdks.shopifycdn.com/buy-button/latest/buy-button-storefront.min.js';
if (window.ShopifyBuy) {
if (window.ShopifyBuy.UI) {
ShopifyBuyInit();
} else {
loadScript();
}
} else {
loadScript();
}
function loadScript() {
var script = document.createElement('script');
script.async = true;
script.src = scriptURL;
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(script);
script.onload = ShopifyBuyInit;
}
function ShopifyBuyInit() {
var client = ShopifyBuy.buildClient({
domain: 'haris-mahmood.myshopify.com',
apiKey: 'a4e6808b1c4afa490c5b7459f7758347',
appId: '15'
});
ShopifyBuy.UI.onReady(client).then(function (ui) {
ui.createComponent('product', {
id: [9017131142],
node: document.getElementById('product-component-2dd3c8704e6'),
moneyFormat: '%24%24%24%7B%7Bamount%7D%7D',
options: {
"product": {
"variantId": "all",
"contents": {
"variantTitle": false,
"description": false,
"buttonWithQuantity": false,
"quantity": false
},
"styles": {
"product": {
"@media (min-width: 601px)": {
"max-width": "calc(25% - 20px)",
"margin-left": "20px",
"margin-bottom": "50px"
}
}
}
},
"cart": {
"contents": {
"button": true
},
"styles": {
"footer": {
"background-color": "#ffffff"
}
}
},
"modalProduct": {
"contents": {
"variantTitle": false,
"buttonWithQuantity": false,
"quantity": false
},
"styles": {
"product": {
"@media (min-width: 601px)": {
"max-width": "100%",
"margin-left": "0px",
"margin-bottom": "0px"
}
}
}
},
"productSet": {
"styles": {
"products": {
"@media (min-width: 601px)": {
"margin-left": "-20px"
}
}
}
}
}
});
});
}
})();
/*]]>*/
</script>- 구매 버튼을 임베드하려는 웹사이트의 페이지 헤더를 엽니다.
- 페이지 헤더에 전체
<script>요소를 붙여넣습니다. - 변경 사항을 저장합니다.
- Shopify Admin의 원래 임베드 코드에서
<div>요소만 복사합니다.
<div id='product-component-2dd3c8704e6'></div>- 예를 들어, 구매 버튼을 임베드하려는 웹사이트의 페이지를 엽니다.
- 페이지에
<div>코드 조각을 붙여넣습니다. - 변경 사항을 저장합니다.