구매 버튼 또는 임베디드 카트 편집 또는 삭제
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'
}
}
}