サムネイル

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

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

おすすめ Shopify アプリ

シンプルギフトラッピング|お手軽ギフト包装アプリのアイコン

シンプルギフトラッピング|お手軽ギフト包装アプリ

シンプルな日本製のギフトラッピングアプリ。カートページに簡単にギフト包装オプションを追加できます。

シンプル購入制限|お手軽注文制限について徹底解説のアイコン

シンプル購入制限|お手軽注文制限について徹底解説

シンプルな日本製の購入数制限アプリ。商品ごとに数量の規制を行えます。

シンプルランキング表示|お手軽ベストセラーのアイコン

シンプルランキング表示|お手軽ベストセラー

購入促進!コレクションにランキングラベルを表示してストアの人気商品をアピール

シンプル顧客タグごとの限定販売|お手軽ロイヤリティのアイコン

シンプル顧客タグごとの限定販売|お手軽ロイヤリティ

日本製の顧客タグごとの購入制限アプリ。特定のタグを持つ顧客への限定販売を簡単に実現できます。

シンプルロゴ一覧|お手軽ロゴリスト表示のアイコン

シンプルロゴ一覧|お手軽ロゴリスト表示

シンプルなロゴリストアプリ。ストアにロゴリストを簡単に導入できます。

シンプル余白調整|お手軽レイアウトのアイコン

シンプル余白調整|お手軽レイアウト

シンプルな日本製の余白調整アプリ。余白を挿入することでページデザインの調整が簡単にできます。

シンプルのし(熨斗)アプリのアイコン

シンプルのし(熨斗)アプリ

シンプルな日本製のしアプリ。のし選択機能を簡単に実現できます。

シンプル画像バナー|お手軽広告バナーアプリのアイコン

シンプル画像バナー|お手軽広告バナーアプリ

シンプルな画像バナーアプリ。ストアに画像バナーを簡単に表示できます。

シンプル Q&A|どこでも FAQのアイコン

シンプル Q&A|どこでも FAQ

シンプルな Q&A アプリ。ストアに FAQ を簡単に導入できます。

シンプルモバイルアプリバナー|スマホアプリに誘導のアイコン

シンプルモバイルアプリバナー|スマホアプリに誘導

シンプルなモバイルアプリバナー。ストアにモバイルアプリバナーを簡単に導入できます。

シンプル流れる告知|流れるお知らせ挿入アプリのアイコン

シンプル流れる告知|流れるお知らせ挿入アプリ

シンプルな流れる告知アプリ。ストアに流れる告知を簡単に導入できます。

シンプル売り切れ非表示|在庫切れ商品の表示変更のアイコン

シンプル売り切れ非表示|在庫切れ商品の表示変更

売り切れ商品を非表示にすることができる日本製アプリ。売り切れになった商品を、自動的に非表示(下書き状態)にすることができます。

シンプルレビュー|お手軽口コミのアイコン

シンプルレビュー|お手軽口コミ

シンプルな日本製のレビューアプリ。レビュー機能を簡単に実現できます。

シンプル会員限定販売|お手軽アカウント必須販売のアイコン

シンプル会員限定販売|お手軽アカウント必須販売

シンプルな日本製の会員限定販売アプリ。商品毎に、ログインしていない顧客の購入制限を行えます。

シンプル会員ランク|お手軽顧客タグ付けのアイコン

シンプル会員ランク|お手軽顧客タグ付け

日本製の会員ランク管理アプリ。条件を達成した顧客に自動でタグを追加し、顧客管理を手助けします。

シンプル Wishlist|お手軽お気に入りのアイコン

シンプル Wishlist|お手軽お気に入り

商品数・お気に入り数の上限なしで使えるお手軽お気に入りアプリ。簡単にお気に入り機能を実現できます。

シンプル Coming Soon|商品ページ発売予告アプリのアイコン

シンプル Coming Soon|商品ページ発売予告アプリ

シンプルな日本製の Coming Soonアプリ。商品毎に発売予告を行えます。

シンプルセット販売|お手軽クロスセルのアイコン

シンプルセット販売|お手軽クロスセル

シンプルな日本製のセット販売アプリ。セット販売でのクロスセルを簡単に実現できます。

シンプル予約販売|受注販売や在庫切れ商品販売で使えるのアイコン

シンプル予約販売|受注販売や在庫切れ商品販売で使える

日本製の予約販売アプリ。予約販売や受注販売、在庫切れ商品販売を簡単に実現できます。

シンプル販売期間設定|商品ごとに期間限定販売のアイコン

シンプル販売期間設定|商品ごとに期間限定販売

シンプルな日本製の期間限定販売アプリ。商品ごとに販売期間を設定することができます。

シンプルVIPプログラム|お手軽VIP会員限定販売のアイコン

シンプルVIPプログラム|お手軽VIP会員限定販売

日本製の VIP 限定販売アプリ。特別な顧客を対象とした限定商品の販売を簡単に実現できます。

シンプルポイント|追加料金なしで使えるお手軽ポイントアプリのアイコン

シンプルポイント|追加料金なしで使えるお手軽ポイントアプリ

シンプルな日本製の定額ポイントアプリ。顧客はポイントをそのまま利用することができます。

おすすめ記事