購入ボタンまたは埋め込みカートの編集または削除

このページはApr 25, 2024に印刷されています。最新のバージョンについては、https://help.shopify.com/ja/manual/online-sales-channels/buy-button/edit-deleteをご覧ください。

購入ボタンとカートは、管理画面からコピーして、ウェブページのソースHTMLに貼り付けるコードスニペットにより生成されます。これらのコードスニペットは、埋め込みコードと呼ばれます。ボタンやカートの外観や動作を変更する場合、関連する埋め込みコードを編集する必要があります。

目次

購入ボタン、埋め込みコレクション、埋め込みカートを削除する

手順:

  1. 購入ボタン、埋め込みコレクション、埋め込みカートを含むウェブページのソースHTMLを開きます。
  2. <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>
  1. 変更を保存する。

購入ボタン、埋め込みコレクション、埋め込みカートがウェブページに表示されなくなります。

購入ボタンを編集する

既存の購入ボタンの外観や設定を変更するには、ソース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'
          }
        }
      }
    }
  });
});

これらのコンポーネントは、埋め込みコードの構成オブジェクトで個別に構成されています。埋め込みコードの構成オブジェクトを編集して、購入ボタンの外観や動作を変更できます。

各コンポーネントには、編集可能な多くの属性があります。編集可能なオプションのリスト一式については、開発者のドキュメントを参照してください。埋め込みコードに表示されないオプションを構成する場合、適切なオブジェクトに適切なキーを追加する必要があります (こちらの例を参照してください)。

コンポーネントのスタイルを編集する

それぞれのコンポーネントには、複雑なstyles構成オブジェクトが含まれており、これを編集または追加して、コンポーネントの外観を変更することができます。これらのスタイルは、CSSと同様のフォーマットです。stylesオブジェクトの最上位のキーは、それぞれがタイトルやボタンなどといったコンポーネントの要素を表しています。以下のオブジェクト内では、それぞれのキーがCSSプロパティ (たとえば「背景の色」や「罫線」)、値がCSS値となっています。

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

stylesには、有効なCSSプロパティを任意で追加することができます。なお、ダッシュ (−) 付きのプロパティ名は引用符 (' ') で囲む必要があります。

CSSカスタマイズの詳細については、開発者のドキュメントを参照してください。

例: カートへのリンクを商品の詳細モーダルに置き換える

以下の例のように、現在の埋め込みコードを変更して、カートではなく、商品の詳細モーダルにお客様を誘導することができます。その手順は、以下のとおりです。

  1. 変更する商品の埋め込みを含むページのHTMLを開きます。
  2. product構成オブジェクトを見つけます。
  3. オブジェクト内でbuttonDestinationキーを見つけます。 
options: {
      product: {
        buttonDestination: 'cart'
      }
}
  1. 該当するキーの値を'modal'に変更します (引用符を必ず付けるようにしてください)。 
options: {
      product: {
        buttonDestination: 'modal'
      }
}
  1. 変更を保存する。

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

この例のように、画像が上ではなく横に表示されるように、以下の手順で商品の埋め込みのレイアウトを変更することができます。

  1. 変更する商品の埋め込みを含むページのHTMLを開きます。
  2. product構成オブジェクトを見つけます。
  3. 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>
  1. 変更を保存する。

ウェブサイトのカートを編集する

ウェブサイト上でカートの外観や動作を変更したい場合は、埋め込みコード内のcart構成オブジェクトを編集する必要があります。

手順:

  1. 編集するカートを含むページのHTMLを開きます。
  2. 埋め込みコードの中からcart構成オブジェクトを見つけます。 
options: {
      cart: {
        startOpen: false
      }
}
  1. 変更するプロパティを編集または追加します。構成可能なプロパティのリスト一式については、「開発者ドキュメント」を参照してください。
  2. 変更を保存する。

埋め込みコレクションを編集する

埋め込みコレクションの編集はproductやcartの編集と同様です。コレクション内の商品プロパティ (各商品のレイアウトなど) を編集するには、product構成オブジェクトを見つけ、商品埋め込みコードを編集したときと同じ方法で、編集を加えます。コレクションプロパティ自体 ([次のページ] ボタンなど) を編集する場合は、代わりにproductSetキーを編集します。

コンポーネントのテキストなど、一部のプロパティは、他のオブジェクトの内側に表示されるオブジェクトである複雑なオブジェクトによって構成されます。たとえば、[次のページ] ボタンのテキストはproductSetコンポーネントのtextオブジェクト内にあります。

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

Shopifyで販売を開始する準備はできていますか?

無料体験を試す