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

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>&#39;horizontal&#39;</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'
    }
  }
}