.png&w=3840&q=75)
はじめに
今回は、Shopify に追従カート（追従ボタン）を設置するメリットや、おすすめのアプリについて調べてみました。
EC サイトで売上をより大きく成長させるためには、ユーザーエクスペリエンス（UX）の継続的な改善が不可欠です。その中でも、「追従カート（追従ボタン）」は、コンバージョン率を向上させる効果的な手法として注目を集めています。このブログでは、Shopify ストアに追従カートを設置するメリットや注意点などを解説したのち、おすすめのアプリを使った追従カートの実装方法をご紹介します。
それでは、頑張っていきましょう。
今回は、以下の記事を参考にしています。
- Shopify で追従カート（追従ボタン）を実装する方法を考察
- Shopify で追従カートが実現できるアプリを調べてみた
- Shopify での追従カート機能（追従ボタン）について徹底解説｜設置するメリットとおすすめアプリ 3 選
- Shopify で追従カート（追従ボタン）を実現する方法を徹底解説｜おすすめアプリも紹介
- Shopify ストアに追従カート・追従購入ボタンを追加するアプリについて徹底解説｜ご利用ガイド
追従カート（追従ボタン）とは？
追従カートは別名、追従ボタンや追従購入ボタン、Sticky Cart とも呼ばれ、ユーザーがページをスクロールしても常に画面上に表示され続ける買い物カートのことです。通常、画面の上部や下部に固定され、商品の詳細や在庫状況、「カートに追加」ボタンなどの重要な情報を含んでいます。
ストアに追従カート（追従ボタン）を設置するメリット
ストアに追従カートを設置することで、以下のようなメリットが得られます。
-
視認性の向上
- ユーザーがどの位置にスクロールしていても、カートの情報や操作が常に視界に入ります。
- 商品追加や購入手続きへの移行が容易になります。
-
コンバージョン率の向上
- 購入のための障壁を減らし、衝動買いを促進します。
- 商品の情報を常に確認できるため、購入への不安を軽減します。
-
ユーザーエクスペリエンスの改善
- スクロールして元の位置に戻る必要がなくなり、操作性が向上します。
- スマートフォンでの使用体験が特に向上します。
-
放棄カートの減少
- チェックアウトプロセスへの移行が簡単になるため、カート放棄率が低下する可能性があります。
追従カート（追従ボタン）を設置する上で気を付けるポイント
次に、追従カートを設置する上で気を付けるポイントについて見ていきましょう。
-
モバイル対応
- モバイルデバイスでの表示と操作性を十分にテストしてください。
- 画面サイズに応じてレイアウトが適切に調整されることを確認します。
-
デザインの一貫性
- 追従カートのデザインが、サイト全体のデザインと調和していることを確認します。
- ブランドのカラースキームやスタイルガイドラインに従ってください。
-
ユーザーフィードバックの収集
- 追従カートの使いやすさについて、顧客からのフィードバックを積極的に収集します。
- 必要に応じて改善を行い、ユーザーエクスペリエンスを最適化します。
Shopify ストアに追従カート（追従ボタン）を設置する方法
ここまでで、追従カートについて十分ご理解いただけたかと思います。
それでは実際に追従カートを設置する方法を考えていきましょう。
Shopify ストアに追従カートを設置するには以下の方法が考えられます。
-
テーマのコードを編集して実装する
- HTML・CSS・JavaScript・Liquid の知識がある場合、追従カートを自作することも可能です。
- Shopify のテーマエディタを使用して、カスタムコードを追加します。
-
Shopify アプリで簡単に設置する
- Shopify アプリストアには、追従カート機能を追加できる多数のアプリがあります。
- シンプルで使い勝手の良いアプリを選択することで、簡単に追従カートを設置できます。
一つ目のコードを編集する方法は、お金がかからない反面、必要になる専門知識が多く実装に時間がかかる上、デザインや機能性もあまり期待できません。
もう一つの、Shopify アプリを利用する方法ではコードの知識は一切必要なく、簡単に高機能な追従カートを設置することが可能です。
以上のことから、アプリを使って追従カートを設置することをおすすめします。
簡単に追従カート（追従ボタン）を実現できるおすすめアプリ 3 選
ここからは、おすすめの追従カートアプリを紹介していきます。これらのアプリを利用することで、簡単にストアに追従カート機能を導入することができます。
今回ご紹介する追従カートアプリは以下の 3 つです。
- シンプル追従カート｜追従購入ボタン（Buy Button）
- EA • Sticky カートに追加アップセル
- GA: Sticky Add To Cart Button
それでは、それぞれのアプリの特徴と設定方法を紹介していきます。
シンプル追従カート｜追従購入ボタン（Buy Button）
最初にご紹介するのは日本製の追従カートアプリ「シンプル追従カート｜追従購入ボタン（Buy Button）」です。
以下が、Shopify 公式のアプリストアになります。
「シンプル追従カート｜追従購入ボタン（Buy Button）」の機能と特徴
「シンプル追従カート｜追従購入ボタン（Buy Button）」は、Shopify ストアにノーコードで追従カートを導入できるアプリです。日本製のアプリでユーザー数に応じた従量課金も存在しないため、安心して利用できます。
それでは、アプリの特徴をみていきましょう。
ノーコードで追従カートを挿入できる！
「シンプル追従カート｜追従購入ボタン（Buy Button）」では、高機能な追従カートをノーコードで簡単に挿入できます。
様々なデザインにカスタマイズできる！
こちらのアプリでは、追従カートを様々なデザインにカスタマイズできます。
ノーコードで見た目をカスタマイズできる！
こちらのアプリでは、表示項目やテキスト、各部の色などをノーコードでカスタマイズ可能です。
バリアントや数量ピッカーをリアルタイムで反映できる！
追従カートのバリアントや数量ピッカーを操作すると、テーマのバリアントと数量ピッカーが連動します。これにより、顧客はページ上部に戻ることなくバリアントと数量を選択してスムーズに購入することができます。
アプリのインストール
こちらのアプリでは 1 週間の無料お試し期間が設定されているため、気軽にインストールして試すことができます。実際にアプリをインストールしてみましょう。
こちらからインストール画面を開き、「インストール」ボタンをクリックしてください。
すると、以下の画面が表示されるので、再度「インストール」をクリックしてください。
インストールが完了すると、以下の管理画面が表示されます。
以上でインストール完了です。
商品ページに追従カート機能（追従ボタン）を追加する
アプリの管理画面で、使用するテーマを選択し「テーマに追加」をクリックしてください。
すると、商品ページに追従カートの埋め込みアプリが自動で有効化されます。
問題なければ、右上の「保存する」をクリックしてください。
もし、何らかの不具合で自動で有効化されなかった場合は手動で追加する必要があります。
サイドバーの「埋め込みアプリ」ボタンをクリックし、「シンプル追従カート｜追従購入ボタン（Buy Button）」を有効化して保存してください。
これで追従カート機能の追加が完了しました。
アプリブロックのカスタマイズ
追従カート機能の追加が完了したら、追従カートの見た目をカスタマイズしていきましょう。
商品ページのカスタマイズ画面のサイドバーにある「埋め込みアプリ」ボタンをクリックし、「シンプル追従カート｜追従購入ボタン（Buy Button）」をクリックしてください。
すると、以下のような設定項目が表示されます。
テーマの色やスタイルに合わせて、追従カートをカスタマイズしましょう。
シンプルで使いやすく、おすすめの追従カートアプリです。
ご興味のある方は、以下のサイトで詳しく解説しているので、あわせてご確認ください。
Shopify ストアに追従カート・追従購入ボタンを追加するアプリについて徹底解説｜ご利用ガイド
EA • Sticky カートに追加アップセル
次にご紹介するのは海外製の追従カートアプリ「EA • Sticky カートに追加アップセル」です。
以下が、Shopify 公式のアプリストアになります。
「EA • Sticky カートに追加アップセル」の機能と特徴
「EA • Sticky カートに追加アップセル」は、海外製の追従カートアプリで、無料で多くのカスタマイズ項目があるのが特徴です。また、サイドバーでのアップセル機能や「Quick Buy Button」など、追従カート以外にも多数の機能が利用できます。一方で、追従カートのバリアント・数量ピッカーがテーマのピッカーと連動しない点や、海外製のアプリであるため日本語でのサポートが提供されていない点に課題があります。
アプリのインストール
それでは実際にインストールしてみましょう。
こちらからインストール画面を開き、「インストール」ボタンをクリックしてください。
すると、以下の画面が表示されるので、再度「インストール」をクリックしてください。
インストールが完了すると、以下の管理画面が表示されます。
以上でインストール完了です。
商品ページに追従カート機能（追従ボタン）を追加する
アプリの管理画面のサイドバーにある「Setup」をクリックして Setup 画面へ移動し、「Enable App in Shopify Theme」ボタンをクリックしてください。
すると、追従カートの埋め込みアプリが自動で有効化されます。
問題なければ、右上の「保存する」をクリックしてください。
もし、何らかの不具合で自動で有効化されなかった場合は手動で追加する必要があります。
サイドバーの「埋め込みアプリ」ボタンをクリックし、「EA • Sticky Cart」を有効化して保存してください。
埋め込みアプリの有効化が完了したら、アプリ管理画面の Setup ページに戻り、「Sticky Add to Cart Bar」セクションの「Activate」ボタンをクリックし、アプリの追従カート機能を有効化して保存します。
すると、商品ページに追従カートが表示されているのが確認できます。
これで追従カート機能の追加が完了しました。
見た目をカスタマイズする
追従カート機能の追加が完了したら、追従カートの見た目をカスタマイズしていきましょう。
アプリ管理画面の Setup ページから以下の項目を編集できます。
テーマの色やスタイルに合わせて、追従カートをカスタマイズしましょう。
GA: Sticky Add To Cart Button
最後にご紹介するのは海外製の追従カートアプリ「GA: Sticky Add To Cart Button」です。
以下が、Shopify 公式のアプリストアになります。
「GA: Sticky Add To Cart Button」の機能と特徴
「GA: Sticky Add To Cart Button」は、海外製の追従カートアプリで、無料で多くのカスタマイズ項目があるのが特徴です。また、追従カートを画面の上下左右の好きな場所に表示できるのも特徴です。一方で、「EA • Sticky カートに追加アップセル」と同じく、追従カートのバリアント・数量ピッカーがテーマのピッカーと連動しない点や、海外製のアプリであるため日本語に対応していない点に課題があります。
アプリのインストール
それでは実際にインストールしてみましょう。
こちらからインストール画面を開き、「インストール」ボタンをクリックしてください。
すると、以下の画面が表示されるので、再度「インストール」をクリックしてください。
インストールが完了すると、以下の案内画面が表示されるので、右下の「Next」ボタンをクリックしてください。
全ての案内を見終わったら、「Let's go!」をクリックしてアプリのセットアップを始めましょう。
以上でインストール完了です。
追従カートをセットアップする
アプリのインストールが完了すると、以下のセットアップ画面が表示されます。
まず、追従カートの設定名を入力し、「Next」ボタンをクリックしましょう。
この設定名はアプリ内の管理時に使用され、顧客に表示されることはありません。
すると、追従カートの各種設定項目が表示されるので、適宜設定を変更して右矢印ボタンをクリックしてください。
設定が完了したら、右上の「Next」ボタンをクリックしましょう。
最後に追従カートを表示する条件の設定画面が表示されるので、適宜設定をした上、右上の「Save」ボタンをクリックして保存します。
保存が完了すると、以下の管理画面に遷移し、設定した追従カートが表示されているのが確認できます。
以上で追従カートのセットアップが完了です。
テーマに追従カート機能（追従ボタン）を追加する
追従カートの設定が完了したら、テーマに追従カート機能を追加しましょう。
アプリの管理画面のサイドバーのダッシュボードのアイコンをクリックして Dashboard 画面へ移動し、「Enable in theme settings」ボタンをクリックしてください。
すると、追従カートの埋め込みアプリが自動で有効化されます。
問題なければ、右上の「保存する」をクリックしてください。
もし、何らかの不具合で自動で有効化されなかった場合は手動で追加する必要があります。
サイドバーの「埋め込みアプリ」ボタンをクリックし、「Sticky」を有効化して保存してください。
有効化が完了すると、商品ページに追従カートが表示されているのが確認できます。
これで追従カート機能の追加が完了しました。
おわりに
今回は、Shopify に追従カート（追従ボタン）を設置するメリットや、おすすめのアプリについて調べてみました。
少しでも皆様のお役に立てれば幸いです。
参考記事
今回は、以下の記事を参考にしています。
.png&w=1920&q=75)
.png&w=1920&q=75)
.png&w=1920&q=75)
.png&w=1920&q=75)
