LoginSignup
0
0

More than 1 year has passed since last update.

SfopifyのテーマDawnでFAQページを作ったときに、ページタイトルとコンテンツが表示されなった

Last updated at Posted at 2023-03-17

こちらの記事を読み、ShopifyのテーマDawnでFAQページを作ったとき、ページタイトルとコンテンツが表示されていないことに気が付きました。

この記事を読み、FAQページを追加できました。
でも、ページタイトルとコンテンツが表示されていないことに気が付いたのです。

ブラウザのデベロッパーツールを使い、該当する場所のクラス名を調べました。
そして、下記のコードをfaq-template.liquidに追記しました。

<div class="collection-hero color-background-1 gradient">
  <div class="collection-hero__inner page-width">
    <div class="collection-hero__text-wrapper">
      <h1 class="collection-hero__title">{{ page.title }}</h1>
      {{ page.content }}
    </div>
  </div>
</div>

このコードで、最低限テーマのCSSが反映されて、ページタイトルと、コンテンツを表示できます。
ページタイトルとコンテンツは、Shopifyの管理画面のテーマからページの編集のところで、自由に入力できます。
スクリーンショット 2023-03-17 135931.png

テーマDawn以外の場合は、クラス名を確かめてから試してみてください。

他のsectionで、FAQを使いたい場合

下記のように、スキーマの部分を書くと他のsectionで、追加できるようになります。

{% schema %}
{
  "name": "FAQ",
  "settings": [],
  "blocks": [
    {
      "type": "question",
      "name": "質問",
      "settings": [
        {
          "type": "text",
          "id": "question",
          "label": "質問タイトル"
        },
        {
          "type": "richtext",
          "id": "answer",
          "label": "答え"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "FAQ",
      "category": "Custom"
    }
  ]


}
{% endschema %}

presetsという項目を追加すると、他のsectionで追加できるようになります。
参考記事は、こちらです。

制作したFAQページでは、セクション追加ができない

冒頭でご紹介したFAQページの作り方では、ウェブのテーマエディタでセクション追加ができないです。
そのため、セクション追加ができるように、上記の記事のようにJSONの拡張子でテンプレートの中にファイルを作り、sectionにも追加する方法が良いと思います。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0