HTML에 구매 버튼 코드 추가
Shopify 관리자에서 구매 버튼을 생성한 후 웹사이트나 블로그에 추가할 수 있습니다.
웹사이트의 소스 HTML에 임베드 코드를 추가하는 과정은 구매 버튼과 카트를 표시하려는 방식 및 위치, 사용 중인 게시 플랫폼, 경우에 따라 해당 플랫폼에서 사용 중인 테마에 따라 조금씩 다릅니다.
이 페이지의 내용
WordPress에 임베드 코드 추가
WordPress 사이트의 게시물, 페이지 또는 템플릿에 임베드 코드를 추가할 수 있습니다.
WordPress 게시물 또는 페이지에 임베드 코드 추가
- Shopify에서 구매 버튼을 생성하고 임베드 코드 대화 상자에서 임베드 코드를 복사하거나 클립보드에 임베드 코드 복사를 클릭하십시오.
- WordPress 대시보드에서 게시물 또는 페이지로 이동하십시오.
- 새 게시물이나 페이지를 생성하거나 기존 게시물 또는 페이지를 편집하십시오.
- 블록 편집기 내에서 + 버튼을 클릭하고 Custom HTML을 검색한 다음 클릭하여 Custom HTML 블록을 삽입하십시오.
- Custom HTML 블록에서 제공하는 텍스트 필드에 임베드 코드를 붙여넣으십시오.
- 선택 사항: Custom HTML 블록을 이동하거나 구매 버튼이 어떻게 표시되는지 미리 볼 수 있습니다.
- Custom HTML 블록을 이동하려면 블록의 툴바에 있는 화살표 버튼을 클릭하거나 블록을 새 위치로 끌어다 놓으십시오.
- 구매 버튼을 미리 보려면 블록 툴바에서 미리 보기를 클릭하십시오.
- 완료되면 게시물 또는 페이지의 초안 저장, 미리 보기 또는 게시 버튼을 클릭하십시오.
WordPress의 Classic Editor 플러그인을 사용하는 경우 Custom HTML 블록을 사용하는 대신 텍스트 편집기를 Visual에서 Text 모드로 변경하고 편집기에 임베드 코드를 붙여넣으십시오.
WordPress 템플릿에 임베드 코드 추가
WordPress 테마에서 사이트 편집기를 지원하는 경우 사이트의 모든 템플릿에 임베디드 구매 버튼을 추가할 수 있습니다.
단계:
- Shopify에서 구매 버튼을 생성하고 임베드 코드 대화 상자에서 임베드 코드를 복사하거나 클립보드에 임베드 코드 복사를 클릭하십시오.
- WordPress 대시보드에서 편집기로 이동하십시오.
- 편집하려는 템플릿으로 이동하십시오.
- 블록 편집기 내에서 + 버튼을 클릭하고 Custom HTML을 검색한 다음 클릭하여 Custom HTML 블록을 삽입하십시오.
- Custom HTML 블록에서 제공하는 텍스트 필드에 임베드 코드를 붙여넣으십시오.
- 선택 사항: Custom HTML 블록을 이동하거나 구매 버튼이 어떻게 표시되는지 미리 볼 수 있습니다.
- Custom HTML 블록을 이동하려면 블록의 툴바에 있는 화살표 버튼을 클릭하거나 블록을 새 위치로 끌어다 놓으십시오.
- 구매 버튼을 미리 보려면 블록 툴바에서 미리 보기를 클릭하십시오.
- 완료되면 템플릿의 미리 보기 또는 저장 버튼을 클릭하십시오.
Shopify 블로그에 임베드 코드 추가
참고:단계:
데스크톱
Shopify 관리자에서 콘텐츠 > 블로그 게시물로 이동하십시오.
블로그 게시물 페이지에서 편집하려는 블로그 게시물의 제목을 클릭하거나 블로그 게시물 추가를 클릭하여 새 게시물을 생성하십시오.
블로그 게시물 작성 섹션의 서식 있는 텍스트 편집기에서 HTML 표시를 클릭하십시오.
기본 텍스트 필드에 임베드 코드를 붙여넣으십시오.
저장을 클릭합니다.
모바일
Shopify 앱에서
아이콘을 탭합니다.콘텐츠 메뉴에서
아이콘을 탭한 다음 블로그 게시물을 탭하세요.편집할 블로그 게시물을 탭하세요.
콘텐츠 섹션에서 …을(를) 탭한 다음
아이콘을 탭하세요.텍스트 필드에 임베드 코드를 붙여넣으세요.
저장 또는 ✓을(를) 탭하세요.
Squarespace에 임베드 코드 추가
Squarespace의 개별 게시물과 홈페이지 메뉴에 임베드 코드를 추가할 수 있습니다. 경우에 따라 둘 다 추가할 수도 있습니다. 예를 들어, 홈페이지에 카트를 임베드하여 개별 게시물에 임베드한 구매 버튼을 통한 구매를 받을 수 있습니다.
단계:
- Squarespace 대시보드에서 임베드 코드를 추가할 웹 페이지를 여십시오.
- 페이지에서 구매 버튼 또는 임베디드 카트를 표시할 요소를 찾고 페이지 콘텐츠 영역 위로 커서를 이동한 다음 편집을 클릭하십시오.
- 임베드 코드를 추가하려는 삽입 지점을 클릭하십시오.
- 콘텐츠 블록 대화 상자의 더 보기 섹션에서 코드를 클릭하십시오.
- Shopify 관리자에서 임베드 코드 대화 상자의 임베드 코드를 복사하십시오.
- Squarespace 대시보드에서 CODE 대화 상자에 임베드 코드를 붙여넣으십시오. 텍스트 필드가 HTML을 받도록 설정되었는지 확인하십시오.
- 코드 편집 대화 상자에서 적용을 클릭하십시오.
- 페이지 편집기에서 **저장**을 다시 클릭하십시오. Squarespace는 대시보드에서 JavaScript를 비활성화하므로 페이지를 별도로 미리 보고 구매 버튼 또는 임베디드 카트가 작동하는지 확인해야 합니다.
단계를 완료한 후 구매 버튼이 로드되지 않으면 Ajax 로딩을 해제해야 할 수 있습니다. 자세한 내용은 Ajax 활성화 또는 비활성화를 참조하십시오.
Wix에 임베드 코드 추가하기
Shopify 관리자에서 구매 버튼 또는 컬렉션을 생성한 후 Wix 웹사이트 편집기를 사용하여 Wix 웹사이트에 추가할 수 있습니다.
임베드 코드를 편집하지 않고 Wix 웹사이트에 두 개 이상의 제품을 표시하려면 컬렉션을 임베드할 수 있습니다. Shopify 관리자에서 Wix에 표시하려는 제품에 대한 새 컬렉션을 생성할 수 있습니다.
단계:
- Shopify 관리자에서 제품 또는 컬렉션에 대한 구매 버튼을 생성한 다음 임베드 코드를 복사합니다.
- Wix 계정의 **내 사이트** 섹션에서 편집하려는 사이트를 찾은 다음 **사이트 편집**을 클릭합니다.
- Wix 웹사이트 편집기에서
+버튼을 클릭한 다음 **더 보기**를 클릭합니다. - **HTML 코드**를 클릭하여 페이지에 HTML 코드 위젯을 추가합니다.
- **코드 입력**을 클릭합니다.
- **HTML 설정** 대화 상자의 **여기에 코드 추가** 필드에 구매 버튼 또는 컬렉션의 임베드 코드를 붙여넣은 다음 **업데이트**를 클릭합니다.
- 콘텐츠에 맞게 HTML 코드 위젯의 크기를 조정합니다. 카트가 있는 임베드를 생성하는 경우 카트 탭이 올바른 위치에 표시되는지 확인하십시오.
- 완료되면 **저장**을 클릭합니다.
여러 제품 또는 컬렉션 임베드하기
단계:
- Shopify 관리자에서 제품 또는 컬렉션에 대한 구매 버튼을 생성한 다음 임베드 코드를 복사합니다.
- 코드를 코드 편집기나 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 관리자의 원본 임베드 코드에서
<div>요소만 복사합니다. 예:
<div id='product-component-2dd3c8704e6'></div>- 웹사이트에서 구매 버튼을 임베드하려는 페이지를 엽니다.
<div>코드 조각을 페이지에 붙여넣습니다.- 변경 사항을 저장합니다.