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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

アプリの特徴

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

なお、今すぐ購入ボタン(カートのアイコン) にカーソルを合わせると、以下のように今すぐ購入ボタンに変化します。
image.png
image.png

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

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

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

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

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

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

カスタマイズできる項目

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

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

まとめ

今回は、Shopifyに今すぐ購入ボタンを設置する方法と、追従型の今すぐ購入ボタンを追加できるアプリについて解説しました。

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

アプリの特徴

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

ECサイトの操作性によって、コンバージョン率やリピート率は変わってくるもの。ユーザーにとって使いやすいサイトを設計するにあたっては、追従型の今すぐ購入ボタンの設置をぜひ検討してみてください。

おすすめ記事