구매 버튼 또는 임베디드 카트 편집 또는 삭제

이 페이지는 Nov 01, 2023에 인쇄되었습니다. 최신 버전은 https://help.shopify.com/ko/manual/online-sales-channels/buy-button/edit-delete에서 확인하십시오.

Shopify Admin가 복사하여 웹페이지의 소스 HTML에 붙여넣는 코드 조각에서 구매 버튼 및 카트를 생성합니다. 이러한 코드 조각을임베드 코드라고 합니다. 단추나 카트의 모양이나 동작을 변경하려면 임베드 코드를 편집해야 합니다.

참고 사항

이지침은2016년월26일이후생성한 구매 버튼 임베드 코드에 적용됩니다. 이 날짜 전에 생성한 임베드 코드를 변경하려면레거시 지침을 따라야 합니다.구매 버튼판매 채널로 임베드 코드를 다시 생성할 수도 있습니다.

어떤 버전의 임베드 코드가 있는지 확실하지 않을 때는로 끝나는 소스 HTML에서 전체 임베드 코드를 삭제합니다. 구매 버튼의 임베드 코드는 다음 코드와 같습니다.

<scriptdata-shopify-buy-ui>varscriptURL="https://cndurl.com/buy-button-storefront.js";if(window.ShopifyBuy&&window.ShopifyBuy.UI){ShopifyBuyInit();}else{varscript=document.createElement('script');script.async=true;script.src=scriptURL;(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(script);script.onload=ShopifyBuyInit;}functionShopifyBuyInit(){varclient=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'}}

 참고 사항
 When you add the 'horizontal' value, make sure that it includes the quotation marks, and that the previous line ends with a comma.

변경 사항을 저장합니다.

웹사이트 카트 편집

웹사이트 카트의 모양이나 동작을 변경하려면 임베드 코드에서cart구성 객체를 편집하면 됩니다.

단계:

편집하려는 카트가 있는 페이지의 HTML을 엽니다.
임베드 코드에서cart구성 개체를 찾습니다.

options:{cart:{startOpen:false}}

변경할 속성을 편집하거나 추가합니다. 구성할 수 있는 속성의 전체 목록은개발자 문서를 참조하십시오.
변경 사항을 저장합니다.

임베디드 컬렉션 편집

임베디드 컬렉션 편집은제품이나카트편집과 비슷합니다. 컬렉션 내 제품의 속성(예: 각 제품의 레이아웃)을 편집하려면product구성 개체를 찾은 다음 제품 임베드 편집과 같은 방식으로 편집합니다. 컬렉션 자체의 속성(예:다음 페이지버튼의 텍스트)은productSet키를 편집하면 됩니다.

컴포넌트의 텍스트와 같은 일부 속성은내장되어 다른 객체 내에서 표시되는 객체로 구성됩니다. 예를 들어,다음 페이지버튼의 텍스트는productSet컴포넌트의text객체 내부에 표시됩니다.

options:{productSet:{text:{nextPageButton:'Continue'}}}

구매 버튼 또는 임베디드 카트 편집 또는 삭제

Shopify와 함께 사업을 시작할 준비가 되셨습니까?