Shopifyで追従型の今すぐ購入ボタンを設置できるアプリを解説

Shopify で追従型の今すぐ購入ボタンを設置できるアプリを解説
Shopify で今すぐ購入ボタンを設置する方法
- 画面をスクロールしても消えない、追従型の今すぐ購入ボタンを設置するならアプリの利用がおすすめ
追従購入ボタンらくらく挿入｜リテリア Buy Button の使い方
アプリのインストール方法
アプリのカスタマイズ方法
追従購入ボタンのおすすめアプリ
まとめ

Shopify で追従型の今すぐ購入ボタンを設置できるアプリを解説

今回は、「追従購入ボタンらくらく挿入｜リテリア Buy Button」について解説致します。

Shopify で今すぐ購入ボタンを設置する方法

EC サイトで購入したい商品が 1 つだけある場合、今すぐ購入ボタンがあるとすぐに支払い画面に移動できます。ユーザー目線では便利な機能です。

Shopify では、以下のような今すぐ購入ボタンを設置できます。

Shopify の今すぐ購入ボタン

Shopify で今すぐ購入ボタンを設置する方法は以下の通りです。

Shopify のストア管理画面でオンラインストア → テーマをクリックし、現在のテーマの項目でカスタマイズをクリックします。

カスタマイズをクリック

ストアが表示されるので、画面上・中央にあるボックスをクリックして商品 → デフォルトの商品をクリックします。

画面上・中央にあるボックスをクリック
デフォルトの商品をクリック

商品詳細画面に表示されているカートに追加するボタンをクリックします。
カートに追加するボタンをクリック

画面右側のカラムに動的チェックアウトボタンを表示するの項目があるので、チェックボックスをクリックして有効にします。
動的チェックアウトボタンを表示するを有効化

商品詳細画面に今すぐ購入ボタンが追加されているのが確認できます。
今すぐ購入ボタンの追加

ただし、このデフォルトの今すぐ購入ボタンは画面をスクロールすると消えてしまいます。
今すぐ購入ボタンが画面をスクロールすると消える

画面をスクロールしても消えない、追従型の今すぐ購入ボタンを設置するならアプリの利用がおすすめ

画面をスクロールしても消えない追従型の今すぐ購入ボタンを設置するなら、アプリを利用するのが便利です。

追従型の今すぐ購入ボタンを設置できるアプリ「追従購入ボタンらくらく挿入｜リテリア Buy Button」

アプリの特徴

商品詳細画面で追従型の今すぐ購入ボタンを追加できる
ノーコードで利用可能
好みのデザインにカスタマイズできる
Online Store 2.0 に完全対応しており、既存テーマ・アプリと干渉しない
月額料金は 2.99 ドル。7 日間の無料体験期間あり

このアプリでは、画面右下のような今すぐ購入ボタンを設置できます。この今すぐ購入ボタンは追従型のため、画面をスクロールしても常に表示されます。

アプリを使用したときのカスタマイズ画面

今すぐ購入ボタンをクリックすると、以下のようにカート画面に直接移動できる仕組みです。
今すぐ購入ボタンをクリックすると、カート画面に直接移動

通常、Shopify のデフォルトの今すぐ購入ボタンでは商品を 1 つだけしか購入できません。

しかしこのアプリなら、移動先のカート画面で買い物を続けるをクリックすることで複数の商品をまとめて購入できるため、ユーザーの買いたいタイミングを逃さずに済みます。
買い物を続けるをクリック

追従購入ボタンらくらく挿入｜リテリア Buy Button の使い方

ここからは、今すぐ購入ボタンを追加できるアプリのインストール方法と、カスタマイズの仕方について解説していきます。

アプリのインストール方法

Shopify のストア管理画面でアプリを追加をクリックし、出てきたポップアップの一番下にあるShopify アプリストアでアプリをさらに探すをクリックします。
Shopify アプリストアでアプリをさらに探すをクリック

Shopify のアプリストアで検索ボックスに追従購入ボタンらくらく挿入｜リテリア Buy Buttonと入力して Enter キーを押し、該当のアプリをクリックします。
追従購入ボタンらくらく挿入｜リテリア Buy Buttonと入力

アプリを追加するをクリックしましょう。
アプリを追加するをクリック

アプリをインストールをクリックします。
アプリをインストールをクリック

アプリのダッシュボードが表示されるので、テーマに反映でアプリのインストール先のテーマを選択して有効化をクリックします（ここでは Dawn を選択しています）。
有効化をクリック

アプリを有効化しましたというポップアップが出れば有効化は完了です。
アプリを有効化しましたと言うポップアップ表示

有効化ボタンの隣にあるプレビューをクリックしてみましょう。
プレビューをクリック

ストアが表示されるので、画面上・中央にあるボックスをクリックし、商品 → デフォルトの商品とクリックしていき、商品詳細画面を表示します。

商品 → デフォルトの商品をクリック

商品詳細画面に今すぐ購入ボタン（カートのアイコン） が追加されているのが確認できます。
今すぐ購入ボタン（カートのアイコン）が追加されているかを確認

この今すぐ購入ボタン（カートのアイコン） は追従型（画面を動かしてもついてくる仕組み）のため、試しに商品詳細画面を下の方までスクロールしても購入ボタンがついてきます。
購入ボタンが追従

なお、今すぐ購入ボタン（カートのアイコン） にカーソルを合わせると、以下のように今すぐ購入ボタンに変化します。
今すぐ購入ボタン（カートのアイコン）のホバー前
今すぐ購入ボタン（カートのアイコン）のホバー後

今すぐ購入ボタンをクリックすると、以下のようにカート画面に直接移動できます。商品も追加されていますね。
今すぐ購入ボタンをクリック

アプリのカスタマイズ方法

アプリのダッシュボードの画面でテーマに反映の項目にあるプレビューをクリックします。
プレビューをクリック

画面左側のカラムにあるアプリの項目でフローティング購入ボタンのアプリをクリックすると、画面右側のカラムに今すぐ購入ボタンの詳細設定画面が表示されます。
フローティング購入ボタンをクリック

この詳細設定画面では、以下の項目をカスタマイズできます。
カスタマイズ項目1
カスタマイズ項目2

カスタマイズできる項目

ボタンのラベルテキスト編集
テキストの色
テキストの色（ホバー時）
テキストの大きさ
アイコンの画像
ボタンの色
ボタンの色（ホバー時）
ボタンの枠線の大きさ
ボタンの枠線の丸み
ボタンの枠線の色
ホバー時の文字表示の有無
ボタン内側の上下・左右の余白
ブロック下・右の余白（PC・スマホ）

1 枚目がデフォルトの状態の今すぐ購入ボタンです。2 枚目は少しカスタマイズしたもの。このように、サイトに合わせてデザインを変更できます。

カスタマイズした今すぐ購入ボタン

追従購入ボタンのおすすめアプリ

ここで、別の追従購入ボタンを挿入するおすすめアプリについて紹介します。

シンプル追従カート｜追従購入ボタン（Buy Button）

「シンプル追従カート｜追従購入ボタン（Buy Button）」は、ストアにノーコードで追従カートを導入できるアプリです。このアプリでいう追従カートとは、商品画面で下へスクロールした際に画面に追従してくる購入ボタン・バリアントピッカー・数量セレクターのことです。
ストアに追従カートを追加することで、商品画面を下へスクロールした際に、購入ボタンを見失ってしまうのを防ぐことができます。また、バリエーションピッカーや数量セレクタの操作も追従カート内で完結できるため、顧客に対して高い購入体験を提供できます。

「シンプル追従カート｜追従購入ボタン（Buy Button）」では、ノーコードで追従カートを導入できる上、そのストアのスタイルに合わせて見た目を自由にカスタマイズできます。
追従カートを導入して、商品ページでのエンゲージメントの向上を図りましょう。

こちらのアプリを使うと、あなたのストアにノーコードで簡単に追従カートを導入できます。
「シンプル追従カート｜追従購入ボタン（Buy Button）」