購入ボタン、埋め込みコレクション、または埋め込みカートをカスタマイズまたは削除する

ウェブページのソース HTML にある埋め込みコードを編集することで、購入ボタン、埋め込みコレクション、または埋め込みカートの外観や動作を変更できます。また、ウェブページからコードを削除して埋め込みを削除することもできます。

購入ボタンでは、商品と購入用のボタンが表示されます。埋め込みコレクションでは、複数の商品が表示されます。埋め込みカートでは、お客様がページをまたいで利用できる独立したカートが表示されます。

埋め込みコードは、購入ボタンやカートを作成した際に、Shopify の管理画面からコピーしてウェブページの HTML に貼り付けたコードのスニペットです。埋め込みコードは、ウェブページにインタラクティブな機能を追加するために使用されるプログラミング言語である JavaScript で記述されています。

このページの内容

購入ボタンの埋め込みコードについて

各購入ボタンは、コンポーネントと呼ばれる独立したパーツで構築されています。コンポーネントとは、購入ボタンの機能の一部を制御する埋め込みコードの名前付きセクションのことです。たとえば、カート付きの商品をウェブページに追加すると、埋め込みコードによって以下のコンポーネントが生成されます。

商品情報と購入用ボタンを表示する product コンポーネント
カートのコンテンツを表示する cart コンポーネント
カートを開くアイコンを表示するカート toggle コンポーネント

product コンポーネントで商品の詳細のポップアップウィンドウが開くように設定している場合、埋め込みコードはさらに 2 つのコンポーネントを生成します。ポップアップ自体のための 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 にある購入ボタンの埋め込みコードを編集します。

手順：

変更する商品の埋め込みが含まれているページの HTML を開きます。
product 設定オブジェクトを見つけます。
オブジェクト内で buttonDestination キーを見つけます。

options: {
      product: {
        buttonDestination: 'cart'
      }
}

そのキーの値を引用符を含めて 'modal' に変更します。

options: {
      product: {
        buttonDestination: 'modal'
      }
}

変更を保存します。

商品埋め込みのレイアウトを変更する

商品の横長の埋め込みレイアウトでは、画像が商品の詳細の上ではなく横に配置されます。このレイアウトに切り替えるには、ウェブページのソース HTML にある購入ボタンの埋め込みコードを編集します。

手順：

変更する商品の埋め込みが含まれているページの HTML を開きます。
product 設定オブジェクトを見つけます。
layout キーを追加し、その値を 'horizontal' に設定します。値に引用符が含まれていること、および前の行がコンマで終わっていることを確認してください。

options: {
      product: {
        buttonDestination: 'modal',
        layout: 'horizontal'
      }
}

変更を保存します。

カート埋め込みの外観と動作を変更する

カートの外観や動作を変更するには、埋め込みコード内の cart 設定オブジェクトを編集します。

手順：

編集したいカートが含まれているページの HTML を開きます。
埋め込みコード内で cart 設定オブジェクトを見つけます。

options: {
      cart: {
        startOpen: false
      }
}

既存のキーを編集するか新しいキーを追加して、カートの外観や動作を変更します。設定可能なキーの完全なリストについては、開発者向けドキュメントを参照してください。
変更を保存します。

購入ボタン、埋め込みコレクション、または埋め込みカートの削除

ウェブページから購入ボタン、埋め込みコレクション、または埋め込みカートを削除するには、ソース 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>

変更を保存します。