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

はじめに

今回の記事は、Shopify アプリである「スマホナビゲーション｜リテリア Navigation」の解説記事になります。

Shopify とは、ざっくり説明すると EC サイトを簡単に構築することができるプラットフォームであり、Shopify アプリとはそのプラットフォームの拡張機能のようなものです。WordPress の拡張機能のようなもの、と認識頂いて大丈夫です。

「スマホナビゲーション｜リテリア Navigation」は、Shopify ストアに ボトムナビゲーション/リッチメニュー機能を追加することができるアプリになります。

興味がある方は、以下の URL よりアプリのインストールを行って下さい。

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

通常、Shopify で ボトムナビゲーションを実装するには、コーディングが必要になります。

当アプリを使用すると、ノーコードで簡単にボトムナビゲーションを Shopify ストアに実装することができます。ボトムナビゲーションを実装することにより、ストアの利便性を高めましょう。

それでは、アプリの概要・インストール方法・使い方の解説を行っていきます。

「スマホナビゲーション｜リテリア Navigation」の概要

まず、「スマホナビゲーション｜リテリア Navigation」のざっくりとした使い方の解説を行います。

「スマホナビゲーション｜リテリア Navigation」は、Shopify ストアの画面下部に ボトムナビゲーション を実装できるアプリです。

コーディングの知識は全く必要ありません。また、オンラインストア 2.0 対応のアプリであるため、アプリ間の競合や、コードを汚染することもありません。

日本語対応したシンプルな管理画面　

「スマホナビゲーション｜リテリア Navigation」は、日本語対応したシンプルな管理画面になっています。

日本製のアプリであるため、直感的にアプリを導入することができます。アプリ導入の際に、迷うことはありません。

シンプルな操作なので、Shopify アプリ導入の経験が無い方も安心して導入することができます。

１クリックでアプリを有効化

「スマホナビゲーション｜リテリア Navigation」は、１クリックでアプリを有効化することができます。

管理画面の「有効化」をクリックすると、ストア画面の一番下に ボトムナビゲーション が挿入されます。

簡単カスタマイズ

「スマホナビゲーション｜リテリア Navigation」では、アイコンの数、背景色、アイコンの色やアイコンサイズなどの設定が簡単にできます。

URL は 2 通りの方法で設定できます。1 つ目は、URL 設定欄をクリックすることで出てくるページから選択する方法です。2 つ目は、直接 URL を設定する方法になります。

アイコンクリックで遷移先へ

「スマホナビゲーション｜リテリア Navigation」は、アイコンをクリックすることで遷移先することができます。

プロエンジニアが丁寧にサポート

「スマホナビゲーション｜リテリア Navigation」は、プロエンジニアが丁寧にサポートしています。分からないことがあれば、すぐに日本のプロのエンジニアに質問することができます。

それでは次に、アプリのインストール方法について説明していきます。

アプリのインストール

それでは、実際にアプリのインストールを行っていきましょう。

ストアの管理画面の「アプリ管理」から、「ストアをカスタマイズ」に移動しましょう。

アプリストアで、スマホナビゲーション｜リテリア Navigationと検索して下さい。

こちらをクリックして、アプリ画面に移動して下さい。

「アプリを追加する」をクリックして、ストアにアプリを追加しましょう。

Shopify パートナー用のアカウント（通称開発アカウント）でインストールを行うと、全ての機能を無料で利用することができます。
マーチャント用のアカウントの場合、月額 4.99 ドルで利用できます。7 日間の無料プラン付きのため、アプリの挙動を確認することが出来ます。

「アプリを追加する」をクリックすると、以下の画面に遷移します。
プライバリポリシーを確認の上、右上の「アプリをインストール」をクリックして、アプリのインストールを行います。

アプリの請求画面が表示されます。「承認」ボタンをクリックすることで、アプリの管理画面にアクセスできるようになります。
請求が始まるタイミングは、承認してから 7 日後からとなりますので、安心して承認ボタンをクリックしてください。7 日間以内にアンインストールした場合は、アプリの料金は一切請求されません。

管理画面が表示されれば、インストールは終了です。

アプリの設定

次に、アプリの設定を行います。

まず、アプリを導入するテーマを選択します。

テーマを選択したら「有効化」をクリックします。自動インストールは以上で終了です。

次に「プレビュー」をクリックしましょう。

TOP ページの一番下にボトムナビゲーションが追加されているのを確認できます。（表示されていない場合は画面をモバイルサイズに変更してみてください。）

ここまでで、アプリの導入は一通り完了です。

それでは次に、細かいアプリの使い方を見てみましょう。

使い方

上から順に設定をしていきます。

アイコンの数

アイコンの数は 3~5 の間で変更できます。

4 個にすると以下のようになります。

5 個にすると以下のようになります。

アイコンのサイズ・テキストのサイズ

アイコンのサイズは水色の範囲の大きさを、テキストサイズは赤色の範囲の大きさを設定できます。
背景色・アイコンの色は実際にいじってみて自身のサイトに合うよう調整してください。

ナビゲーションバーの大きさの設定

最初のアイコンから最後のアイコンまでの横幅は黒色の範囲を設定できます。
大きくすると下の画像のようになります。

リッチメニューが表示される範囲（0px~）は、スマホ時のみボトムナビゲーションを表示させたい場合 640px あたりにしておくとちょうどいい感じになります。

641px 以上のモニターでサイトを見ると表示されません。

ナビゲーション上下左右の余白

それぞれ 0px の場合は下の画像になります。

下の画像は 16px ずつに設定した場合です。

しっくりくるサイズを探してみてください。

表示方法

表示方法には２通りあります。１つ目は上にスクロールしたときに表示する方法です。

下にスクロールするとボトムナビゲーションが消え、上にスクロールするとまた現れます。

２つ目は常に表示する方法です。こちらでは、下にスクロールしても消えません。

アイコン・URL の設定

アイコンの設定部分をクリックすると次の表示になります。追加してほしいアイコンが有る場合はお問い合わせしていただけると幸いです。

先に述べたように、URL は 2 通りの方法で設定できます。1 つ目は、URL 設定欄をクリックすることで出てくるページから選択する方法です。2 つ目は、直接 URL を設定する方法になります。
設定欄をクリックすると次の画像のように表示されます。

もし見つからなかった場合や、外部の Youtube などにリンクしたいときなどは直接入力してください。

終わりに

今回は、「スマホナビゲーション｜リテリア Navigation」の解説を行いました。

少しでも興味があれば、以下のリンクよりアプリをインストール頂けるとありがたいです。

ここまでお付き合い頂き、誠にありがとうございました。
スマホナビゲーション｜リテリア