도움말
로그인

구매 버튼, 임베디드 컬렉션 또는 임베디드 카트 사용자 지정 또는 제거

웹 페이지의 소스 HTML에서 해당 임베드 코드를 편집하여 구매 버튼, 임베디드 컬렉션 또는 임베디드 카트의 모양이나 동작을 변경할 수 있습니다. 웹 페이지에서 코드를 제거하여 임베디드를 삭제할 수도 있습니다.

구매 버튼은 구매 버튼과 함께 제품을 표시합니다. 임베디드 컬렉션은 여러 제품을 표시합니다. 임베디드 카트는 고객이 여러 페이지에서 사용할 수 있는 독립 실행형 카트를 표시합니다.

임베드 코드는 구매 버튼이나 카트를 생성할 때 Shopify 관리자에서 복사하여 웹 페이지의 HTML에 붙여넣은 코드 조각입니다. 임베드 코드는 웹 페이지에 대화형 기능을 추가하는 데 사용되는 프로그래밍 언어인 JavaScript로 작성됩니다.

이 페이지의 내용

구매 버튼 임베드 코드 이해

각 구매 버튼은 구성 요소라는 별도의 부분으로 구성됩니다. 구성 요소는 구매 버튼 환경의 한 부분을 제어하는, 이름이 지정된 임베드 코드 섹션입니다. 예를 들어 카트가 포함된 제품을 웹 페이지에 추가하면 임베드 코드가 다음 구성 요소를 생성합니다.

  • 제품 정보 및 구매 버튼을 표시하는 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'
          }
        }
      }
    }
  });
});

각 구성 요소는 임베드 코드의 구성 객체를 통해 구성됩니다. 객체는 키-값 쌍의 목록으로 형식이 지정된 구조화된 설정 그룹입니다.

  • 키는 buttonDestination과 같은 설정의 이름입니다.
  • 값은 'cart'와 같이 설정에 지정된 내용입니다.

객체는 스프레드시트와 유사합니다. 각 키는 열 이름에 해당하고 각 값은 셀 내용에 해당합니다. 구매 버튼의 모양이나 동작을 변경하려면 구성 객체 내의 키와 값을 편집하십시오.

각 구성 요소에는 편집 가능한 키가 많이 있습니다. 편집 가능한 키의 전체 목록을 보려면 개발자 문서를 참조하십시오. 아직 임베드 코드에 없는 키를 구성하려면 적절한 객체에 키를 추가하십시오. 예는 제품 임베드의 레이아웃 변경을 참조하십시오.

구성 요소 스타일 사용자 지정

각 구성 요소에는 구성 요소의 모양을 제어하는 중첩된 styles 구성 객체가 있습니다. 중첩 객체는 다른 객체 내에 배치된 객체입니다.

styles 객체는 웹 페이지 요소가 시각적으로 어떻게 지정되는지 설명하는 데 사용되는 언어인 CSS를 사용합니다. styles 객체의 각 최상위 키는 제목이나 버튼 등 구성 요소 내 요소를 나타냅니다. 해당 키 내에서 중첩된 각 키는 CSS 속성(예: background-color 또는 border)이며, 값은 CSS 값입니다.

options: {
  product: {
    styles: {
      button: {
        'background-color': 'red',
        'border-radius': '5px'
      }
    }
  }
}

유효한 CSS 속성은 styles에 추가할 수 있습니다. 대시가 있는 속성 이름은 따옴표로 묶어야 합니다.

CSS 맞춤 설정에 대한 자세한 내용은 개발자 설명서 보기를 참조하십시오.

임베디드 컬렉션 구성 요소

임베디드 컬렉션은 구매 버튼과 동일한 구성 객체를 사용합니다. 컬렉션 내 제품의 레이아웃이나 다른 속성을 편집하려면 product 구성 객체를 찾아 제품 임베드를 편집할 때와 동일한 방법으로 편집하십시오. 다음 페이지 버튼의 텍스트와 같이 컬렉션 자체의 속성을 편집하려면 대신 productSet 구성 객체를 편집하십시오.

구성 요소의 텍스트와 같은 일부 키는 중첩된 객체를 통해 구성됩니다. 예를 들어, 다음 페이지 버튼의 텍스트는 productSet 구성 요소의 text 객체 안에 있습니다.

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

제품 세부 정보 모달은 제품 정보를 표시하는 팝업 창입니다. 고객을 카트 대신 제품 세부 정보 모달로 안내하려면 웹 페이지의 소스 HTML에서 구매 버튼 임베드 코드를 편집하십시오.

단계:

  1. 변경하려는 제품 임베드가 포함된 페이지의 HTML을 여십시오.
  2. product 구성 객체를 찾으십시오.
  3. 객체에서 buttonDestination 키를 찾으십시오.
options: {
      product: {
        buttonDestination: 'cart'
      }
}
  1. 해당 키의 값을 따옴표를 포함하여 'modal'로 변경하십시오.
options: {
      product: {
        buttonDestination: 'modal'
      }
}
  1. 변경 사항을 저장하십시오.

제품 임베드의 레이아웃 변경

가로 제품 임베드 레이아웃은 사진을 제품 세부 정보의 위쪽이 아닌 옆에 배치합니다. 이 레이아웃으로 전환하려면 웹 페이지의 소스 HTML에서 구매 버튼 임베드 코드를 편집하십시오.

단계:

  1. 변경하려는 제품 임베드가 포함된 페이지의 HTML을 여십시오.
  2. product 구성 객체를 찾으십시오.
  3. layout 키를 추가한 다음 값을 'horizontal'로 설정하십시오. 값에 따옴표가 포함되어 있고 이전 줄이 쉼표로 끝나는지 확인하십시오.
options: {
      product: {
        buttonDestination: 'modal',
        layout: 'horizontal'
      }
}
  1. 변경 사항을 저장하십시오.

카트 임베드의 모양 및 동작 변경

카트의 모양이나 동작을 변경하려면 임베드 코드에서 cart 구성 객체를 편집하십시오.

단계:

  1. 편집하려는 카트가 포함된 페이지의 HTML을 여십시오.
  2. 임베드 코드에서 cart 구성 객체를 찾으십시오.
options: {
      cart: {
        startOpen: false
      }
}
  1. 기존 키를 편집하거나 새 키를 추가하여 카트의 모양이나 동작을 변경하십시오. 구성 가능한 전체 키 목록을 보려면 개발자 문서를 참조하십시오.
  2. 변경 사항을 저장하십시오.

구매 버튼, 임베디드 컬렉션 또는 임베디드 카트 삭제

웹 페이지에서 구매 버튼, 임베디드 컬렉션 또는 임베디드 카트를 제거하려면 소스 HTML에서 해당 임베드 코드를 삭제하십시오.

단계:

  1. 구매 버튼, 임베디드 컬렉션 또는 임베디드 카트가 포함된 웹 페이지의 소스 HTML을 여십시오.
  2. 소스 HTML에서 <script data-shopify-buy-ui>로 시작하고 </script>로 끝나는 전체 임베드 코드를 삭제하십시오. 다음은 구매 버튼 임베드 코드의 예입니다.
<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>
  1. 변경 사항을 저장하십시오.