Shopifyで追従カート（追従ボタン）を実装する方法を考察
はじめに
今回は、Shopify で追従カート（追従ボタン）を実装する方法について考察していきます。
コーディングを用いて追従カートを実装する方法等について考察していきます。
それでは、頑張っていきましょう。
追従カート（追従ボタン）とは
追従カートは、ユーザーが画面をスクロールしても常に視界に入る位置に配置される購入ボタンやカート概要のことを指します。この機能により、ユーザーはページのどの位置にいても簡単に購入プロセスに進むことができます。
追従カート（追従ボタン）を実装するメリット・デメリット
次に、追従カート（追従購入ボタン）を実装するメリット・デメリットについて考察していきましょう。
追従カート（追従ボタン）を実装するメリット
それでは、追従カート（追従購入ボタン）を実装するメリットについて考察していきます。
1. コンバージョン率の向上
追従カートの最大の利点は、コンバージョン率の顕著な向上です。ユーザーが購入を決意した瞬間にアクションを起こせることが重要なポイントとなります。長いページコンテンツを持つ製品詳細ページや、情報量の多いランディングページにおいて、特にその効果が顕著に現れます。
実装においては、JavaScriptを用いたスクロール位置の検出と、それに応じた表示制御が一般的に行われます。これにより、ユーザーの行動に応じて適切なタイミングで追従カートを表示することが可能となります。
2. ユーザー体験の改善
追従カートは、ユーザーがページ内のどの位置にいても、カートの内容を確認したり、チェックアウトプロセスに進んだりすることを可能にします。これにより、ショッピングの流れが中断されることなく、ユーザーは自然な形で購買プロセスを進めることができます。
特に、製品説明や顧客レビューなど、長いコンテンツを持つページで効果を発揮します。ユーザーが製品情報を十分に確認した後、ページトップまでスクロールバックする必要なく購入プロセスに進めるため、購買意欲が冷めるリスクを最小限に抑えられます。
3. モバイル最適化
モバイルデバイスでのショッピング体験において、追従カートは特に重要な役割を果たします。小さな画面では、ページの上下をスクロールする頻度が高くなります。この状況下で、常に表示される購入ボタンの存在は、ユーザーの購買行動を大きく促進します。
実装においては、レスポンシブデザインの原則に従い、デバイスの画面サイズに応じて追従カートの表示位置や大きさを最適化することが重要です。CSS3のメディアクエリやフレキシブルボックスレイアウトなどの技術を活用することで、多様なデバイスに対応した追従カートの実装が可能となります。
4. 平均注文単価（AOV）の増加
追従カートは、単にコンバージョン率を上げるだけでなく、平均注文単価（AOV）の増加にも貢献します。これは主に二つの要因によってもたらされます：
-
クロスセル・アップセル機会の増加：追従カートに関連商品やおすすめ商品を表示することで、追加購入を促すことができます。
-
心理的効果：カート内の合計金額を常に表示することで、ユーザーは自分の購入額を意識します。これにより、「もう少しで送料無料になる」といった心理が働き、追加の商品を購入する動機づけとなります。
5. データ分析の強化
追従カートの実装は、ユーザー行動に関する貴重なデータを収集する機会も提供します。例えば、どの位置でユーザーが最もカートに商品を追加するか、どのタイミングでチェックアウトに進むかなどの情報を詳細に分析することができます。
これらのデータは、ページレイアウトの最適化やコンテンツ戦略の改善に活用できます。さらに、A/Bテストを通じて、追従カートのデザインや配置、表示タイミングなどを最適化することで、継続的な改善が可能です。
追従カート（追従ボタン）を実装するデメリット
それでは次に、Shopify で追従カート（追従ボタン）を実装するデメリットについて考えてみましょう。
1. ユーザーインターフェースの複雑化
追従カートは、常に画面上に表示され続けるため、ユーザーインターフェース（UI）の複雑さを増加させる可能性があります。
- 視覚的な煩雑さ: 常時表示される要素が増えることで、ページ全体の視覚的な整理が難しくなる場合があります。
- コンテンツの可視性低下: 追従カートが他の重要なコンテンツを遮る可能性があり、特にモバイルデバイスでこの問題が顕著になります。
2. パフォーマンスへの影響
追従カートの実装は、ウェブサイトの全体的なパフォーマンスに影響を与える可能性があります。
- ページ読み込み時間の増加: 追加のJavaScriptやCSSが必要となり、初期ロード時間が延長する可能性があります。
- スクロールパフォーマンスの低下: スクロールイベントのリスナーを使用する場合、特に低性能デバイスでスクロールの滑らかさが損なわれる可能性があります。
3. モバイル体験の最適化の難しさ
モバイルデバイスの多様性により、すべての端末で最適な表示を実現することが困難な場合があります。
- 画面スペースの制限: 小さな画面では、追従カートが貴重な表示スペースを占有してしまう問題があります。
- タッチインターフェースの課題: 誤タップの増加や、スクロール操作の妨げになる可能性があります。
4. アクセシビリティの問題
追従カートは、特定のユーザーグループにとってアクセシビリティ上の課題を生む可能性があります。
- スクリーンリーダーとの互換性: 動的に変化する要素は、スクリーンリーダーユーザーにとって混乱を招く可能性があります。
- キーボードナビゲーションの複雑化: 追従カートの存在により、キーボードでのナビゲーションが直感的でなくなる可能性があります。
5. メンテナンスとカスタマイズの複雑さ
追従カートの実装と維持には、追加の開発リソースが必要となります。
- 継続的な最適化の必要性: ブラウザの更新やデバイスの多様化に伴い、定期的な調整が必要となります。
- テーマの互換性: Shopifyのテーマ更新時に、追従カートの実装が影響を受ける可能性があります。
ここまでで、Shopify で追従カート（追従購入ボタン）を実装するメリット・デメリットについての解説は終了です。
それでは次に、コーディングを用いて追従カート（追従購入ボタン）を実装する方法について解説していきます。
コーディングで追従カート（追従ボタン）を実装する方法
コーディングで追従カート（追従購入ボタン）を実装する方法について考えていきましょう。
以下が、コーディングで追従カート（追従購入ボタン）を実装する際のサンプルコードになります。
{% comment %}追従カートのHTMLとLiquid{% endcomment %}
<div id="sticky-cart" class="sticky-cart">
<h3>カート</h3>
<div class="cart-contents">
{% if cart.item_count > 0 %}
{% for item in cart.items %}
<div class="cart-item">
<img src="{{ item.image | img_url: '50x50' }}" alt="{{ item.title | escape }}">
<span>{{ item.title }}</span>
<span>{{ item.quantity }} x {{ item.price | money }}</span>
</div>
{% endfor %}
<div class="cart-total">
合計: {{ cart.total_price | money }}
</div>
<a href="/cart" class="btn-checkout">チェックアウト</a>
{% else %}
<p>カートは空です</p>
{% endif %}
</div>
</div>
{% comment %}JavaScriptを追加{% endcomment %}
<script>
document.addEventListener('DOMContentLoaded', function() {
var stickyCart = document.getElementById('sticky-cart');
var stickyCartTop = stickyCart.offsetTop;
window.addEventListener('scroll', function() {
if (window.pageYOffset > stickyCartTop) {
stickyCart.classList.add('sticky');
} else {
stickyCart.classList.remove('sticky');
}
});
});
</script>
{% comment %}CSSを追加{% endcomment %}
<style>
.sticky-cart {
position: fixed;
top: -100%;
right: 20px;
width: 300px;
background: #fff;
border: 1px solid #ddd;
padding: 15px;
transition: top 0.3s ease-in-out;
z-index: 1000;
}
.sticky-cart.sticky {
top: 20px;
}
.cart-item {
display: flex;
align-items: center;
margin-bottom: 10px;
}
.cart-item img {
margin-right: 10px;
}
.btn-checkout {
display: block;
text-align: center;
background: #000;
color: #fff;
padding: 10px;
text-decoration: none;
margin-top: 10px;
}
</style>
それでは、こちらのサンプルコードについて解説していきます。
Liquid 部分の解説
まずは、Liquid 部分の解説を行っていきます。
<div id="sticky-cart" class="sticky-cart">
<h3>カート</h3>
<div class="cart-contents">
{% if cart.item_count > 0 %}
{% for item in cart.items %}
<div class="cart-item">
<img src="{{ item.image | img_url: '50x50' }}" alt="{{ item.title | escape }}">
<span>{{ item.title }}</span>
<span>{{ item.quantity }} x {{ item.price | money }}</span>
</div>
{% endfor %}
<div class="cart-total">
合計: {{ cart.total_price | money }}
</div>
<a href="/cart" class="btn-checkout">チェックアウト</a>
{% else %}
<p>カートは空です</p>
{% endif %}
</div>
</div>
上記のコードについて、ざっくりと解説します。
-
<div id="sticky-cart" class="sticky-cart">: 追従カート全体を囲むコンテナ。IDとクラスを指定し、JavaScriptとCSSで操作可能にしています。 -
{% if cart.item_count > 0 %}: カートにアイテムがある場合の条件分岐。 -
{% for item in cart.items %}: カート内の各アイテムに対するループ。 -
{{ item.image | img_url: '50x50' }}: 商品画像のURLを生成し、サイズを50x50pxに指定。 -
{{ item.title | escape }}: 商品タイトルをエスケープして表示（XSS対策）。 -
{{ item.quantity }} x {{ item.price | money }}: 数量と価格を表示。 -
{{ cart.total_price | money }}: カートの合計金額を表示。 -
<a href="/cart" class="btn-checkout">: チェックアウトページへのリンク。
それでは次に、JavaScript のコードについて解説していきます。
JavaScript のコードの解説
ここから、JavaScript のコードについて解説していきます。
<script>
document.addEventListener('DOMContentLoaded', function() {
var stickyCart = document.getElementById('sticky-cart');
var stickyCartTop = stickyCart.offsetTop;
window.addEventListener('scroll', function() {
if (window.pageYOffset > stickyCartTop) {
stickyCart.classList.add('sticky');
} else {
stickyCart.classList.remove('sticky');
}
});
});
</script>
上記のコードについてざっくりと解説します。
-
document.addEventListener('DOMContentLoaded', function() {...}): DOMの読み込みが完了したタイミングでスクリプトを実行。 -
var stickyCart = document.getElementById('sticky-cart'): 追従カート要素を取得。 -
var stickyCartTop = stickyCart.offsetTop: 追従カート要素の初期位置を取得。 -
window.addEventListener('scroll', function() {...}): スクロールイベントをリッスン。 -
if (window.pageYOffset > stickyCartTop): 現在のスクロール位置が初期位置を超えたかチェック。 -
stickyCart.classList.add('sticky'): 条件を満たした場合、'sticky'クラスを追加。 -
stickyCart.classList.remove('sticky'): 条件を満たさない場合、'sticky'クラスを削除。
CSS のコードの解説
ここから、CSS のコードについて解説します。
<style>
.sticky-cart {
position: fixed;
top: -100%;
right: 20px;
width: 300px;
background: #fff;
border: 1px solid #ddd;
padding: 15px;
transition: top 0.3s ease-in-out;
z-index: 1000;
}
.sticky-cart.sticky {
top: 20px;
}
.cart-item {
display: flex;
align-items: center;
margin-bottom: 10px;
}
.cart-item img {
margin-right: 10px;
}
.btn-checkout {
display: block;
text-align: center;
background: #000;
color: #fff;
padding: 10px;
text-decoration: none;
margin-top: 10px;
}
</style>
上記のコードについてざっくりと解説します。
-
.sticky-cart: 追従カートの基本スタイル。-
position: fixed: 画面に固定。 -
top: -100%: 初期状態では画面外に配置。 -
transition: スムーズな表示アニメーション用。
-
-
.sticky-cart.sticky:'sticky'クラスが追加された時のスタイル。-
top: 20px: 画面上部から20pxの位置に表示。
-
-
.cart-item: カート内の各アイテムのスタイル。-
display: flex: フレックスボックスレイアウトを使用。
-
-
.btn-checkout: チェックアウトボタンのスタイル。
ここまでで、追従カート（追従購入ボタン）のコーディングによる実装についての解説は終了です。
ここからは、非エンジニアの方に向けて、Shopify アプリを用いて追従カート（追従購入ボタン）を実装する方法について紹介していきます。
Shopify アプリを用いて追従カート（追従ボタン）を実装する方法
それでは、Shopify アプリを用いて追従カート（追従購入ボタン）を実装する方法について解説していきます。
今回紹介するのは、シンプル追従カート｜追従購入ボタン（Buy Button） というアプリです。
今回は、以下の記事を参考にしています。
以下が、Shopify 公式のアプリストアになります。
それでは、こちらのアプリについて紹介していきます。
シンプル追従カート｜追従購入ボタン（Buy Button）
シンプル追従カート｜追従購入ボタン（Buy Button） は、Shopify で追従カート（追従ボタン）をノーコードで追加できるアプリです。
以下の画像のような追従カート（追従ボタン）を Shopify ストアに追加できます。
また、こちらのアプリを利用すると様々なデザインにカスタマイズすることができます。
実際に、下記のようなカスタマイズ項目があります。
理想的なデザインの追従カート（追従ボタン）を実装できそうですね。
また、バリエーションの変更や数量ピッカーの変更に関して、リアルタイムで反映されます。
安価でシンプルなアプリなので、Shopify で追従カート（追従購入ボタン）を実装する際には、選択肢の一つに入ってくるかと思います。
最後に
今回は、コーディングや Shopify アプリを用いて追従カート（追従ボタン）を追加する方法について解説しました。
お疲れ様でした。
Discussion