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

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

はじめに

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

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

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

ストアに FAQ を導入したいと言う方は、ぜひ「よくある質問どこでも挿入|リテリア 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 を表示するためのアプリブロックが挿入されます。

アプリブロックの自動挿入

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

「有効化」ボタンをクリック

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

「プレビュー」ボタンをクリック

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

自動追加は完了

アプリの手動追加

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

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

「カスタマイズ」テーマエディタを開く

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

「リテリア FAQ」を追加したいページのカスタマイズ画面を開く

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

「セクションを追加」から「リテリア FAQ」のアプリのブロックを選択

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

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

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

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

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

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

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

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

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

見出し」アプリブロック

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

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

質問と回答の設定

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

質問と回答の設定

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

質問と回答の設定

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

詳細は<a href="https://re-terior.com">こちら</a>をご覧ください。

質問と回答の設定

質問のスタイル設定

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

背景色とテキストの色

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

背景色とテキストの色

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

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

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

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

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

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

「文字間」の項目では、文字と文字の距離を設定

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

「行間」の項目では、行と行の距離を設定する

アイコンの種類・色

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

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

アイコンの種類・色

アイコンの種類・色
アイコンの種類・色
アイコンの種類・色
アイコンの種類・色

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

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

回答のスタイル設定

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

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

回答のスタイル設定

ボーダーの設定

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

ボーダーの表示 / 非表示

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

ボーダーの表示 / 非表示

ボーダーの太さ

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

ボーダーの太さ

ボーダーの色

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

ボーダーの色

ブロックの設定

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

ブロックの最大幅

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

ブロックの最大幅

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

ロックの最大幅を設定する

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

「質問/回答上下の余白」の設定

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

「質問/回答の左右の余白あり」

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

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

見出しテキストの設定

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

見出しテキストの設定

見出しのスタイル設定

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

テキストの色

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

テキストの色

テキストの太さ

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

テキストの太さ

テキストの位置

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

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

テキストの位置

テキストのサイズ

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

テキストのサイズ

文字間

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

文字間

ボーダーの設定

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

ボーダーの表示 / 非表示

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

ボーダーの表示 / 非表示

ボーダーの太さ

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

ボーダーの太さ

ボーダーの色

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

ボーダーの色

ブロックの設定

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

ブロックの設定

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

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

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

終わりに

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

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

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

recommendおすすめ記事

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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