Horizonテーマで、カートドロワーとカートページに「よくある質問(FAQ)」のアコーディオンを追加する設定例です。テーマ本体のファイルを変更せず、テーマエディタに「カスタムLiquid」セクションを1つ追加してコードを貼り付けるだけで実装できます。テーマアップデートの影響も受けません。
完成イメージ
「特別な指示」「ディスカウント」と並ぶ位置に「よくある質問」のアコーディオンが追加されます。罫線は既存の枠と自然に統合され、メモ・割引が両方非表示のときも JavaScript で枠を補完するため罫線が消えません。

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

仕組み — Section Rendering API への対応
Horizonのカートドロワーは商品追加・削除のたびに Section Rendering API で再描画されるため、JavaScriptで挿入した要素は通常そのままでは消えてしまいます。このTIPSでは cart-drawer-component と cart-items-component を MutationObserver で監視し、さらに公式の cart:update イベントもフックすることで、再描画後にFAQを自動で再注入します。カートページ(/cart)でも同じスクリプトが動作します。
Q&A の追加・編集
コード内の <details class="cart-faq__item"> ブロック(4行で1セット)をコピペで増減すれば、Q&A の数を自由に変更できます。

設定手順
◆ STEP 1
テーマエディタを開き、ヘッダーグループに「カスタムLiquid」セクションを追加します。
◆ STEP 2
下記のサンプルコードを丸ごと貼り付けます。
◆ STEP 3
カートドロワー・カートページで動作を確認します。
関連TIPS
カート関連のカスタマイズはこちらの記事も参考になります:
【Horizon】カート画面に「あといくらで送料無料」を表示する設定例
