HTML에 구매 버튼 코드 추가

Shopify 관리자에서 구매 버튼을 생성했으면 판매자의 웹사이트 또는 블로그에 추가할 수 있습니다.

웹사이트의 소스 HTML에 임베드 코드를 넣는 과정은 구매 버튼과 카트가 표시되는 방식 및 위치에 따라 다르고, 게시할 플랫폼과 해당 플랫폼에서 사용 중인 테마에 따라서도 달라집니다.

WordPress.org 블로그에 임베드 코드 추가

개별 게시물에 임베드 코드를 추가하고 WordPress.org 블로그 홈페이지의 메뉴에 추가할 수 있습니다.

참고: 임베디드 구매 버튼은 WordPress.org 플랫폼과 호환되지만 WordPress.com과는 호환되지 않습니다. 이 문서는 WordPress 4.2.2에 대한 내용입니다. 버전은 다를 수 있으나 Wordpress 지원 사이트에서 WordPress 버전에 대해 자세히 알아볼 수 있습니다.

Wordpress 게시물에 임베드 코드 추가

  1. Shopify에서 구매 버튼을 생성하고 임베드 코드 대화 상자에서 임베드 코드를 복사하거나 클립보드에 임베드 코드 복사를 클릭합니다.
  2. WordPress 대시보드에서 게시물로 이동합니다.
  3. 새 게시물을 생성하거나 구매 버튼을 표시할 기존 게시물을 편집합니다.
  4. 사용하는 WordPress 버전에 따라 다음 단계 중 하나를 완료합니다.

    • 게시물의 텍스트 편집기를 시각에서 텍스트 모드로 변경합니다.
    • 블록 편집기에서 + 버튼을 클릭하고 Custom HTML을 검색한 후 사용자 지정 HTML을 클릭합니다.
  5. 구매 버튼이나 컬렉션을 표시할 위치의 텍스트 필드에 임베드 코드를 붙여넣습니다.

  6. 작업을 마치면 초안 저장, 미리 보기 또는 게시를 클릭합니다.

Wordpress 메뉴에 임베드 코드 추가

단계:

  1. WordPress 대시보드에서 모양을 클릭합니다.
  2. 사용자 지정을 클릭하여 테마 편집기를 연 다음 위젯을 클릭합니다.
  3. 구매 버튼이나 사용자 지정 카트 코드를 추가할 영역의 이름을 클릭합니다.
  4. 기존 텍스트 위젯을 열거나 위젯 추가를 클릭한 다음 텍스트를 클릭합니다.
  5. 텍스트 위젯 내 주 텍스트 필드에 임베드 코드를 붙여넣습니다.
  6. 변경 사항을 저장합니다.

참고: 웹사이트 카트의 동작이나 모양을 변경하려면 WordPress.org 블로그 홈페이지의 메뉴에 사용자 지정 카트 코드를 추가하면 됩니다.

판매자의 Shopify 블로그가 들어간 임베드 코드 추가

참고: 구매 버튼을 클릭하면 별도의 카트가 생성됩니다. 고객이 온라인 스토어에서 다른 페이지로 이동하면 선택한 품목은 카트에 표시되지 않습니다. 구매 버튼을 편집하여 결제로 바로 이동할 수 있습니다.

단계:

  1. 블로그 게시물 페이지에서 편집하려는 블로그 게시물의 제목을 클릭하거나 블로그 게시물 추가를 클릭하여 새로 생성합니다. 4. 블로그 게시물 작성 섹션의 서식있는 텍스트 편집기에서 HTML 표시를 클릭합니다. 5. 임베드 코드를 주 텍스트 필드에 붙여넣습니다. 6. 저장을 클릭합니다.

Squarespace에 임베드 코드 추가

Squarespace의 개별 게시물 및 홈페이지 메뉴에 임베드 코드를 추가할 수 있습니다. 두 가지 작업을 모두 수행해야 하는 경우도 있습니다. 예를 들어 홈페이지에 카트를 임베드하여 개별 게시물에 들어 있는 구매 버튼을 통한 구매를 수신할 수 있습니다.

단계:

  1. Squarespace 대시보드에서 임베드 코드 추가 웹페이지를 엽니다.
  2. 구매 버튼이나 임베디드 카트를 표시할 페이지의 요소를 찾은 다음 페이지 콘텐츠 영역으로 커서를 이동하여 편집을 클릭합니다.
  3. 임베드 코드를 추가하려는 삽입 포인트를 클릭합니다.
  4. 콘텐츠 블록 대화 상자의 기타 섹션에서 코드를 클릭합니다.
  5. Shopify 관리자의 임베드 코드 대화 상자에서 임베드 코드를 복사합니다.
  6. Squarespace 대시보드에서 코드 대화 상자에 임베드 코드를 붙여넣습니다. 텍스트 필드가 HTML을 수신하도록 설정되어 있는지 확인하십시오.
  7. 코드 편집 대화 상자에서 적용을 클릭합니다.
  8. 페이지 편집기에서 저장을 다시 클릭합니다. Squarespace는 대시보드에서 JavaScript를 사용하지 않도록 설정하므로 페이지를 별도로 미리보기 하여 추가 구매 버튼이나 임베디드 카트를 확인해야 합니다.

단계를 완료했는데도 구매 버튼이 로드되지 않으면 Ajax 로드를 사용하지 않도록 설정해야 할 수 있습니다. 자세한 내용을 확인하려면 Ajax 사용 또는 사용 안 함으로 이동하십시오.

참고: Squarespace 홈페이지 메뉴에 임베디드 카트를 추가하면 개별 게시물의 구매 버튼을 통한 주문이 수신됩니다.

Wix에 임베드 코드 추가

Shopify 관리자에서 구매 버튼이나 컬렉션을 생성한 후에는 Wix 웹사이트 편집기를 사용하여 wix 웹사이트에 추가할 수 있습니다.

임베드 코드를 편집하지 않고 Wix 웹사이트에 둘 이상의 제품을 표시하려는 경우 컬렉션을 임베드 할 수 있습니다. Wix에 표시할 제품의 경우에는 Shopify 관리자에서 새 컬렉션을 생성할 수 있습니다.

단계:

  1. Shopify 관리자에서 제품 또는 컬렉션에 대한 구매 버튼을 생성한 다음 임베드 코드를 복사합니다.

참고: Wix 웹사이트용 구매 버튼을 생성하는 경우에는 Wix 제한으로 인해 동일한 탭에서 리디렉션 옵션을 사용할 수 없습니다.

  1. Wix 계정에서 내 사이트 섹션에서 편집할 사이트를 찾은 다음 사이트 편집을 클릭합니다.
  2. Wix 웹사이트 편집기에서 + 버튼을 클릭한 다음 자세히를 클릭합니다.
  3. HTML 코드를 클릭하여 페이지에 HTML 코드 위젯을 추가합니다.
  4. 코드 입력을 클릭합니다.
  5. HTML 설정 대화 상자에서 구매 버튼이나 컬렉션의 임베드 코드를 여기에 코드 추가 필드에 붙여넣은 다음 업데이트를 클릭합니다.
  6. HTML 코드 위젯의 내용에 맞게 크기를 조정합니다. 카트에 임베드를 생성하는 경우 카트 탭 이 적절한 위치에 표시되어 있는지 확인합니다.
  7. 작업을 마치면 저장을 클릭합니다.

여러 제품 또는 컬렉션 임베드

단계:

  1. Shopify 관리자에서 제품 또는 컬렉션에 대한 구매 버튼을 생성한 다음 임베드 코드를 복사합니다.
  2. 코드를 코드 편집기 또는 Wix 웹사이트 빌더에 붙여넣습니다. 필요한 구매 버튼을 만들 때까지 처음 두 단계를 반복합니다.
  3. 임베드 코드를 편집하여 적절한 정렬 방식으로 표시되는지 확인하십시오.
  4. Wix 계정에서 내 사이트 섹션에서 편집할 사이트를 찾은 다음 사이트 편집을 클릭합니다.
  5. Wix 웹사이트 편집기에서 + 버튼을 클릭한 다음 자세히를 클릭합니다.
  6. HTML 코드를 클릭하여 페이지에 HTML 코드 위젯을 추가합니다.
  7. 코드 입력을 클릭합니다.
  8. HTML 설정 대화 상자에서 코드 추가 필드에 구매 버튼의 편집된 코드를 붙여넣고 업데이트를 클릭합니다.
  9. HTML 코드 위젯의 내용에 맞게 크기를 조정합니다. 카트에 임베드를 생성하는 경우 카트 탭 이 적절한 위치에 표시되어 있는지 확인합니다.
  10. 작업을 마치면 저장을 클릭합니다.

참고: Wix 편집기를 사용하는 데 도움이 필요하면 Wix 지원에 문의 하십시오.

스크립트 태그 별도로 추가

바운스 취소와 같은 일부 플랫폼에서는 임베드 코드의 <script> 태그를 페이지 헤더에 붙여넣고 구매 버튼을 표시할 페이지의 나머지 임베드 코드를 붙여넣어야 합니다.

단계:

  1. 구매 버튼 생성 시 생성되는 임베드 코드에서 <div> 요소와 <script> 요소를 모두 복사합니다. 예를 들어:
<script type="text/javascript">
/*<![CDATA[*/

(function () {
  var scriptURL = 'https://sdks.shopifycdn.com/buy-button/latest/buy-button-storefront.min.js';
  if (window.ShopifyBuy) {
    if (window.ShopifyBuy.UI) {
      ShopifyBuyInit();
    } else {
      loadScript();
    }
  } else {
    loadScript();
  }

  function loadScript() {
    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({
      domain: 'haris-mahmood.myshopify.com',
      apiKey: 'a4e6808b1c4afa490c5b7459f7758347',
      appId: '15'
    });

    ShopifyBuy.UI.onReady(client).then(function (ui) {
      ui.createComponent('product', {
        id: [9017131142],
        node: document.getElementById('product-component-2dd3c8704e6'),
        moneyFormat: '%24%24%24%7B%7Bamount%7D%7D',
        options: {
  "product": {
    "variantId": "all",
    "contents": {
      "variantTitle": false,
      "description": false,
      "buttonWithQuantity": false,
      "quantity": false
    },
    "styles": {
      "product": {
        "@media (min-width: 601px)": {
          "max-width": "calc(25% - 20px)",
          "margin-left": "20px",
          "margin-bottom": "50px"
        }
      }
    }
  },
  "cart": {
    "contents": {
      "button": true
    },
    "styles": {
      "footer": {
        "background-color": "#ffffff"
      }
    }
  },
  "modalProduct": {
    "contents": {
      "variantTitle": false,
      "buttonWithQuantity": false,
      "quantity": false
    },
    "styles": {
      "product": {
        "@media (min-width: 601px)": {
          "max-width": "100%",
          "margin-left": "0px",
          "margin-bottom": "0px"
        }
      }
    }
  },
  "productSet": {
    "styles": {
      "products": {
        "@media (min-width: 601px)": {
          "margin-left": "-20px"
        }
      }
    }
  }
}
      });
    });
  }
})();
/*]]>*/
</script>
  1. 구매 버튼을 임베드하려는 웹사이트의 페이지 헤더를 엽니다.

  2. 페이지 헤더에 전체 <script> 요소를 붙여넣습니다.

  3. 변경 사항을 저장합니다.

  4. Shopify 관리자의 원래 임베드 코드에서 <div> 요소만 복사합니다.

<div id='product-component-2dd3c8704e6'></div>
  1. 예를 들어, 구매 버튼을 임베드하려는 웹사이트의 페이지를 엽니다.

  2. 페이지에 <div> 코드 조각을 붙여넣습니다.

  3. 변경 사항을 저장합니다.

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

무료 체험