Shopifyで追従カート（追従ボタン）を実現する方法を徹底解説｜おすすめアプリも紹介

はじめに

この記事では、Shopify ストアで追従カート（追従ボタン）を実現する方法を解説していきます。
追従カートを導入する際のメリットやデメリットなどを学び、実際にアプリを使って追従カートを Shopify ストアに導入してみます。

以下の記事を参考にしています。

追従カート（追従ボタン）とは？
Shopify ストアに追従カート（追従ボタン）を導入するメリット・デメリット
- 3 つのメリット
- 3 つのデメリット
Shopify で追従カート（追従ボタン）を実現する方法は？
- Liquid コード編集での実装
- Shopify アプリでの実装
Liquid コード編集で追従カート（追従ボタン）を実現する
Shopify アプリで追従カート（追従ボタン）を実現する
おすすめアプリの詳しい使い方
まとめ
参考記事

追従カート（追従ボタン）とは？

追従カート（Sticky Cart）は、ユーザーがページをスクロールしても常に画面上に表示され続けるカートボタンのことです。この機能により、ユーザーはいつでもカートへアクセスできるようになり、購入手続きをスムーズに進められます。特にスマートフォンやタブレットなど、画面が小さいデバイスでは、カートボタンを探す手間を省くことでユーザー体験が向上します。

追従カートは、画面の上部または下部に固定表示される形式が一般的で、商品ページからすぐにカートにアクセスできるため、購入プロセスが効率的になります。E コマースにおいては、こうした利便性が売上に大きく影響するため、Shopify ストアでも追従カートを導入するメリットは非常に大きいと言えるでしょう。

追従カートの例

Shopify ストアに追従カート（追従ボタン）を導入するメリット・デメリット

Shopify ストアに追従カートを導入することは、ユーザー体験を向上させ、購入プロセスを円滑にする大きなメリットがありますが、同時にいくつかのデメリットも考慮する必要があります。

3 つのメリット

購入プロセスの簡素化

追従カートを導入すると、ユーザーがどのページにいてもカートへ即座にアクセスできるようになります。これにより、商品をカートに追加するまでのステップが少なくなり、購入がよりスムーズに進みます。結果として、購買プロセス全体が効率化され、ユーザー体験が向上します。

コンバージョン率の向上

カートが常に表示されていることで、ユーザーが商品を見つけた際、即座にカートへ追加できる環境が整います。これにより、ユーザーの購買意欲が高まり、結果としてコンバージョン率の向上が期待できます。また、カートの視認性が高いことで、衝動的な購入を促進する効果も期待できます。

モバイル対応の強化

スマートフォンやタブレットなど、小型のデバイスでの操作性が向上します。追従カートは、モバイルユーザーにとって使いやすい機能であり、特に画面の狭い環境でもスムーズにカートへアクセスできる点が大きな利点です。これにより、モバイル端末での購買体験が向上し、モバイルからの売上向上にも寄与します。

3 つのデメリット

ページレイアウトの制約

常に表示される追従カートボタンは、画面レイアウトを圧迫する可能性があります。特に、スマートフォンなどの小型デバイスでは、他のコンテンツと競合することでレイアウトが崩れやすくなり、ユーザーにとって見にくいサイト構成になってしまうことも考えられます。そのため、デザインのバランスが重要です。

パフォーマンスの低下

追従カートの実装にあたっては、JavaScript や CSS を用いるため、ページの読み込み速度に影響を与える可能性があります。特に、多くのスクリプトがページ内で実行される場合、パフォーマンスの低下が課題となることがあり、ページの速度最適化をしっかりと行う必要があります。

ユーザー体験の一貫性の欠如

すべてのページにカートが表示されることで、ユーザーが他のコンテンツに集中しにくくなる可能性があります。また、カートが常に視界に入ることで、ユーザーに対して「急かされている」という印象を与えることもあり、結果的に購買意欲を損なうこともあります。そのため、追従カートを導入する際は、バランスの取れた設計が求められます。

追従カートは、購入のハードルを下げ、ユーザー体験を向上させる強力なツールですが、デザインやパフォーマンスへの影響も考慮しながら、適切に導入することが重要です。

Shopify で追従カート（追従ボタン）を実現する方法は？

Shopify で追従カートを実現するには、2 つの主要なアプローチがあります。

それは、Liquid のコード編集をする方法と、専用 Shopify アプリを利用する方法です。
どちらを選ぶかは、ストアの要件や技術的なスキルによって異なります。

Liquid コード編集での実装

Liquid や JavaScript を使って自分で追従カートを実装する方法は、特定のデザインやカスタマイズを行いたい場合に適していますが、コードの知識が必要です。
この方法では、完全に自由なカスタマイズが可能ですが、デバッグやテーマの編集に手間がかかる場合もあります。

Shopify アプリでの実装

アプリを使う方法は、簡単に導入できることが最大のメリットです。Shopify App Store には、追従カート機能を提供するアプリが多数あり、初心者でも複雑な設定なしに機能を追加できます。
また、アプリを使用することで、異なるデバイスやテーマ間での互換性が保証されるため、手間をかけずに導入できるのも魅力です。

Liquid コード編集で追従カート（追従ボタン）を実現する

Shopify の Liquid コードを使用して追従カートを実装する方法を解説します。
Liquid は、Shopify ストアのテーマカスタマイズに使用されるテンプレート言語で、テーマの中に自由にコードを追加することで、独自の機能を実装できます。

商品の詳細ページに追従カートボタンを実装してみます。

テーマファイルをバックアップする

コードを編集する前に、誤ってコードを破損させてしまう可能性を考慮して、テーマのバックアップを取っておくことをお勧めします。

Shopify 管理画面から「オンラインストア」→「テーマ」を選択します。

Shopifyのテーマ管理画面

使用中のテーマの「3 点」ボタンでドロップダウン開き、「複製」を選択してバックアップを作成します。

テーマの複製

編集する Liquid ファイルを開く

Shopify 管理画面の「オンラインストア」→「テーマ」で、コードを編集したいテーマの「3 点」ボタンから「コードを編集」を選択します。

テーマのコードを編集

コードのエディターが開きます。
画面左側のファイルリストから sections フォルダ内の main-product.liquidを開きます。（テーマによってはファイル名が異なる場合があります。）

テーマエディタの main-product.liquid

追従カートボタンを追加する

main-product.liquid ファイル内に追従する「カートに追加」ボタンを実装します。このボタンは通常の「カートに追加」ボタンの複製で、スクロールに連動して表示されます。

追加するボタンの HTML 構造を追加します。以下のように追従ボタン用の HTML を追加します。

#sticky-cart-btn id は追従するカートボタンのラッパー要素で、スクロール時に表示させるものです。
style="display:none;" は初期状態では表示しないように設定しています。

<div id="sticky-cart-btn" style="display:none; position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); z-index: 9999;">
  <button type="submit" name="add" class="btn sticky-add-to-cart-btn">
    カートに追加する
  </button>
</div>

この追従ボタンのスタイルをカスタマイズするため、以下の CSS をテーマのに追加します。今回は、main-product.liquid ファイルに {% style %} タグで CSS を追加します。

{% style %}
  .sticky-add-to-cart-btn {
    background-color: #ff4500;
    color: #fff;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s ease;
  }

  .sticky-add-to-cart-btn:hover {
    background-color: #ff6347;
  }
{% endstyle %}

追従ボタンをスクロールに連動して表示させるため、JavaScript を追加します。スクロールしてページの特定位置を超えた場合に追従ボタンが表示されるように設定します。今回は、 main-product.liquid ファイルに <script> タグで CSS を追加します。

<script>
  document.addEventListener('scroll', function() {
    var stickyCartBtn = document.getElementById('sticky-cart-btn');
    var addCartBtn = document.querySelector('.add-to-cart-btn');

    // 画面に表示されなくなったら追従ボタンを表示する
    var rect = addCartBtn.getBoundingClientRect();
    if (rect.top < 0 || rect.bottom > window.innerHeight) {
      stickyCartBtn.style.display = 'block';
    } else {
      stickyCartBtn.style.display = 'none';
    }
});
</script>

上記のサンプルコードは、カートに追加ボタンを表示するだけなので、数量の選択やバリエーションの選択も追従させたい場合は、追加で実装する必要があります。
コード編集で実装すれば、ランニングコストもかからず必要な機能だけ実装することが可能なので、Liquid のコード編集ができる場合はぜひチャレンジしてみてください。

Shopify アプリで追従カート（追従ボタン）を実現する

Shopify ストアに追従カートを導入するもう一つの方法として、アプリの利用があります。追従カートを簡単に実現するために、Shopify アプリを使用することは非常に便利で、多くのストアオーナーにとってコーディングなしで高機能なカートを導入できる利点があります。

アプリを使うメリット

簡単な設定

アプリを使えば、コードを書くことなくすぐに追従カートを導入できます。テーマファイルを編集する必要がないので、初心者でも簡単に操作可能です。

多彩なカスタマイズ

ボタンのデザインや位置、表示タイミングなど、細かいカスタマイズがアプリの設定画面から行えるため、ストアに合わせた追従カートを作成できます。

追加機能

一部のアプリでは、カート以外にも顧客が購入を促進されるようなポップアップ通知や、在庫アラートなどの機能も提供しています。

以下でおすすめアプリを紹介します。

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

「シンプル追従カート｜追従購入ボタン（Buy Button）」を使えば、ノーコードで簡単に Shopify ストアに追従カート機能を導入できます。顧客がページをスクロールしても、画面に常に「購入ボタン」が表示されることで、購入率の向上が期待できます。

「シンプル追従カート｜追従購入ボタン（Buy Button）」は、カートに商品を追加するだけでなく、そのままチェックアウトに進める選択肢も提供します。また、バリアントピッカーや数量セレクターにも対応しており、リアルタイムでの変更が可能です。

主な機能

ノーコードで追従ボタンを挿入可能
商品のカート追加またはチェックアウトが選べる
バリアントピッカー・数量セレクターがリアルタイムで反映

追従カート（追従購入ボタン）を簡単にストアに導入できる日本製の Shopify アプリです。
シンプル追従カート｜追従購入ボタン（Buy Button）は、7 日間の無料体験が可能です。この期間中にアプリのすべての機能をお試しいただけます。無料期間終了後は、月額$9.99 でご利用いただけます。ノーコードで簡単に追従カート機能を導入できるため、費用対効果の高いプランとなっています。

こちらからインストールできます。

Ultimate Sticky Add to Cart

「Ultimate Sticky Add to Cart」を使うと、商品ページに常に表示される追従カートボタンを簡単に導入し、顧客がスムーズに購入できます。
画面サイズに関係なく、全ての商品ページに追従する「カートに追加」ボタンを表示できるので、商品選択からチェックアウトまでの流れが格段にスムーズになります。
さらに、内蔵されたカウントダウンタイマー機能を使うことで、購入の緊急感を演出し、より多くの「今すぐ購入」クリックを促進します。コーディングは不要で、1 クリックでどのテーマにも簡単に適用可能です。

主な機能

カートをスキップして、直接チェックアウトに進める
全ての商品ページに常に表示される追従カートボタン
カスタムカウントダウンタイマーで緊急感を演出
どのデバイスやスクリーンサイズでもボタンが表示される
リターゲティングキャンペーンのトラッキングピクセルに対応

海外製の Shopify アプリで評価が高いアプリです。追従カートに加えてカウントダウン機能もあります。

Slide Cart, Sticky Add To Cart

「Slide Cart, Sticky Add To Cart」は、ページを離れることなくカート内容を確認できる「スライドカート」と、画面上に常に表示される「追従カート」ボタンを導入することで、顧客の購買体験を向上させます。特に「Sticky Add To Cart」は、ユーザーがスクロールしても常に「カートに追加」ボタンが表示されるため、商品をスムーズにカートに入れることができます。

さらに、「Slide Cart」機能により、顧客はカートページに移動せずに、割引コードの適用や送料の見積もり、購入メモの追加が可能です。また、アップセル機能や送料無料の進捗バー、カウントダウンタイマーを使って、顧客の購買意欲を高め、カート放棄を減少させます。

主な機能

追従カートに追加ボタン: スクロール時にも常に表示される「カートに追加」ボタン
カート内でのアップセル: カート内でよく一緒に購入される商品を推薦
スライド式カートドロワー: 現在のページを離れずにカートを確認できる
送料無料進捗バー、カウントダウンタイマー、メモボックス: 購買意欲を高める
利用規約ボックス、信頼バッジ: 顧客の信頼を築き、安心感を提供

こちらも海外製のアプリです。月額料金は増えますが、追従カート以外にも連携機能が多く実装されており、カートに追加の体験を向上させることができます。

まとめ

Shopify での追従カート（追従ボタン）の導入は、ユーザー体験の向上と売上アップに直結する重要な機能です。追従カートを使用することで、購入プロセスが簡素化され、特にモバイルユーザーにとって使いやすいストアを実現できます。しかし、ページレイアウトの制約やパフォーマンスへの影響も考慮し、慎重に導入することが大切です。

実装方法には、Liquid コードを使用してカスタマイズする方法と、Shopify アプリを使う方法の 2 つがあります。自分のスキルやニーズに合った方法を選び、追従カートを導入してみましょう。また、ノーコードで簡単に導入できる「シンプル追従カート｜追従購入ボタン（Buy Button）」のようなアプリを活用すれば、より手軽に実装可能です。

ストアの成長を目指すオーナーは、この機能を活用してコンバージョン率を高め、ユーザーにとって魅力的なショッピング体験を提供してください。