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

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

購入ボタンとカートは、ウェブページのソースHTMLに追加する埋め込みコードにより生成されます。ウェブページのボタンまたはカートの外観や動作を変更するには、関連する埋め込みコードを変更する必要があります。

目次

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

既存の購入ボタン、コレクション、埋め込みカートを削除するには、次の操作を行ってください。

  1. 購入ボタン、埋め込みコレクション、埋め込みカートを含むウェブページのソースHTMLを開きます。

  2. ソースHTMLから埋め込みコード全体を削除します。埋め込みコードは、次のような購入ボタンのコードになります。

 

<div data-embed_type="product" data-shop="yourstorename.myshopify.com" data-product_name="Product Name" data-product_handle="product-name" data-has_image="true" data-display_size="compact" data-redirect_to="checkout" data-buy_button_text="Buy now" data-buy_button_out_of_stock_text="Out of Stock" data-buy_button_product_unavailable_text="Unavailable" data-button_background_color="7db461" data-button_text_color="ffffff" data-product_modal="false" data-product_title_color="000000" data-next_page_button_text="Next page"></div>

<script type="text/javascript">
document.getElementById(&#39;ShopifyEmbedScript&#39;) || document.write(&#39;<script type="text/javascript" src="https://widgets.shopifyapps.com/assets/widgets/embed/client.js" id="ShopifyEmbedScript">&lt;\/script&gt;&#39;);
</script><noscript><a href="https://yourstorename.myshopify.com/cart/1590898625:1" target="_blank">商品を購入する</a></noscript>
  1. 変更を保存する。

購入ボタンを編集する

既存の購入ボタンの外観や設定を変更するには、ソースHTMLに表示される埋め込みコードにある、メインのdivタグの内容を編集する必要があります。

 

<div data-embed_type="product" data-shop="yourstorename.myshopify.com" data-product_name="Product Name" data-product_handle="product-name" data-has_image="true" data-display_size="compact" data-redirect_to="checkout" data-buy_button_text="Buy now" data-buy_button_out_of_stock_text="Out of Stock" data-buy_button_product_unavailable_text="Unavailable" data-button_background_color="7db461" data-button_text_color="ffffff" data-product_modal="false" data-product_title_color="000000" data-next_page_button_text="Next page"></div>

埋め込み購入ボタンの各機能は、メインのdivタグの異なる属性で管理されます。これらの属性は、直接ソースHTMLで追加、削除、更新できます。

たとえば、チェックアウトページではなく商品ページに、既存の購入ボタンでユーザーを誘導する場合、以下の手順を実行します。

  1. 変更する購入ボタンを含むページのHTMLを開きます。

  2. 購入ボタンの埋め込みコードのメインdivタグ内にあるdata-redirect_to属性を探します。

    data-redirect_to="チェックアウト"

  3. 属性の値をproductに変更します。

     data-redirect_to = "商品"

  4. 変更を保存する。

購入ボタンのメインのdivタグには、以下のように編集可能な属性が数多くあります。

編集可能な購入ボタンのタグ属性
属性 値 デフォルト
data-shop ボタンに接続されるmyshopifyドメイン (storename.myshopify.comなど) です。 Shopifyドメイン
data-product_handle 商品のタイトルに基づく、特集商品のハンドルです。各商品には、Shopifyの固有のハンドルがあります。 特集商品のハンドル
data-embed_type 購入ボタン、埋め込みコレクション、埋め込みカートの埋め込みコードを識別します。可能値は、product、cart、collectionです。 商品
data-display_size 埋め込み (ボタンではない) 全体の最大幅です。compact (230ピクセル) またはregular (450ピクセル) にすることができます。1つの商品の購入ボタンにのみ適用します。 compact
data-has_image 完全な商品埋め込み (true) か、購入ボタンのみ (false) かを示します。 true
data-redirect_to 購入ボタンがリンクしている場所です。checkout、product、cartにすることができます。購入ボタンを同じページの埋め込みカートと接続するには、data-redirect_toをcartにする必要があります。 チェックアウト
data-product_modal 商品がクリックされるときに、商品のモーダルをトリガーして表示します。data-redirect_toの値がmodalである場合、この属性はtrue、そうでない場合はfalseとなる必要があります。 false
data-buy_button_text 購入ボタンに表示されるテキストです。 今すぐ購入
data-button_background_color 購入ボタンの色の、#なしの16進コードです。3桁または6桁の16進数にすることができます。 7db461
data-button_text_color 購入ボタンのテキストの色の、#がついていない16進コードです。3桁または6桁の16進数にすることができます。 ffffff
data-background_color 購入ボタンを囲むエリアの背景色です。16進コード (上記のルールに準拠) またはtransparentにすることができます。transparentの場合、埋め込みコンテンツにパディングが適用されません。 transparent
data-show_product_price 商品価格を表示するかどうかについて、上書きします。trueまたはfalseにすることができます。 data-has_imageの現在値
data-show_product_title 商品名を表示するかどうかについて、上書きします。trueまたはfalseにすることができます。 data-has_imageの現在値
data-buy_button_out_of_stock_text 商品が在庫切れのときに表示されるテキストです。 在庫切れ
data-buy_button_product_unavailable_text 商品が利用不可能の場合に表示されるテキストです。 利用できません
data-product_title_color 商品名のテキストの色の、#が付いていない16進コードです。3桁または6桁の16進数にすることができます。 000000

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

ウェブサイトのカートの外観や動作を変更する場合、個別のHTMLコードスニペットを追加し、その属性を編集する必要があります。それぞれの属性により、カートの外観や動作方法の各部分が管理されます。

ウェブサイトのカートを編集するには、次の操作を行ってください。

  1. 編集するカートを含むページのHTMLを開きます。

  2. 以下のコードを貼り付けます。

<div data-sticky="true" data-embed_type="cart" data-shop="your-shop-name.myshopify.com"></div>
<script type="text/javascript">document.getElementById('ShopifyEmbedScript') || document.write('<script type="text/javascript" src="https://widgets.shopifyapps.com/assets/widgets/embed/client.js" id="ShopifyEmbedScript"><\/script>');</script>

  1. your-shop-name.myshopify.comをストアのmyshopify.comアドレスに置き換えます。

  2. カートのメインdivタグに関連する属性を追加して、必要な値を含むように変更します。たとえば、カートの上部に表示されるテキストを変更する場合は、コードスニペットのメインdivタグにdata-cart_title="your text"を追加してください。追加した後は以下のようになります。

<div data-sticky="true" data-embed_type="cart" data-shop="your-shop-name.myshopify.com" data-cart_title="your text">
  1. 完了したら、変更を保存します。

カートの属性

ウェブサイトのカートを編集するために使用できる、多くの属性があります。

カートのカスタマイズ属性
属性 値 デフォルト
data-shop 関連するmyshopifyドメイン (storename.myshopify.comなど) です。 Shopifyドメイン
data-embed_type 購入ボタン、埋め込みコレクション、埋め込みカートの埋め込みコードを識別します。可能値は、product、cart、collectionです。 カート
data-checkout_button_text カート内のチェックアウトページにつながるボタン (カートボタンではない) に表示されるテキストです。 チェックアウト
data-button_text_color カートボタンのテキストの色の、#がついていない16進コードです。3桁または6桁の16進数にすることができます。 ffffff
data-button_background_color カートボタンの色の、#なしの16進コードです。3桁または6桁の16進数にすることができます。 7db461
data-background_color 埋め込みカートを囲むエリアの背景色です。16進コード (上記のルールに準拠) またはtransparentにすることができます。transparentの場合、埋め込みコンテンツにパディングが適用されません。 transparent
data-text_color カートボタンのテキストの色の、#がついていない16進コードです。3桁または6桁の16進数にすることができます。 000000
data-accent_color カートの周りに表示される枠線の色の、#がついていない16進コードです。3桁または6桁の16進数にすることができます。 000000
data-cart_title ページで開いたときに埋め込みカートの上に表示されるテキストです。 ショッピングカート
data-cart_total_text 埋め込みカートの合計金額の横に表示されるテキストです。 合計
data-discount_notice_text 埋め込みカートに表示されるディスカウントの通知です。 チェックアウト時に配送とクーポンコードが追加されます。
data-sticky ボタンがマークアップに設置された場所に表示されるか、ページの横側に貼り付けられるかを示します。最近構築された埋め込みカートでは、埋め込みコード出力でtrueに設定されています。 false
data-empty_cart_text カートが空の場合に表示されるテキストです。 カートは空です。
data-next_page_button_text 埋め込みコレクション内の [次のページ] ボタンに表示されるテキストです。 次のページ

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

埋め込みコレクションの埋め込みコードには、2つのdiv要素が含まれています。1つ目のdiv要素には埋め込みカートのコードが含まれ、2つ目のdiv要素には埋め込み購入ボタンのコードが含まれています。この2つの要素がコレクション内の各商品のモーダルウィンドウボタンを構成しています。

2つ目のdiv要素には以下のような属性を含むものもあります。

購入ボタンコードの属性の定義
属性 値 デフォルト
data-collection_handle コレクションのタイトルに基づく、特集コレクションのハンドルです。各コレクションには、Shopifyの固有のハンドルがあります。 特集コレクションのハンドル
data-embed_type 購入ボタン、埋め込みコレクション、埋め込みカートの埋め込みコードを識別します。可能値は、product、cart、collectionです。 コレクション

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

無料体験を試す