購入ボタンまたは埋め込みカートの編集または削除
購入ボタンとカートは、ウェブページのソースHTMLに追加する埋め込みコードにより生成されます。ウェブページのボタンまたはカートの外観や動作を変更するには、関連する埋め込みコードを変更する必要があります。
購入ボタン、埋め込みコレクション、埋め込みカートを削除する
既存の購入ボタン、コレクション、埋め込みカートを削除するには、次の操作を行ってください。
購入ボタン、埋め込みコレクション、埋め込みカートを含むウェブページのソースHTMLを開きます。
ソースHTMLから埋め込みコード全体を削除します。埋め込みコードは、次のような購入ボタンのコードになります。
- 変更を保存する。
購入ボタンを編集する
既存の購入ボタンの外観や設定を変更するには、ソースHTMLに表示される埋め込みコードにある、メインのdiv
タグの内容を編集する必要があります。
埋め込み購入ボタンの各機能は、メインのdiv
タグの異なる属性で管理されます。これらの属性は、直接ソースHTMLで追加、削除、更新できます。
たとえば、チェックアウトページではなく商品ページに、既存の購入ボタンでユーザーを誘導する場合、以下の手順を実行します。
変更する購入ボタンを含むページのHTMLを開きます。
購入ボタンの埋め込みコードのメイン
div
タグ内にあるdata-redirect_to
属性を探します。属性の値を
product
に変更します。変更を保存する。
購入ボタンのメインの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コードスニペットを追加し、その属性を編集する必要があります。それぞれの属性により、カートの外観や動作方法の各部分が管理されます。
ウェブサイトのカートを編集するには、次の操作を行ってください。
編集するカートを含むページのHTMLを開きます。
以下のコードを貼り付けます。
your-shop-name.myshopify.com
をストアのmyshopify.com
アドレスに置き換えます。カートのメインdivタグに
関連する属性
を追加して、必要な値を含むように変更します。たとえば、カートの上部に表示されるテキストを変更する場合は、コードスニペットのメインdiv
タグにdata-cart_title="your text"
を追加してください。追加した後は以下のようになります。
- 完了したら、変更を保存します。
カートの属性
ウェブサイトのカートを編集するために使用できる、多くの属性があります。
属性 | 値 | デフォルト |
---|---|---|
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 です。 |
コレクション |