Shopify でボトムナビゲーション(ナビゲーションバー)を簡単に設置できるアプリを徹底解説

Shopify のストアにボトムナビゲーション(ナビゲーションバー)を設置できるアプリを試しに使ってみたので、今回はその使い方を備忘録として残しておこうと思います。

ボトムナビゲーションとは以下のようなものです。主にスマートフォンの画面の下側に常時表示されるナビゲーションバーのことを指します。
image.png

今回解説していくのは以下のアプリです。

スマホナビゲーション|リテリア Navigation

以下の公式解説記事を元に、アプリの解説を行っています。

Shopify ECサイトをスマホで利用しているユーザーのためのアプリ「スマホナビゲーション|リテリア Navigation」解説

また、こちらのアプリは以下の記事でも紹介されていました。参考にして頂けますと幸いです。

Shopifyのサイトをスマホ最適化する方法を調査してみる

導入のきっかけ

ボトムナビゲーション(ナビゲーションバー)は、普段利用している LINE や Instagram、Twitter、Facebook など多くのアプリに導入されています。最近では EC サイトにも活用されていますよね。

Shopify でもストアの下部にアイコン表示でホーム画面やカート画面、トーク画面などの URL を固定しておけば、ユーザーが直感的な操作で目的のページに移動できて便利です。

ストアの離脱率が高いとき、要因としてはさまざまなものが考えられますが、そのなかの一つに「購入までの手間が多い・複雑でわかりにくい」といったものがあります。

商品によほどの魅力がない限り、ユーザーは「商品を購入しようと思ったけれど、カートがどこにあるのかわからない」など些細な理由で簡単に離脱してしまうもの。

そこで今回は、Shopify のストアへ離脱率を下げるのに一役買いそうなボトムナビゲーション(ナビゲーションバー)を、試しに導入してみようと思いました。

Shopify でボトムナビゲーションを実装するには通常、コーディングを行なう必要がありますが、今回はノーコードで使えるアプリ・スマホナビゲーション|リテリア Navigationを使ってみることにしました。

https://apps.shopify.com/navigation?locale=ja

このアプリの特長は以下の通りです。

  • ノーコードで簡単に使える
  • アイコンやアイコン数、背景色などをカスタマイズ可能で、ストアに応じてデザインを変更できる
  • 日本語のアプリのため管理画面が日本語表示でわかりやすい

コーディングが不要で、管理画面も日本語表示のため、例えば Shopify のアプリを初めて利用する場合でも導入しやすいと思います。

月額料金も4.99 ドルと安価です。7 日間の無料体験もあるため、お試しでストアに導入してみたいという場合も気軽に使えます。

「スマホナビゲーション|リテリア Navigation」の使い方

ここからは、実際にアプリをインストールする方法や、アプリの基本的な使い方を解説していきます。

「スマホナビゲーション|リテリア Navigation」のインストール方法

まずは Shopify のストア管理画面にあるアプリ管理をクリックして、右上のストアをカスタマイズをクリックします。
image.png

アプリを検索するのボックスにスマホナビゲーション|リテリア Navigationと入力し、Enter キーを押します。
image.png

該当のアプリをクリックします。ここでは 1 段目に広告が表示されていて、該当のアプリは 2 段目の真ん中にありました。
image.png

以下の画面になるので、アプリを追加するをクリックしましょう。
image.png

すると以下の画面になるので、内容を確認してアプリをインストールをクリックします。ここまででインストールは完了です。
image.png

次に、アプリの設定をしていきます。テーマに反映の項目で、アプリを反映するテーマを選択し、有効化をクリックしましょう。

ここでは「Studio(公開中のテーマ)」を選択しています。
image.png

アプリを有効化しましたのポップアップが出れば設定は完了です。

そのまま、有効化ボタンの隣にあるプレビューボタンをクリックしましょう。
image.png

ストアが表示されました。

また、左側にあるアプリを埋め込むの項目にスマホナビゲーションのアプリが追加されているのが確認できます。
image.png

スマホナビゲーションのアプリ右側にトグルボタンがあるのでクリックします。

すると、以下のようにトグルボタンが青色になります(画面左側)。
image.png

次に、画面表示の項目(ここでは右上)でモバイルを選択し、画面をモバイル表示にしましょう。
image.png

すると、ストアがスマートフォンの表示画面になります。

ストアページの下部に以下のような**ボトムナビゲーション(ナビゲーションバー)**が設置されていれば、ここまでは OK です。
image.png

ボトムナビゲーション(ナビゲーションバー)をカスタマイズする方法

ここからは、ボトムナビゲーション(ナビゲーションバー)を細かくカスタマイズしていきたいと思います。

まず、アプリを埋め込むの項目にあるスマホナビゲーションをクリックしましょう。

すると、以下のように詳細設定の画面がでてきます。
image.png

1. アイコンの数

以下はアイコンの数が 3 つの場合の画面表示です。

向かって右側の画像の下の方にボトムナビゲーション(ナビゲーションバー)があり、アイコンが 3 個並んでいるのがわかります。
image.png

左側の詳細設定で、アイコンの数を 4 個にすると以下のようになります。
image.png

アイコンの数は 3 ~ 5 個の間で選べますが、今回は 3 個で作っていきたいと思います。

2. 背景色・アイコンの色

デフォルトでは、ボトムナビゲーション(ナビゲーションバー)の背景色は白です。このままでもよいのですが、今回は青系の色に変更したいと思います。

アプリを埋め込むの項目にある背景色をクリックしましょう。
image.png

すると以下の画面になるので、好きな色をクリックするか、カラーコードを入力して選んでいきます。
image.png

今回はカラーコードを入力しました。カラーコードを入力したあと、コードの枠外(真下など)をクリックすると色が反映されました。
image.png
image.png

次にアイコンの色ですが、同じようにアプリを埋め込むの項目にあるアイコンの色をクリックしましょう。

すると以下の画面になるので、好きな色をクリックするか、カラーコードを入力して選んでいきます。今回は、デフォルトの黒のままにします。
image.png

3. アイコンの画像・タイトル・URL

アイコンの画像を選択し、表示するタイトルと移動先の URL を設定しましょう。

先ほどの詳細設定の画面を中ほどまでスクロールすると、1 つ目のアイコンを設定する項目がでてきます。
image.png

1 つめのアイコンを選択してくださいの下にあるボックスをクリックすると、以下のようにさまざまなアイコンの名前がでてきます。
image.png

試しにカートを選択してみると、以下のようにボトムナビゲーション(ナビゲーションバー)の一番左のアイコンがカートのデザインに変更されました。
image.png

次に、1 つ目のタイトルの下にあるボックスに、アイコンのタイトルを入力しましょう。ここでは試しにカートと入力します。
image.png

すると以下のように、ボトムナビゲーション(ナビゲーションバー)の一番左のアイコンのタイトルが「カート」に変更されました。
image.png

ちなみにタイトルを空欄にすると、アイコンのみの表示になります。
image.png

最後に遷移先の URLの下にあるボックスに、対応する URL を入力すれば OK です。
image.png

今回は、ホーム・カート・チャットのアイコンを以下のように並べてみました。

なお、使いたいアイコンが一覧にない場合は、アプリの運営会社に問い合わせると対応してもらえるようです。
image.png

4. 微調整

そのほか、以下の項目を微調整できます。

  • ① アイコンやテキストのサイズ
  • ② 最初のアイコンから最後のアイコンまでの横幅
  • ③ リッチメニューが表示される範囲:ボトムナビゲーションをスマホのみに表示したい場合は 640px 程度に設定する。それ以外は設定不要
  • ④ ボトムナビゲーションの上下左右の余白
  • ⑤ 表示方法:ボトムナビゲーションを「常に表示」か「上スクロールで表示」か選ぶ

今回は以下のように調整してみました(①③④ を少し変更)。
image.png

すると、以下のようなデザインになりました。
image.png

これでボトムナビゲーション(ナビゲーションバー)の設置は完了です。

最後に

ここまでで、Shopify のストアにボトムナビゲーション(ナビゲーションバー)を設置できるスマホナビゲーション|リテリア Navigationの使い方の解説は終わりです。

実際のスマホへの表示画面を見ながら、設定画面で感覚的にアイコンを調整できるのがいいなと思いました。コーディングなしでボトムナビゲーションを設置できるのは楽でいいですね。

アプリストアは以下の通りです。現時点では 7 日間無料で利用できるので、興味のある方はインストールしてみてください。

スマホナビゲーション|リテリア Navigation

以下、こちらのブログの参考です。

Shopify ECサイトをスマホで利用しているユーザーのためのアプリ「スマホナビゲーション|リテリア Navigation」解説

Shopifyのサイトをスマホ最適化する方法を調査してみる

ここまでお読みいただき、ありがとうございました。

おすすめ記事