オンラインストアに動的チェックアウトボタンを表示する

動的チェックアウトボタンは、単一商品向けの [カートに追加する] ボタンの代わりとなるボタンです。動的チェックアウトボタンを使用すると、顧客はカートをスキップして直接チェックアウトに進むことができます。顧客は、Shopifyや他の馴染みがある簡単なチェックアウト方法でチェックアウトすることができます。これにより、決済処理がスピードアップし、顧客は馴染みがある方法でチェックアウトすることができます。

メモ

動的チェックアウトボタンは、Shopifyテーマストアのテーマのすべての最新バージョンで利用できます。旧バージョンのテーマを使用している場合は、動的チェックアウトボタンを使用できるようテーマを更新します。テーマを更新したくない場合は、テーマコードを編集します。

概要

動的チェックアウトボタンは、テーマとお客様のデバイスに応じて、[カートに追加する] ボタンの横または下に表示されます。動的チェックアウトボタンには2種類あります。

• ブランドなしボタンには [今すぐ購入] テキストが表示されます。お客様がブランドなしの [今すぐ購入] ボタンをクリックすると、カートをスキップしてチェックアウトに移動します。

• ブランドありのボタンには、外部サービスによる簡単なチェックアウト方法のロゴが含まれます。お客様がApple Payなどの外部サービスによる簡単なチェックアウトのブランドボタンをクリックすると、情報が事前入力された状態でその方法のチェックアウトに移動します。簡単なチェックアウトについて詳しくはこちらをご覧ください。以下の外部サービスによる簡単なチェックアウト方法を利用できます。 - Amazon Pay - Apple Pay - Google Pay - PayPal - Shop Pay - Venmo

ブランドボタンとして表示される前に、各決済方法には特定の要件があります。

お客様に表示される動的チェックアウトボタンの種類は、以下の要因によって異なります。

• 決済設定
• Shop Promiseが有効かどうか。他のチェックアウトよりもShop Payが優先される
• お客様のブラウザ
• お客様のデバイス
• お客様個人の決済履歴

オンラインストアに動的チェックアウトボタンを追加する際に、動的チェックアウトボタンの表示または非表示を選択できますが、ブランド付きまたはブランドなしの動的チェックアウトボタンの表示をカスタマイズすることはできません。決済設定で有効にした決済方法に応じて、ブランドボタンが表示されます。外部サービスの簡単なチェックアウト方法を有効にしていない場合、ブランドなしのボタンのみが表示されます。ブランドなしの動的チェックアウトボタンの色やフォントをカスタマイズできますが、ブランド付きのボタンはカスタマイズできません。

ストアでギフトカードまたはクーポンコードを使用している場合も、お客様はチェックアウト時にコードを入力できます。

動的チェックアウトボタンをオンラインストアに追加すると、有効化した決済方法の動的チェックアウトボタンをテストできます。

互換性

動的チェックアウトボタンがオンラインストアに適さないケースがいくつかあります。オンラインストアに動的チェックアウトボタンを含める前に、以下の機能との互換性を考慮してください。

• アプリ
• カートの属性
• 商品、決済設定、ボタンテキスト

アプリ

動的チェックアウトボタンが特定のアプリと競合する可能性があります。

次の種類のアプリを使用すると、動的チェックアウトボタンとオンラインストアとの互換性がなくなる場合があります。

• 通貨コンバーター
• カートと相互作用するアプリ
• 顧客を外部のチェックアウトに導くアプリ

カートの属性

動的チェックアウトボタンはカート属性をサポートしていません。カート属性とは、カートページで顧客から追加情報を収集できるカスタムフォームフィールドです。

カート属性の例には、カートページへの次の追加が含まれます。

• 利用規約のチェックボックス
• ギフト包装オプション
• 配達日付ピッカーツール

カート属性に依存する場合、動的チェックアウトボタンはオンラインストアには適していません。

商品、決済設定、ボタンテキスト

オンラインストアに動的チェックアウトボタンを含める前に、以下の点を考慮してください。

• 動的チェックアウトボタンは、商品の単一のバリエーションを購入する場合のみ使用できます。ただし、商品ページに数量セレクターを表示すると、お客様はその商品を複数購入することができます。たとえば、お客様は動的チェックアウトボタンを使用して水色のベーキングカップを3個購入することはできますが、水色で1個、紫色で1個購入することはできません。オンラインストアで1種類の商品を大量に受注しない限り、動的チェックアウトボタンは売上に貢献しない可能性があります。
• 決済設定で外部サービスの簡単なチェックアウトを有効にしていない場合は、ブランドなしのバージョンの動的チェックアウトボタンのみが表示されます。
• ブランドなしのバージョンの動的チェックアウトボタンには、[今すぐ購入] テキストが含まれます。[カートに追加する] ボタンに [今すぐ購入] またはその他のカスタムテキストが表示されていると、お客様が混乱する可能性があります。

テーマをアップデートして動的チェックアウトボタンを使用する

動的チェックアウトボタンは、Shopify テーマストアのすべての最新バージョンのテーマで利用できます。旧バージョンのテーマを使用している場合は、動的チェックアウトボタンを使用できるようテーマを更新します。テーマを更新したくない場合は、テーマコードを編集します。

商品ページに動的チェックアウトボタンを表示する

手順

デスクトップ

1. 管理画面から [オンラインストア] > [テーマ] に移動します。

2. 編集するテーマの横の [カスタマイズ] をクリックします。

3. [ホームページ] ドロップダウンメニューをクリックします。

4. [商品] をクリックし、編集するテンプレートを選択します。

5. [商品情報] セクションで、[購入ボタン] をクリックします。

6. [動的チェックアウトボタンを表示する] を選択します。

7. [保存] をクリックします。

8. オプション：動的チェックアウトボタンをテストします。

iPhone

1. Shopifyアプリで [...] ボタンをタップします。
2. 販売チャネルセクションで、[オンラインストア] をタップします。
3. [テーマを管理する] をタップします。
4. 編集するテーマを見つけて、[カスタマイズする] をタップします。
5. [テンプレート] をタップします。
6. [商品ページ] を選択します。
7. [商品ページ] または [商品] セクションをタップします。
8. [動的チェックアウトボタンを表示する] をオンにします。
9. [保存] をタップします。
10. オプション：動的チェックアウトボタンをテストします。

Android

1. Shopifyアプリで [...] ボタンをタップします。
2. 販売チャネルセクションで、[オンラインストア] をタップします。
3. [テーマを管理する] をタップします。
4. 編集するテーマを見つけて、[カスタマイズする] をタップします。
5. [テンプレート] をタップします。
6. [商品ページ] を選択します。
7. [商品ページ] または [商品] セクションをタップします。
8. [動的チェックアウトボタンを表示する] をオンにします。
9. [保存] をタップします。
10. オプション：動的チェックアウトボタンをテストします。

特集商品セクションに動的チェックアウトボタンを表示する

ほとんどのテーマには、特集商品セクションに動的チェックアウトボタンが含まれた設定があります。

手順

デスクトップ

1. 管理画面から [オンラインストア] > [テーマ] に移動します。

2. 編集するテーマの横の [カスタマイズ] をクリックします。

3. 既存の特集商品セクションをクリックするか、[セクションを追加] > [特集商品] の順にクリックして、新しい特集商品セクションを追加します。

4. [特集商品] セクションで、[購入ボタン] をクリックします。

5. [動的チェックアウトボタンを表示する] を選択します。

6. [保存] をクリックします。

7. オプション：動的チェックアウトボタンをテストします。

iPhone

1. Shopifyアプリで [...] ボタンをタップします。
2. 販売チャネルセクションで、[オンラインストア] をタップします。
3. [すべてのテーマを管理する] をタップします。
4. 編集するテーマを見つけて、[カスタマイズする] をタップします。
5. [編集] をタップします。
6. 既存の特集商品セクションをタップするか、[セクションを追加] をタップして、新しい特集商品セクションを追加します。
7. 商品の詳細を入力し、[動的チェックアウトボタンを表示する] をオンにします。
8. [保存] をタップします。
9. オプション：動的チェックアウトボタンをテストします。

Android

1. Shopifyアプリで [...] ボタンをタップします。
2. 販売チャネルセクションで、[オンラインストア] をタップします。
3. [すべてのテーマを管理する] をタップします。
4. 編集するテーマを見つけて、[カスタマイズする] をタップします。
5. [編集] をタップします。
6. 既存の特集商品セクションをタップするか、[セクションを追加] をクリックして、新しい特集商品セクションを追加します。
7. 商品の詳細を入力し、[動的チェックアウトボタンを表示する] をオンにします。
8. [保存] をタップします。
9. オプション：動的チェックアウトボタンをテストします。

商品ページで動的チェックアウトボタンを非表示にする

商品ページにある動的チェックアウトボタンをすべて非表示にすることはできますが、特定の動的チェックアウトボタンだけを非表示にすることはできません。

手順

デスクトップ

1. 管理画面から [オンラインストア] > [テーマ] に移動します。

2. 編集するテーマの横の [カスタマイズ] をクリックします。

3. [ホームページ] ドロップダウンメニューをクリックします。

4. [商品] をクリックし、編集するテンプレートを選択します。

5. [商品情報] セクションで、[購入ボタン] をクリックします。

6. [動的チェックアウトボタンを表示する] を選択解除します。

7. [保存] をクリックします。

iPhone

1. Shopifyアプリで [...] ボタンをタップします。
2. 販売チャネルセクションで、[オンラインストア] をタップします。
3. [テーマを管理する] をタップします。
4. 編集するテーマを見つけて、[カスタマイズする] をタップします。
5. [テンプレート] をタップします。
6. [商品ページ] を選択します。
7. [商品ページ] または [商品] セクションをタップします。
8. [動的チェックアウトボタンを表示する] のチェックを外します。
9. [保存] をタップします。

Android

1. Shopifyアプリで [...] ボタンをタップします。
2. 販売チャネルセクションで、[オンラインストア] をタップします。
3. [テーマを管理する] をタップします。
4. 編集するテーマを見つけて、[カスタマイズする] をタップします。
5. [テンプレート] をタップします。
6. [商品ページ] を選択します。
7. [商品ページ] または [商品] セクションをタップします。
8. [動的チェックアウトボタンを表示する] のチェックを外します。
9. [保存] をタップします。

特集商品セクションで動的チェックアウトボタンを非表示にする

特集商品セクションにある動的チェックアウトボタンをすべて非表示にすることはできますが、特定の動的チェックアウトボタンだけを非表示にすることはできません。

手順

デスクトップ

1. 管理画面から [オンラインストア] > [テーマ] に移動します。

2. 編集するテーマの横の [カスタマイズ] をクリックします。

3. [特集商品] セクションをクリックします。

4. [動的チェックアウトボタンを表示する] を選択解除します。

5. [保存] をクリックします。

iPhone

1. Shopifyアプリで [...] ボタンをタップします。
2. 販売チャネルセクションで、[オンラインストア] をタップします。
3. [すべてのテーマを管理する] をタップします。
4. 編集するテーマを見つけて、[カスタマイズする] をタップします。
5. [編集] をタップします。
6. [特集商品] セクションをタップします。
7. [動的チェックアウトボタンを表示する] のチェックを外します。
8. [保存] をタップします。

Android

1. Shopifyアプリで [...] ボタンをタップします。
2. 販売チャネルセクションで、[オンラインストア] をタップします。
3. [すべてのテーマを管理する] をタップします。
4. 編集するテーマを見つけて、[カスタマイズする] をタップします。
5. [編集] をタップします。
6. [特集商品] セクションをタップします。
7. [動的チェックアウトボタンを表示する] のチェックを外します。
8. [保存] をタップします。

一部の商品だけに動的チェックアウトボタンを表示する

一部の商品だけに動的チェックアウトボタンを表示する場合は、代替テンプレートを作成します。代替テンプレートは、元のテンプレートに影響を与えずに編集できる複製したテーマコードテンプレートです。代替商品テンプレートを使用すると、あるテンプレートを使用する商品には動的チェックアウトボタンを表示し、別のテンプレートを使用する商品には動的チェックアウトボタンを非表示にすることができます。

代替商品テンプレートの作成については、「新しいテンプレートを作成する」を参照してください。

代替商品テンプレートを作成して商品に割り当てた後、当該商品の動的チェックアウトボタンの表示と非表示を選択できます。

手順

デスクトップ

1. 管理画面から [オンラインストア] > [テーマ] に移動します。

2. 代替テンプレートを作成したテーマの横にある [カスタマイズ] をクリックします。

3. 代替テンプレートを割り当てた商品の商品ページに移動します。

4. [商品情報] セクションで、[購入ボタン] をクリックします。

5. 代替テンプレートを使用する商品の動的チェックアウトボタンを表示するには、[動的チェックアウトボタンを表示する] を選択します。代替テンプレートを使用する商品の動的チェックアウトボタンを非表示にするには、[動的チェックアウトボタンを表示する] を選択解除します。

6. [保存] をクリックします。変更は、代替テンプレートを使用するあらゆる商品に適用されます。

7. オプション：動的チェックアウトボタンをテストします。

iPhone

1. Shopifyアプリで [...] ボタンをタップします。
2. 販売チャネルセクションで、[オンラインストア] をタップします。
3. [テーマを管理する] をタップします。
4. 代替テンプレートを作成したテーマを見つけて、[カスタマイズする] をタップします。
5. テーマエディタで、代替テンプレートを割り当てた商品の商品ページに移動します。
6. [商品ページ] または [商品] セクションをタップします。
7. 代替テンプレートを使用する商品の動的チェックアウトボタンを表示するには、[動的チェックアウトボタンを表示する] をオンにします。代替テンプレートを使用する商品の動的チェックアウトボタンを非表示にするには、[動的チェックアウトボタンを表示する] のチェックを外します。
8. [保存] をタップします。変更は、代替テンプレートを使用するあらゆる商品に適用されます。
9. オプション：動的チェックアウトボタンをテストします。

Android

1. Shopifyアプリで [...] ボタンをタップします。
2. 販売チャネルセクションで、[オンラインストア] をタップします。
3. [テーマを管理する] をタップします。
4. 代替テンプレートを作成したテーマを見つけて、[カスタマイズする] をタップします。
5. テーマエディタで、代替テンプレートを割り当てた商品の商品ページに移動します。
6. [商品ページ] または [商品] セクションをタップします。
7. 代替テンプレートを使用する商品の動的チェックアウトボタンを表示するには、[動的チェックアウトボタンを表示する] をオンにします。代替テンプレートを使用する商品の動的チェックアウトボタンを非表示にするには、[動的チェックアウトボタンを表示する] のチェックを外します。
8. [保存] をタップします。変更は、代替テンプレートを使用するあらゆる商品に適用されます。
9. オプション：動的チェックアウトボタンをテストします。