Horizonテーマで、テーマコードを一切編集せずに標準のブロックとセクションだけでカテゴリ別FAQページを作る設定例です。アコーディオン × グルーピング × ページ内アンカーリンク（目次から該当カテゴリへジャンプ）を、templates/page.faq.json のブロック構成のみで実現します。
仕組み
ページ全体を main-page セクションの中に「目次」「カテゴリ × 5」として並べ、各カテゴリは group ブロック内に「見出し（text / h2）+ accordion（Q&Aを _accordion-row で4件）」を入れる構成です。目次は先頭の group ブロックに button を5つ並べ、各ボタンの style を「リンク」、リンク先URLを #faq-xxx のアンカー指定にします。アンカーの飛び先は、各カテゴリ直前に置いた custom-liquid ブロックの <span id="faq-xxx"> で受けます。
1. 目次ボタン → アンカーリンクの飛び先
標準ブロックには「カスタムID入力欄」がないため、custom-liquid ブロックに <span id="faq-xxx" class="faq-anchor"></span> を1行置くだけでアンカーマーカーとして機能させます。目次ボタンの link URL欄には #faq-xxx をそのまま入力すればOK。Horizonは assets/base.css に html { scroll-behavior: smooth } を持っているため、CSS追記なしでスムーススクロールが効きます。
2. カテゴリ × 5 のグルーピング
1カテゴリ = 1つの group ブロック。中に text（h2）でカテゴリ見出しを置き、その下に accordion ブロックで Q&A を4件ずつ収めています。accordion 側はアイコンを plus、行間に区切り線（dividers）を有効化し、視認性を確保。
実装のポイント
◆ 配色の罠
TOC（目次）の group ブロックに color_scheme: scheme-2 を指定すると、link スタイルのボタンを置いたときホバー時に文字が白く消えます。Horizon の link スタイルは :hover で color: var(--color-primary-hover) を当てており、scheme-2 の primary_hover が #ffffff（白）に設定されているため。scheme-3 など primary_hover が黒系のスキームに切り替えれば解決します。
◆ ヘッダー固定オフセット
ヘッダーを固定（sticky）にしている場合、アンカー飛び先がヘッダーの裏に隠れます。共通の custom-liquid ブロックを1つ先頭に置き、<style>.faq-anchor { scroll-margin-top: 100px; }</style> を入れて回避できます（ヘッダーが固定でなければ省略可）。
手順
◆Step1: ページの作成
管理画面の「販売チャネル > オンラインストア > ページ」で「FAQ」「よくある質問と答え」等のページを新規作成します。
◆Step2: テンプレート割当
テーマエディタで page.faq テンプレートを新規作成し、上記ページに割り当てます。
◆Step3: ブロック構成
テンプレート上で、上記の構造マップ通りにブロックを配置・設定します。本TIPS購入後にダウンロードできる templates/page.faq.json をテーマのコードエディタ（または GitHub 連携テーマ）にそのまま貼り付ければ、即時に同じ構成を再現できます。
