구매 버튼 또는 임베디드 카트 편집 또는 삭제
Shopify Admin가 복사하여 웹페이지의 소스 HTML에 붙여넣는 코드 조각에서 구매 버튼 및 카트를 생성합니다. 이러한 코드 조각을 임베드 코드라고 합니다. 단추나 카트의 모양이나 동작을 변경하려면 임베드 코드를 편집해야 합니다.
구매 버튼, 임베디드 컬렉션, 임베디드 카트 삭제
단계:
- 구매 버튼, 임베디드 컬렉션 또는 임베디드 카트가 포함된 웹 페이지의 소스 HTML을 엽니다.
-
<script data-shopify-buy-ui>로 시작하여</script>로 끝나는 소스 HTML에서 전체 임베드 코드를 삭제합니다. 구매 버튼의 임베드 코드는 다음 코드와 같습니다.
<script data-shopify-buy-ui>
var scriptURL = "https://cndurl.com/buy-button-storefront.js";
if (window.ShopifyBuy && window.ShopifyBuy.UI) {
ShopifyBuyInit();
} else {
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({
apiKey: 'your-api-key',
domain: 'your-store.myshopify.com',
appId: '6'
});
ShopifyBuy.UI.onReady(client).then(function (ui) {
ui.createComponent('product', {
id: 12345,
options: {
product: {
buttonDestination: 'cart',
contents: {
description: true
},
text: {
button: 'Add to Cart'
},
styles: {
button: {
'background-color': 'blue'
}
}
},
cart: {
styles: {
button: {
'background-color': 'orange'
}
}
}
}
});
});
}
</script>- 변경 사항을 저장합니다.
이제 구매 버튼, 임베디드 컬렉션 또는 임베디드 카트가 웹페이지에 표시되지 않습니다.
구매 버튼 편집
기존 구매 버튼의 모양이나 설정을 변경하려면 소스 HTML에 넣은 임베드 코드를 편집해야 합니다.
각 구매 버튼은 임베드 코드에서 별도의 컴포넌트로 생성됩니다. 예를 들어, 웹페이지에 카트가 있는 제품을 추가하면 임베드 코드로 product 컴포넌트, cart 컴포넌트 및 카트 toggle 컴포넌트를 생성할 수 있습니다. 
제품 구성 요소에서 제품 세부 정보가 있는 모달 창을 열도록 하려면 임베드 코드를 사용하여 modal 컴포넌트와 modalProduct 컴포넌트를 생성합니다. 
다음 코드 조각에는 product와 cart에 대해 별도의 컴포넌트가 있습니다.
ShopifyBuy.UI.onReady(client).then(function (ui) {
ui.createComponent('product', {
id: 12345,
options: {
product: {
buttonDestination: 'cart',
contents: {
description: true
},
text: {
button: 'Add to Cart'
},
styles: {
button: {
'background-color': 'blue'
}
}
},
cart: {
styles: {
button: {
'background-color': 'orange'
}
}
}
}
});
});이러한 컴포넌트는 임베드 코드의 구성 객체를 통해 개별적으로 구축됩니다. 임베드 코드에서 구성 객체를 편집하여 구매 버튼의 모양이나 동작을 변경할 수 있습니다.
JavaScript에서
각 컴포넌트에는 편집할 수 있는 특성이 많습니다. 편집 가능한 옵션의 전체 목록을 보려면 개발자 문서를 참조하십시오. 임베드 코드에 아직 표시되지 않은 옵션을 구성하려면 해당 개체에 적절한 키를 추가해야 합니다(예제 참조).
컴포넌트 스타일 편집
각 컴포넌트에는 내장 styles 구성 객체가 있으며, 이 객체를 편집하거나 추가하여 컴포넌트 모양을 변경할 수 있습니다. 스타일은 CSS와 유사하게 서식이 지정됩니다. styles 개체의 최상위 키는 컴포넌트에 각각 제목 또는 버튼 등의 구성 요소를 나타냅니다. 이 개체 내에서 각 키는 CSS 속성(예: '배경 색상' 또는 '테두리')이며 값은 CSS 값입니다.
options: {
product: {
styles: {
button: {
'background-color': 'red',
'border-radius': '5px'
}
}
}
}유효한 CSS 속성을 styles에 추가할 수 있습니다. 대시가 있는 속성 이름은 따옴표 안에 있어야 합니다.
CSS 사용자 지정에 대한 자세한 내용은 개발자 문서를 참조하십시오.
예: 제품 세부 정보 모달로 카트 링크 교체
이 예제에서 현재의 임베드 코드를 변경하여 고객을 카트 대신 제품 세부 정보 모달 쪽으로 유도할 수 있습니다.
- 변경하려는 제품 임베드가 있는 페이지의 HTML을 엽니다.
-
product구성 개체를 찾습니다. - 개체에서
buttonDestination키를 찾습니다.
options: {
product: {
buttonDestination: 'cart'
}
}- 해당 키의 값을
'modal'로 변경합니다(따옴표를 포함해야 합니다).
options: {
product: {
buttonDestination: 'modal'
}
}- 변경 사항을 저장합니다.
예제: 제품 임베드의 레이아웃 변경
이 예제에서는 제품 임베드의 레이아웃을 변경하여 그림이 위쪽 대신 측면에 나타나도록 합니다.
- 변경하려는 제품 임베드가 있는 페이지의 HTML을 엽니다.
-
product구성 개체를 찾습니다. -
layout키를 추가하고 값을'horizontal'로 설정합니다.
options: {
product: {
buttonDestination: 'modal',
layout: 'horizontal'
}
}<aside class="note">
<h4>참고 사항</h4>
<p>When you add the <code>'horizontal'</code> value, make sure that it includes the quotation marks, and that the previous line ends with a comma.</p>
</aside>- 변경 사항을 저장합니다.
웹사이트 카트 편집
웹사이트 카트의 모양이나 동작을 변경하려면 임베드 코드에서 cart 구성 객체를 편집하면 됩니다.
단계:
- 편집하려는 카트가 있는 페이지의 HTML을 엽니다.
- 임베드 코드에서
cart구성 개체를 찾습니다.
options: {
cart: {
startOpen: false
}
}- 변경할 속성을 편집하거나 추가합니다. 구성할 수 있는 속성의 전체 목록은 개발자 문서를 참조하십시오.
- 변경 사항을 저장합니다.
임베디드 컬렉션 편집
임베디드 컬렉션 편집은 제품이나 카트 편집과 비슷합니다. 컬렉션 내 제품의 속성(예: 각 제품의 레이아웃)을 편집하려면 product 구성 개체를 찾은 다음 제품 임베드 편집과 같은 방식으로 편집합니다. 컬렉션 자체의 속성(예: 다음 페이지 버튼의 텍스트)은 productSet 키를 편집하면 됩니다.
컴포넌트의 텍스트와 같은 일부 속성은 내장되어 다른 객체 내에서 표시되는 객체로 구성됩니다. 예를 들어, 다음 페이지 버튼의 텍스트는 productSet 컴포넌트의 text 객체 내부에 표시됩니다.
options: {
productSet: {
text: {
nextPageButton: 'Continue'
}
}
}