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

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

はじめに

今回の記事は Shopify アプリ「よくある質問どこでも挿入|リテリア FAQ」の解説記事になります。

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

「よくある質問どこでも挿入|リテリア FAQ」は、Shopify ストアのお好きなページに FAQ(よくある質問)を挿入することができる Shopify アプリです。

ストアに FAQ を導入したいと言う方は、ぜひ「よくある質問どこでも挿入|リテリア FAQ」をインストールしていただきたいです。

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

それでは、アプリを導入することでできること・インストール方法・使い方の解説を行なっていきます。

「よくある質問どこでも挿入|リテリア FAQ」でできること

「よくある質問どこでも挿入|リテリア FAQ」を使用すると、以下のようなさまざまな見た目の開閉式 FAQ を挿入することができます。

デザインはテーマのセクションと同じ感覚で(ノーコードで)自由に変更可能です。
FAQ を挿入するページに制限はなく、お好きなページに表示させることができます。

また、Online Store 2.0 に対応した Shopify アプリのため、テーマのコードや他のアプリと干渉を起こしません。安心してアプリをインストールいただけます。

アプリのインストール

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

ストアの管理画面の「アプリ管理」画面に表示されている「ストアをカスタマイズ」をクリックして、Shopify app store に移動してください。

アプリストアで、「よくある質問どこでも挿入|リテリア FAQ」を検索してください。
検索結果に「よくある質問どこでも挿入|リテリア FAQ」が表示されますので、クリックしてアプリの紹介ページを開きます。

「アプリを追加する」ボタンをクリックして、自分の Shopify ストアにアプリを追加します。
Shopify パートナーアカウントをお持ちの方は、開発ストアにインストールを行うことで全ての機能を無料でご利用いただくことが可能です。

マーチャント用のアカウント(普通の Shopify アカウント)ですと、月額 $4.99 でご利用いただけます。また、7 日間の無料お試し期間でアプリの挙動をご確認いただくことができます。

以下の画像のようなアプリのインストール確認画面が表示されます。
プライバシポリシーなどにご同意いただける場合は、「アプリをインストール」をボタンをクリックしてください。

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

以下のようなアプリの管理画面が表示されれば、インストールは完了です。

ここからは、アプリの詳しい使い方について説明していきます。

アプリの自動有効化

「よくある質問どこでも挿入|リテリア FAQ」には、アプリの自動追加機能があり、1 クリックでアプリをテーマに導入することができます。
自動インストールを行うとストアのお問い合わせページに開閉式(アコーディオン)の FAQ を表示するためのアプリブロックが挿入されます。

テーマを選択したら、「有効化」ボタンをクリックすることで、自動インストールが行われます。

「プレビュー」ボタンをクリックすることで、アプリがインストールされたアプリの画面を開くことができます。

初期状態のアプリブロック(見出しとアコーディオン)が表示 s れていれば自動追加は完了です。

アプリの手動追加

お問い合わせページ以外に FAQ を挿入したい場合やアプリの自動追加がうまくいかない場合などは、手動でアプリブロックを追加してください。

管理画面の「オンラインストア」を開きます。アプリを導入したいテーマの「カスタマイズ」テーマエディタを開きます。

「リテリア FAQ」を追加したいページのカスタマイズ画面を開きます。この記事では例としてホームページに導入していきます。

画面左のサイドバーにある「セクションを追加」から「リテリア FAQ」のアプリのブロックを選択します。

「リテリア FAQ(アコーディオン)」を選択した場合以下のように質問 1 つぶんが表示されます。

リテリア FAQ で使用できるアプリブロックの種類

リテリア FAQ では、「アコーディオン」「見出し」の 2 種類のアプリブロックを使用できます。

「アコーディオン」アプリブロック

「アコーディオン」アプリブロックは、開閉式の質問と回答を登録できるアプリブロックです。

Image from Gyazo

「見出し」アプリブロック

「見出し」アプリブロックは、FAQ の見出しとして使うことができるアプリブロックです。

「アコーディオン」アプリブロックのカスタマイズ

「アコーディオン」アプリブロックのカスタマイズ方法について解説していきます。

質問と回答の設定

「質問」と「回答」の設定項目で常に表示される質問部分と開いた時に表示される回答部分のテキストを入力することができます。

改行をしたい場合は、<br>を使用してください。

リンクを埋め込みたい場合は、<a> タグを使用します。例えば、以下のように設定します。(こちらは HTML や CSS がわかる方向けの設定です。)

リンクを埋め込む例
詳細は<a href="https://re-terior.com">こちら</a>をご覧ください。

質問のスタイル設定

質問部分の背景色・テキストの色、テキストのサイズなどをカスタマイズすることができます。

背景色とテキストの色

「質問の背景色」で背景の色、「質問テキストの色」で質問のテキストの色を変更可能です。

テキストの太さ・サイズ・文字間・行間

「テキストを太字にする」にチェックを入れると質問のテキストが太く表示されます。

「質問のテキストサイズ(スマホ / PC)」では、スマホ表示の時と PC 表示の時のテキストのサイズを選択することができます。

「文字間」の項目では、文字と文字の距離を設定することができます。(設定した値 ÷ 10)em が反映されます。

「行間」の項目では、行と行の距離を設定することができます。

アイコンの種類・色

「アイコンの種類」でアイコンの形を選択することができます。アイコンの種類は、以下の 4 種類から選択できます。

  • プラス(回転)
  • プラス/マイナス
  • シンプルな下矢印
  • まるで囲まれた下矢印




「アイコンの色」の項目で、アイコンの色を変更できます。

回答のスタイル設定

回答部分のテキストの色・テキストのサイズなどをカスタマイズすることができます。

基本的にカスタマイズできる項目は「質問のスタイル設定」と同様です。(背景色・アイコンの設定はありません。)

ボーダーの設定

ボーダーの表示 / 非表示・ボーダーの太さ・色をカスタマイズすることができます。

ボーダーの表示 / 非表示

「ボーダーを表示する」にチェックをつけるとボーダーが表示されます。デフォルトでは、チェックが入っています。

ボーダーの太さ

「ボーダーの太さ」の項目で、ボーダーの太さを設定することができます。1px ~ 10px の間で設定できます。

ボーダーの色

「ボーダーの色」の項目で、ボーダーの色を設定することができます。

ブロックの設定

ブロックの設定では、ブロックの最大幅や余白などをカスタマイズすることができます。

ブロックの最大幅

「ブロックの最大幅を設定する」のチェックボックスでブロックの最大幅を設定するかどうかを選択できます。
チェックボックスを外すとブロックが画面いっぱいに広がります。

「ブロックの最大幅を設定する」にチェックをつけているときに、「ブロックの最大幅」を設定することができます。300px ~ 1300px の間で設定できます。

「質問/回答上下の余白」の設定項目で、質問の上下の余白を設定できます。

「質問/回答の左右の余白あり」のチェックボックスで、左右の余白を有無を選択できます。

「見出し」アプリブロックのカスタマイズ

「見出し」アプリブロックのカスタマイズ方法について解説していきます。

見出しテキストの設定

「見出し」の入力欄で、見出しのテキストをカスタマイズすることができます。

見出しのスタイル設定

見出しのテキストの色・配置・サイズなどをカスタマイズすることができます。

テキストの色

「テキストの色」で見出しのテキストの色を変更できます。

テキストの太さ

「テキストを太字にする」にチェックをつけると、見出しが太文字で表示されます。デフォルトでチェックがついています。

テキストの位置

「テキストの位置」の項目で、テキストをの配置を設定できます。配置は以下の 3 種類から選べます。

  • 左揃え
  • 中央揃え
  • 右揃え

テキストのサイズ

「テキストのサイズ(スマホ / PC)」で、スマホ時と PC 時のテキストサイズをそれぞれ設定することができます。

文字間

「文字間」の項目で、テキストの文字と文字の距離を設定できます。(設定した値 ÷ 10)em が反映されます。

ボーダーの設定

ボーダーの表示・太さ・色をカスタマイズすることができます。

ボーダーの表示 / 非表示

「ボーダーを表示する」にチェックをつけると、ボーダーが表示されまます。デフォルトではチェックがついています。

ボーダーの太さ

「ボーダーの太さ」の項目で、ボーダーの太さを設定することができます。1px ~ 10px の間で設定できます。

ボーダーの色

「ボーダーの色」の項目で、ボーダーの色を設定することができます。

ブロックの設定

ブロックの最大幅・余白をカスタマイズすることができます。
設定項目は、「アコーディオン」アプリブロックの余白の同様となっています。

セクションの余白をテーマと同じにする

アプリブロックで挿入したセクションの余白を使用しているテーマに合わせる場合は、「アプリ」の設定項目にある「セクションの余白をテーマと同じにする」にチェックをつけます。
アプリブロックを画面幅いっぱいに表示したい場合は、このチェックを外してください。

終わりに

今回は、「よくある質問どこでも挿入|リテリア FAQ」の解説を行いました。

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

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

recommendおすすめ記事

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

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

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

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

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

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

スマホナビゲーション|リテリア Navigationのアイコン
アプリ解説

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

どこでも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誘導」について徹底解説