Shopifyストアに追従する今すぐ購入ボタンを表示できるアプリについて徹底解説｜ご利用ガイド

はじめに

今回の記事は、Shopify アプリである「シンプル追従今すぐ購入ボタン｜お手軽追従チェックアウト」の解説記事です。

Shopify とは、ざっくり説明すると、EC サイトを簡単に構築できるプラットフォームであり、Shopify アプリとはそのプラットフォームを拡張する機能のようなものです。WordPress のプラグインのようなもの、とご認識いただいて大丈夫です。

「シンプル追従今すぐ購入ボタン｜お手軽追従チェックアウト」は、トップページ・商品ページ・コレクションページに追従型の今すぐ購入ボタンを表示する Shopify アプリです。ユーザーがスクロールしてもボタンが常に表示されるため、カートへの導線を逃しません。スマホユーザーや一度離脱しがちな顧客にもスムーズな購入体験を提供でき、コンバージョン率の改善に効果的です。

ご興味のある方は、以下の URL からインストールしてみてください。

シンプル追従今すぐ購入ボタン｜お手軽追従チェックアウト

「シンプル追従今すぐ購入ボタン｜お手軽追従チェックアウト」でできること

「シンプル追従今すぐ購入ボタン｜お手軽追従チェックアウト」を使うと、以下のことが実現できます。

1. 簡単に追従（固定）今すぐ購入ボタンを追加できる！

商品ページに常に表示される追従型の購入ボタンを設置できます。ページをスクロールしても画面下部にボタンが固定され、離脱を防ぎながらコンバージョン率を向上させます。

2. 固定（追従）ボタンは複数の種類から選べる！

ボタンのスタイルやデザインを複数の選択肢から選ぶことができ、ストアのブランドイメージに合わせてカスタマイズできます。

3. ノーコードでカスタマイズできる！

プログラミング知識は一切不要。直感的な操作でボタンの色、サイズ、テキストなどを自由にカスタマイズできます。専門知識がなくても、簡単に導入・設定が可能です。

4. 1 クリックでテーマに追加できる！

面倒な設定は不要。ワンクリックでお使いの Shopify テーマに追従型今すぐ購入ボタンを追加できます。すぐに効果を実感できます。

---

アプリのインストール

それでは、実際にアプリのインストールを行っていきましょう。

シンプル追従今すぐ購入ボタン｜お手軽追従チェックアウト

ストア管理画面左下の「設定」をクリックします。

ストアの管理画面の「アプリと販売チャネル」画面に表示されている「Shopify App Store」をクリックして、Shopify App Store に移動してください。

検索窓に、「シンプル追従今すぐ購入ボタン｜お手軽追従チェックアウト」と入力してください。
以下の画像のアプリをクリックしてください。

「インストール」ボタンをクリックして、ストアにアプリを追加しましょう。マーチャント用のアカウント（実際に物販などで運用しているアカウント）ですと、月額 $6.99 でご利用いただけます。インストール後、1 週間は無料でご利用いただけます。

「インストール」ボタンをクリックすると以下の画面に遷移します。右下の「インストール」ボタンをクリックして、アプリのインストールを行いましょう。

以下の管理画面が表示されます。

テーマに追従今すぐ購入ボタンを追加する

テーマに追従型今すぐ購入ボタン機能を追加していきます。

自動追加

テーマに追従今すぐ購入ボタンを自動追加します。

アプリ管理画面で追加したいテーマを選択し、「テーマに追加」ボタンをクリックしてください。

すると、テーマにアプリが自動追加されます。
問題なく追加されていることを確認し、右上の「保存する」をクリックしてください。
エラーで失敗する場合や別のページに追加したい場合、画像ボタンを追加したい場合は次の「手動でアプリをテーマに追加」に進んでください。

手動追加

自動追加がエラーで失敗する場合や別のページに追加したい場合、画像ボタンを追加したい場合は手動で追加していきます。

アプリ管理画面で追加したいテーマを選択し、「テーマをプレビュー」ボタンをクリックしてください。

するとテーマのカスタマイズ画面に遷移するので、追従今すぐ購入ボタンを表示したいページに移動し、サイドバーの「セクションを追加」をクリックします。

すると、以下の画面が開くので、「アプリ」タブ内にある「追従今すぐ購入ボタン」または「追従今すぐ購入画像ボタン」をクリックします。

アプリブロックが追加されていることを確認し、右上の「保存する」をクリックしてください。

以上で追従今すぐ購入ボタン機能の追加が完了しました。

アプリブロックのカスタマイズ

アプリの設定が完了したら、アプリブロックをカスタマイズしていきましょう。
カスタマイズ画面を開き、購入ボタンを追加したページに遷移してください。

追従今すぐ購入ボタンの設定

追従今すぐ購入ボタンのカスタマイズをしていきます。

サイドバーの「追従今すぐ購入ボタン｜シンプル追従今すぐ購入ボタン」をクリックしてください。
※ アプリブロック内で商品を指定している場合、上記のアプリブロック名の代わりにその商品名が表示されます。

以下のような設定項目が表示されます。

1. 商品の設定

今すぐ購入ボタンに紐づける商品を指定できます。
購入ボタンをクリックすると、ここで指定した商品のチェックアウト画面に遷移します。
バリエーションのある商品が指定された場合、バリエーション選択欄が表示されます。

2. 今すぐ購入ボタンの設定

以下の項目で、今すぐ購入ボタンに表示するテキストを指定できます。

• ボタンラベル（販売可能）: 在庫がある場合に表示されるテキスト
• ボタンラベル（売り切れ）: 在庫がない場合に表示されるテキスト

以下の項目で、ボタン各部のサイズを指定できます。

• ボタンの幅（PC）: PC 表示時のボタンの幅
• ボタンの幅（スマホ）: スマホ表示時のボタンの幅
• ボタンの高さ（PC）: PC 表示時のボタンの高さ
• ボタンの高さ（スマホ）: スマホ表示時のボタンの高さ
• ボタンの文字サイズ（PC）: PC 表示時の文字サイズ
• ボタンの文字サイズ（スマホ）: スマホ表示時の文字サイズ

以下の項目で、ボタンの各部の色や文字の太さを指定できます。

• ボタンの背景色: ボタンの背景色
• ボタン文字色: ボタンのテキストの色
• ボタン枠線の色: ボタンの枠線の色
• ボタン文字の太さ: テキストの太さ（400: 標準、700: 太字）

以下の項目で、ボタンの枠線のスタイルや影を指定できます。

• ボタン枠線の太さ: 枠線の太さ（ピクセル単位）
• ボタン角の丸み: ボタンの角の丸み（ピクセル単位）
• ボタン影の大きさ: ボタンの影の効果（なし、小、中、大から選択）

以下の項目で、ボタンとバリアントセレクター間の余白を指定できます。

• ボタンとセレクター間の余白（PC）: PC 表示時の余白
• ボタンとセレクター間の余白（スマホ）: スマホ表示時の余白

3. セレクターの設定

バリアントセレクターのラベルのテキストやサイズを指定できます。

• セレクターのラベル: バリアント選択欄の見出しテキスト
• セレクターのラベルの文字サイズ: ラベルの文字サイズ

4. ボタンコンテナの設定

ボタンコンテナの背景色や余白、影の指定ができます。

• コンテナの背景色: ボタン全体を囲むコンテナの背景色
• コンテナの内側上下の余白（PC）: PC 表示時の上下の内側余白
• コンテナの内側上下の余白（スマホ）: スマホ表示時の上下の内側余白
• コンテナの内側左右の余白（PC）: PC 表示時の左右の内側余白
• コンテナの内側左右の余白（スマホ）: スマホ表示時の左右の内側余白
• コンテナの影の大きさ: コンテナの影の効果（なし、小、中、大から選択）

5. その他の設定

追加の CSS を指定して、より細かなデザインを実現できます。

追従今すぐ購入画像ボタンの設定

「追従今すぐ購入画像ボタン」のカスタマイズ方法を解説します。
このセクションでは、任意の画像を今すぐ購入ボタンとして表示させることができます。

サイドバーの「追従今すぐ購入画像ボタン｜シンプル追従今すぐ購入ボタン」をクリックしてください。
※ アプリブロック内で商品を指定している場合、上記のアプリブロック名の代わりにその商品名が表示されます。
※ 画像ボタンを追加した場合、画像を設定するまで画面上に表示されません。

以下のような設定項目が表示されます。

1. 商品の設定

今すぐ購入ボタンに紐づける商品を指定できます。
購入ボタンをクリックすると、ここで指定した商品のチェックアウト画面に遷移します。
※ このセクションではバリエーションのある商品は非推奨です。（バリエーション選択機能がないため）バリエーションのある商品を指定した場合、常に先頭のバリエーションが選択された状態となります。

2. 今すぐ購入ボタンの設定

以下の項目で、今すぐ購入ボタンに表示する画像や PC 表示時の最大幅を指定できます。

• 販売可能時のボタン画像（PC）: PC 表示時の販売可能時に表示される画像
• 販売可能時のボタン画像（スマホ）: スマホ表示時の販売可能時に表示される画像
• 売り切れ時のボタン画像（PC）: PC 表示時の売り切れ時に表示される画像
• 売り切れ時のボタン画像（スマホ）: スマホ表示時の売り切れ時に表示される画像
• 画像の幅（PC）: PC 表示時の画像の最大幅

3. ボタンコンテナの設定

ボタンコンテナの背景色や余白、影の指定ができます。

• コンテナの背景色: ボタン全体を囲むコンテナの背景色
• コンテナの内側上下の余白（PC）: PC 表示時の上下の内側余白
• コンテナの内側上下の余白（スマホ）: スマホ表示時の上下の内側余白
• コンテナの影の大きさ: コンテナの影の効果（なし、小、中、大から選択）

4. その他の設定

追加の CSS を指定して、より細かなデザインを実現できます。

おわりに

今回は「シンプル追従今すぐ購入ボタン｜お手軽追従チェックアウト」を紹介しました。

• 追従型の今すぐ購入ボタンでユーザーの購入機会を逃さない
• スマホでも視認性抜群、購入導線をしっかり確保
• 数クリックで簡単設定、すぐに導入が可能
• 月額 $6.99 で 1 週間の無料トライアルもご利用可能

常に表示される追従型ボタンで、離脱を防ぎながらコンバージョン率を向上させてみてください。
ここまでお読みいただき、誠にありがとうございました。

シンプル追従今すぐ購入ボタン｜お手軽追従チェックアウト