メタフィールドを使ってFAQページを実装するチュートリアル

はじめに 冒頭でも記した通り、セクションやブロックを使ったFAQの実装方法には限界がありますので、より柔軟に出力できるよう、このカスタマイズ方法をご紹介します。 本カスタマイズは簡単ですが、FAQページをHTMLで構築したい上級者向けです。 また、Q&AのHTMLには「details/summary」を使います。 一昔前はjQueryのアコーディオンで実装される方も多かったのですが、脱jQueryやSEOの観点から現在ではNG行為とされております。 というのも、jQuery制御の場合はjQuery本体が重いというのもありますが、それ以前に回答部分を「display: none;」で隠している為、隠しコンテンツとみなされGoogleからスパム行為と判断される可能性が高く、読み込み対象にならないのでアクセシビリティ的にもよくありません。 その点、「details/summary」なら、HTMLだけで開閉できますので、基本的にはCSSでスタイリングするだけ。 CSSだけでも開閉アニメーションも可能ですが、よりスムーズな開閉アニメーションが希望なら、jQueryを使わずJavascriptで実装する方法もあります。 実装方法は本当に簡単で、基本的には1ファイルを編集するのみ。是非最後まで読んでください。 メタフィールドを定義 管理メニューの「設定→カスタムデータ」より「メタフィールド→ページ」を選択し、「定義を追加する」ボタンよりページメタフィールドの定義を追加します。

「名前」「ネームスペースとキー」をそれぞれ入力し、「タイプ」は「JOSN」を選択してください。 本チュートリアルでは、上記画像の通り「名前：FAQ」「ネームスペースとキー：custom.faq」としてありますが、管理しやすいように編集してください。 セクションファイルを編集 ページを出力する、{{ page.content }}というコードが書かれているセクションファイルを探してください。Dawnの場合は「main-page.liquid」が該当します。 このファイルの最初の方に以下のLiquidコードを挿入します。 {%- liquid assign meta_faq = page.metafields.custom.faq if meta_faq != blank capture faq_list echo ' ' for faq_value in meta_faq.value echo faq_value.category | prepend: ' ' | append: ' ' echo ' ' for faq in faq_value.faq echo ' ' echo faq.q | prepend: ' ' | append: ' ' echo faq.a | prepend: ' ' | append: '

' echo ' ' endfor echo ' ' endfor echo ' ' endcapture endif -%}

2行目を設定した「ネームスペースとキー」に差し替えてください。 また、構造を編集したい場合はお好きなようにHTMLタグを編集してください。 続いて{{ page.content }}を以下に差し替えます。 {%- liquid if meta_faq != blank echo page.content | replace: '[faq_list]', faq_list else echo page.content endif -%} 簡単に説明しますと、メタフィールドを定義したページのコンテンツに「[faq_list]」というショートコードを差し込めば、カテゴリ毎にFAQの一覧が出力される仕様で、ショートコード化することで、コンテンツの間にも一覧が差し込める設計です。 以上でテーマの編集は終わりです。 必要に応じてCSSを追記してください。 JSONデータを作成 ShopifyではJSONファイルに触れる機会が多いので、馴染み深い方も多いはず。基本的には以下のようなシンプル構造です。 { "category": "カテゴリ", "faq": [ { "q": "質問", "a": "回答" } ] }

これをベースにして以下の様にカテゴリやQ&Aを増やしていきます。 [ { "category": "商品について", "faq": [ { "q": "返品はできますか？", "a": "基本的に開封後の返品は対応しかねますが、初期不良があった場合はお問い合わせください。" }, { "q": "保証内容を教えてください", "a": "最短期間での再発送などのサポート体制で対応させていただいております。 また、必要に応じて分析や調査を行い、お客様に結果をご報告させていただくとともに再発防止も徹底してまいります。" } ] }, { "category": "お支払いについて", "faq": [ { "q": "クレジットカードは使えますか？", "a": "VISA、MasterCard、JCB、AMEXなどのクレジットカードをご利用いただけます。" }, { "q": "銀行振込はできますか？", "a": "システムの都合上、銀行振込には対応しておりません。" } ] }, { "category": "配送について", "faq": [ { "q": "送料はいくらかかりますか？", "a": "地域によって異なります。詳しくは こちらのページ をご確認ください。" }, { "q": "納品までどのくらいかかりますか？", "a": "通常はご注文より2営業日以内に発送していただいております。 ただし、地域や天候、繁忙期によって前後する場合がございます。" }, { "q": "日本以外でも購入できますか？", "a": "現在は日本国外への発送はしておりません。" } ] } ] こんな感じでカッコやカンマに気をつけて追加していくだけなので、HTMLコーディングよりも遥かに簡単で迅速に実装できます。

プログラミングに詳しい方なら、エクセルデータから上記フォーマットのJSONへ書き出すこともできそうですね。

基本的にはテキストのみを想定した構成ですが、上記の様に タグも使えますし、エスケープ処理すれば タグも差し込めます。 また、回答部分にもっと複雑なHTML出力を希望されている場合は、編集したセクションファイルの回答を出力する部分の タグを削除してください。 ページを作成 「オンラインストア→ページ」より「ページを追加する」ボタンでFAQページを作成します。 「タイトル」や「ハンドル」を設定し「コンテンツ」にショートコード「[faq_list]」を挿入します。

ショートコードはコードエディタに切り替えてから挿入することをおすすめします。 ビジュアルエディタのまま挿入しても出力はされますが、前後に タグが挿入されてしまいますのでご注意ください。

保存すると下部に「メタフィールド」ブロックが表示されますので、先程作成したJSONデータを貼り付けます。

保存してエラーが出なければ、作成したページ上にFAQの一覧が表示されているはずです。 以下はCSSも適用させた状態の見本です。

カートにアイテムが追加されました

メタフィールドを使ってFAQページを実装するチュートリアル

メタフィールドを使った、もう一つのFAQページ作成方法

2024年4月

2024年5月