Shopifyストアにスマホナビゲーションを追加できるアプリを徹底解説｜ご利用ガイド
はじめに
今回の記事は、Shopify アプリである「シンプルスマホナビゲーション｜お手軽モバイルボトムメニュー」の解説記事です。
Shopify とは、ざっくり説明すると EC サイトを簡単に構築することができるプラットフォームであり、Shopify アプリとはそのプラットフォームを拡張する機能のようなものです。WordPress のプラグインのようなもの、とご認識頂いて大丈夫です。
「シンプルスマホナビゲーション｜お手軽モバイルボトムメニュー」は、ストアにモバイルナビゲーションメニューを追加し、顧客体験と売上を向上させるアプリです。
昨今の EC サイト利用者の多くはスマートフォンからアクセスしています。ナビゲーションが不十分だと、ユーザーは目的の商品にたどり着けず、売上の損失につながります。このアプリを利用することで、ストアのどのページからでも主要なページ（コレクション、カートなど）へ誘導できるようになり、モバイルでのコンバージョン向上に貢献します。
ご興味のある方は、以下の URL からインストールしてみてください。
「シンプルスマホナビゲーション」でできること
Shopify アプリである「シンプルスマホナビゲーション｜お手軽モバイルボトムメニュー」は、以下のようにモバイル表示時に追従型のメニューバーを設置できるアプリです。
主な特徴は次のとおりです。
-
スマホナビゲーションを簡単に追加できる！
クリーンでアクセスしやすいメニューバーにより、モバイルユーザーの回遊性を大幅に向上させます。 -
ノーコードでカスタマイズできる！
メニューのリンクやアイコン、カラーなどを、専門知識なしでブランドイメージに合わせて調整可能です。 -
1 クリックでテーマに追加できる！
難しいコード編集は不要。インストール後、すぐにストアへ反映させることができます。
スマホナビゲーションを簡単に追加できる！
ストアのどのページにも追従型のナビゲーションバーを表示させることができます。顧客を迷わせることなく、スムーズに購入ステップへと導きます。
ノーコードでカスタマイズできる！
ノーコードエディタを使用して、メニューのリンク先やアイコン画像を簡単に編集できます。ブランドカラーに合わせた配色設定も自由自在です。
1 クリックでテーマに追加できる！
アプリをインストール後、ボタン一つでテーマへの適用が可能です。エンジニアに依頼することなく、マーチャント自身で即座に導入できます。
シンプルスマホナビゲーションアプリのインストール
それでは、実際にアプリをインストールしていきましょう。
アプリの料金は、月額 $3.99（1 週間の無料期間あり）となっております。年払いの場合は実質 2 ヶ月分無料で、さらにお得にご利用いただけます。
ストア管理画面左下の「設定」をクリックします。
「アプリと販売チャネル」をクリックし、「Shopify App Store」に移動してください。
検索窓に「シンプルスマホナビゲーション」と入力し、表示されたアプリをクリックします。
アプリの詳細画面から「インストール」ボタンをクリックしてストアにインストールします。
必要な権限を確認して「インストール」を完了してください。
以上で、アプリのインストールは完了です。
シンプルスマホナビゲーションのアプリブロックをテーマに追加
アプリをテーマに組み込み、ストア上にメニューバーを表示させる設定を行います。
自動でテーマへの追加する方法
アプリの管理画面を開きます。
アプリを有効化したいテーマを選択し、「テーマに追加」ボタンをクリックします。
自動的にテーマエディタが開き、アプリが有効化されます。
画面右上の「保存する」をクリックして完了です。
手動でテーマに追加する場合
アプリ管理画面を開いて下さい。
「テーマを選択」でアプリを手動追加したいテーマを選択し、「テーマをプレビュー」ボタンをクリックします。
テーマエディタが開くので、画面左側の「埋め込みアプリ」をクリックします。
アプリを有効化し、設定が完了したら「保存する」ボタンをクリックしてください。
以上で、手動でのブロック追加は完了です。
シンプルスマホナビゲーションアプリのカスタマイズ
テーマエディタの「アプリ埋め込み」セクションから、詳細なデザインや機能をカスタマイズできます。
基本設定
メニュー全体の見た目や動作条件を設定します。
- ブレイクポイント（Breakpoint）
メニューを表示する画面幅を指定します。デフォルトは 768px です。 - アイコンサイズ（Icon Size）
メニューに表示するアイコンの大きさを調整できます（20~40px）。 - 背景色（Background Color）
メニューバーの背景色をブランドカラーに合わせて変更できます。 - ラベル設定（Label Settings）
アイコン下に表示する文字のサイズや色をカスタマイズできます。
アイコン（リンク）設定
最大 5 つまでのナビゲーション項目を設定できます。各アイコンごとに以下の項目を入力します。
- アイコン画像（Image Picker）：表示したいアイコンをアップロードします。
- URL：クリック時の遷移先（コレクション、カート、トップページ等）を指定します。
- ラベル（Text）：アイコンの下に表示するテキスト（例：「ホーム」「カート」など）を入力します。
高度な設定
- 追加 CSS（Additional CSS）
さらに詳細なデザイン調整が必要な場合は、Liquid 形式で CSS を直接記述してカスタマイズすることが可能です。
おわりに
今回は「シンプルスマホナビゲーション｜お手軽モバイルボトムメニュー」の解説を行いました。
- 追従型のメニューバーを設置して、モバイルユーザーの利便性を向上
- ノーコードでアイコンやリンクを自由自在にカスタマイズ
- 月額 $3.99（1 週間無料）で、年払いならさらにお得に利用可能
モバイルでの購買体験を最適化し、ストアの回遊率やコンバージョン率を向上させるために、ぜひ本アプリをご活用ください。
ここまでお読みいただき、誠にありがとうございました。
.png?w=400){kind=icon}
.png?w=400){kind=icon}
.png?w=400){kind=icon}
.png?w=400){kind=icon}
.png?w=400){kind=icon}
.png?w=400){kind=icon}
.png?w=400){kind=icon}
.png?w=400){kind=icon}
.png?w=400){kind=icon}
.png?w=400){kind=icon}
