商品情報を読み進めた先で購入ボタンが見えなくなっていた
商品ページをスクロールしたユーザーの購入機会損失を防ぐため、画面下部に追従する購入ボタン・カート導線をLiquidで実装しました。 ランキング、スライダー、在庫僅少表示、追従ボタンなど。ストアフロントの見せ方を変えて、購入までの迷いを減らす機能を開発しています。
CHALLENGES
抱えていた課題
着手前に整理した、解くべき課題です。ここが決まらないまま作り始めると、あとから作り直すことになります。
商品情報を読み進めた先で購入ボタンが見えなくなっていた
長い商品ページほど離脱率が高かった
モバイルでのタップしやすさに課題があった
WHAT WE BUILT
つくったもの
課題に対して実際に設計・実装した内容です。
追従バーの実装
一定のスクロール位置を超えると画面下部に固定表示される購入バーを実装しました。
バリアント選択との連携
追従バーからもバリアント選択・数量指定・カート追加までを完結できるようにしました。
モバイルでのタップ最適化
親指で押しやすい配置・サイズに調整し、モバイル購入の離脱を防ぎます。
SCOPE & TECHNOLOGY
対応範囲と技術
TECHShopify LiquidJavaScriptStorefront API
PROCESS
進め方
この案件で実際にたどった流れです。
要件整理
「スクロール後の購入機会損失を防ぎたい事業者」の現場でどう使われるかを起点に、必要な機能範囲を洗い出します。
設計
Theme App Extension（Liquid + JS）として実装する構成に落とし込み、データ構造を設計します。
実装
スクロール追従UI・バリアント連携・モバイル最適化タップを中心に、ストアフロントと管理画面の両方を実装します。
検証・リリース
実際の購入導線で動作検証を行い、問題がないことを確認してから反映します。
OUTCOME
できるようになったこと
実装後の状態を、事実ベースで整理しています。
スクロール後も購入導線を維持できるようになった
長い商品ページでの離脱を抑えられた
モバイルでの購入完了率改善につながった
CONTACT
つくりたいものを聞かせてください。
Shopifyでの新規構築、既存テーマへの機能追加、アプリ開発のご相談まで。まだ具体化していないアイデアも、整理するところから一緒に始めます。
メールで相談する