商品情報にスキップ
1 1
公開日:2026.05.03

【Horizon】カートにFAQ(よくある質問)アコーディオンを追加する設定例

【Horizon】カートにFAQ(よくある質問)アコーディオンを追加する設定例

用途

  • カート編集
詳細を表示する

Horizonテーマで、カートドロワーとカートページに「よくある質問(FAQ)」のアコーディオンを追加する設定例です。テーマ本体のファイルを変更せず、テーマエディタに「カスタムLiquid」セクションを1つ追加してコードを貼り付けるだけで実装できます。テーマアップデートの影響も受けません。


完成イメージ

「特別な指示」「ディスカウント」と並ぶ位置に「よくある質問」のアコーディオンが追加されます。罫線は既存の枠と自然に統合され、メモ・割引が両方非表示のときも JavaScript で枠を補完するため罫線が消えません。

カートドロワーに『よくある質問』のアコーディオンが追加された状態

外側のアコーディオンを開くと、中に質問・回答が二重アコーディオンで並びます。展開時の最大高さは画面の40%(または360px)に制限されているため、小型のスマホでもカート内の商品が隠れません。

FAQを展開して質問・回答が表示された状態


仕組み — Section Rendering API への対応

Horizonのカートドロワーは商品追加・削除のたびに Section Rendering API で再描画されるため、JavaScriptで挿入した要素は通常そのままでは消えてしまいます。このTIPSでは cart-drawer-componentcart-items-component を MutationObserver で監視し、さらに公式の cart:update イベントもフックすることで、再描画後にFAQを自動で再注入します。カートページ(/cart)でも同じスクリプトが動作します。


Q&A の追加・編集

コード内の <details class="cart-faq__item"> ブロック(4行で1セット)をコピペで増減すれば、Q&A の数を自由に変更できます。

Q&A の追加・編集箇所(ハイライト箇所)


設定手順

◆ STEP 1
テーマエディタを開き、ヘッダーグループに「カスタムLiquid」セクションを追加します。

◆ STEP 2
下記のサンプルコードを丸ごと貼り付けます。

◆ STEP 3
カートドロワー・カートページで動作を確認します。


関連TIPS

カート関連のカスタマイズはこちらの記事も参考になります:
【Horizon】カート画面に「あといくらで送料無料」を表示する設定例

ご購入(すべて¥0です)いただくと、サンプルコードをご覧いただけるようになります。

すでにご購入済みの方はこちらからログインしてください。

サンプルコード

動作検証済テーマ:Horizon 3.5.1

カスタムLiquidに貼り付けるコード(全体)

テーマエディタ → ヘッダーグループ → セクションを追加 → 「カスタムLiquid」を選び、下のコードを丸ごと貼り付けてください。中ほどの <details class="cart-faq__item"> ブロックを編集すれば Q&A を増減できます。

その他の購入促進に関するTIPS