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

株式会社リテリアのアイコン
株式会社リテリア

はじめに

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

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

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

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

https://apps.shopify.com/navigation?locale=ja&from=hp-guide

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

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

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

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

スマホナビゲーションバナー

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

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

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

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

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

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

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

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

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

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

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

簡単カスタマイズ

カスタマイズ画面

カスタマイズ画面

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

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

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

遷移方法

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

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

丁寧サポート

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

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

アプリのインストール

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

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

カスタマイズ画面

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

ストア画面

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

検索結果

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

アプリ画面

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

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

アプリをインストール

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

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

管理画面

アプリの設定

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

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

テーマ選択

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

有効化

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

プレビュー

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

ホームページ

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

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

使い方

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

アイコンの数

アイコン数

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

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

アイコン4

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

アイコン5

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

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

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

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

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

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

例

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

~640

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

640~

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

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

0pxの例

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

16pxの例

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

表示方法

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

上スクロールで表示

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

常に表示

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

アイコン・URL の設定

アイコンURL

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

アイコン例

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

ページ例

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

URLを直接入力

終わりに

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

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

ここまでお付き合い頂き、誠にありがとうございました。

https://apps.shopify.com/navigation?locale=ja&from=hp-guide

recommendおすすめ記事

らくらくお気に入りリスト | リテリア wishlistのアイコン
アプリ解説

Shopifyでお気に入り機能を実装するアプリ『リテリア wishlist』を解説

セット売り|リテリア セット販売のアイコン
アプリ解説

日本語に完全対応したセット販売アプリ「セット売り|リテリア セット販売」について徹底解説

らくらく見出し挿入アプリ|リテリア Titleのアイコン
アプリ解説

Shopifyで高スタマイズタイトルを簡単に導入できるアプリ「リテリア Title」について解説

よくある質問どこでも挿入|リテリア FAQのアイコン
アプリ解説

ShopifyストアにFAQ(よくある質問)を挿入できるアプリ『リテリア FAQ』の使い方を徹底解説

どこでもYouTube動画埋め込み|リテリア Videoのアイコン
アプリ解説

ShopifyストアにYouTube動画を埋め込む方法を徹底解説!

らくらくバナー設置アプリ|リテリア Bannerのアイコン
アプリ解説

Shopifyでリンク付き画像を簡単に設置できる「リテリア Banner」に付いて解説

追従購入ボタンらくらく挿入|リテリア Buy Buttonのアイコン
アプリ解説

商品ページに追従ボタンを簡単に導入できるShopifyアプリ | リテリア Buy Button について解説

送料無料キャンペーン|リテリア 告知のアイコン
アプリ解説

【公式解説】簡単に送料無料バーを設定できる Shopify アプリ「リテリア 告知」について解説!

スライドショー挿入アプリ|リテリア スライドショーのアイコン
アプリ解説

高カスタマイズ画像スライドショーを挿入できるShopifyアプリ「リテリア スライドショー」の使い方を徹底解説

クーポンコード 1クリックでコピー|リテリア Couponのアイコン
アプリ解説

画像をクリックするだけでクーポンコードをコピーできるShopifyアプリ「リテリア Coupon」の解説

離脱防止ポップアップバナー挿入アプリ|リテリア Popupのアイコン
アプリ解説

Shopifyで離脱防止ポップアップを設置できる「リテリア Popup」について徹底解説

らくらく日本語フォント設定|リテリア Font Pickerのアイコン
アプリ解説

Shopifyで日本語フォントを使えるアプリ『リテリア Font Picker』について徹底解説

商品ページ発売予告アプリ|リテリア Coming Soonのアイコン
アプリ解説

Shopifyの商品詳細ページに発売予告機能を追加できるアプリ「リテリア Coming Soon」について解説

どこでもカートに追加|リテリア ぽんぽんカートのアイコン
アプリ解説

【Shopifyアプリ】トップページやコレクションページから1クリックでカートに追加出来るアプリについての解説

らくらく商品レビュー|リテリア Reviewのアイコン
アプリ解説

日本製商品レビューShopifyアプリ「リテリア Review」の使い方を徹底解説

らくらくランキング表示アプリ|リテリア Rankingのアイコン
アプリ解説

Shopifyでコレクションをランキング表示するアプリ『リテリア Ranking』を徹底解説

らくらく余白調整|リテリア Marginのアイコン
アプリ解説

簡単に余白を調整できるShopifyアプリ「リテリア Margin」を使ってストアのデザイン性を向上させよう

Aboutページらくらく作成|リテリア About Usのアイコン
アプリ解説

ShopifyストアのAboutページに表を埋め込むことができるアプリ「リテリア About Us」を解説

LINE誘導ボタンらくらく設置|リテリア LINE誘導のアイコン
アプリ解説

LINE誘導ボタンを簡単に設置できるShopifyアプリ「リテリア LINE誘導」について徹底解説