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

株式会社リテリア

2022/05/28

はじめに

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

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

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

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

よくある質問どこでも挿入｜リテリア FAQ

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

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

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

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

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

:::message alert
Online Store 2.0 非対応テーマ（Debut・Brooklyn・Narrative など）は、アプリの動作対象外となりますので、ご注意ください。
:::

アプリのインストール

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

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

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

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

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

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

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

:::message
開発ストアの場合は、請求画面は表示されません。マーチャントにストアのオーナー権を移行した後に請求が開始されます。
:::

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

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

アプリの自動有効化

「よくある質問どこでも挿入｜リテリア 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 が反映されます。