サムネイル

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

目次

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)」

まとめ

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

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

アプリの特徴

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

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

おすすめ Shopify アプリ

シンプル追従営業日カレンダー|お手軽追従休業日設定のアイコン

シンプル追従営業日カレンダー|お手軽追従休業日設定

営業日カレンダーをストアに常に追従表示。定休日や臨時休業がお客様にひと目で伝わり、安心してお買い物いただけます。

シンプル店舗受け取り|お手軽ローカルピックアップのアイコン

シンプル店舗受け取り|お手軽ローカルピックアップ

お客様がカートページで受け取り店舗・日時を指定できます。テイクアウトや店舗受け取りにおすすめです。

シンプル注文履歴おすすめ商品|お手軽マイページアップセルのアイコン

シンプル注文履歴おすすめ商品|お手軽マイページアップセル

マイページの注文ページに、商品ごとに設定したおすすめ商品を表示。再購入を後押しします。

シンプル顧客メタフィールドCSVインポート・エクスポートのアイコン

シンプル顧客メタフィールドCSVインポート・エクスポート

顧客メタフィールドをCSVで一括管理。エクスポート・編集・インポートがかんたんに。

シンプルフォーム一体型LP|お手軽チャットボット購入のアイコン

シンプルフォーム一体型LP|お手軽チャットボット購入

チャットボット形式でお客様が迷わず注文できるLPを設置できます。コーディング不要で、テーマエディタから簡単に設定できます。

シンプル商品メタフィールドCSVインポート・エクスポートのアイコン

シンプル商品メタフィールドCSVインポート・エクスポート

商品やバリエーションのメタフィールドをCSVで一括管理。インポートもエクスポートもこのアプリひとつで完了。

シンプル新しいお客様アカウント拡張|生年月日・追加フォームのアイコン

シンプル新しいお客様アカウント拡張|生年月日・追加フォーム

誕生日や性別などの項目を、お客様アカウントのプロフィールページに追加できます。コーディング不要です。

シンプル2点目購入割引|2点目以降自動セール設定のアイコン

シンプル2点目購入割引|2点目以降自動セール設定

2点目以降の購入で自動割引。割引バッジと対象商品の表示で、まとめ買いを後押しします。

関連記事