{"product_id":"2026-05-03","title":"【Horizon】カートにFAQ（よくある質問）アコーディオンを追加する設定例","description":"\u003cp\u003eHorizonテーマで、カートドロワーとカートページに「よくある質問（FAQ）」のアコーディオンを追加する設定例です。テーマ本体のファイルを変更せず、テーマエディタに「カスタムLiquid」セクションを1つ追加してコードを貼り付けるだけで実装できます。テーマアップデートの影響も受けません。\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\n\u003cdiv class=\"divider\"\u003e\u003c\/div\u003e\n\n\u003ch3\u003e完成イメージ\u003c\/h3\u003e\n\u003cp\u003e「特別な指示」「ディスカウント」と並ぶ位置に「よくある質問」のアコーディオンが追加されます。罫線は既存の枠と自然に統合され、メモ・割引が両方非表示のときも JavaScript で枠を補完するため罫線が消えません。\u003c\/p\u003e\n\u003cp\u003e\u003cimg alt=\"カートドロワーに『よくある質問』のアコーディオンが追加された状態\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2026-05-03_1.png?v=1777711498\" class=\"zoomable-image\"\u003e\u003c\/p\u003e\n\u003cp\u003e外側のアコーディオンを開くと、中に質問・回答が二重アコーディオンで並びます。展開時の最大高さは画面の40%（または360px）に制限されているため、小型のスマホでもカート内の商品が隠れません。\u003c\/p\u003e\n\u003cp\u003e\u003cimg alt=\"FAQを展開して質問・回答が表示された状態\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2026-05-03_2.png?v=1777712230\" class=\"zoomable-image\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\n\u003cdiv class=\"divider\"\u003e\u003c\/div\u003e\n\n\u003ch3\u003e仕組み — Section Rendering API への対応\u003c\/h3\u003e\n\u003cp\u003eHorizonのカートドロワーは商品追加・削除のたびに Section Rendering API で再描画されるため、JavaScriptで挿入した要素は通常そのままでは消えてしまいます。このTIPSでは \u003ccode\u003ecart-drawer-component\u003c\/code\u003e と \u003ccode\u003ecart-items-component\u003c\/code\u003e を MutationObserver で監視し、さらに公式の \u003ccode\u003ecart:update\u003c\/code\u003e イベントもフックすることで、再描画後にFAQを自動で再注入します。カートページ（\u003ccode\u003e\/cart\u003c\/code\u003e）でも同じスクリプトが動作します。\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\n\u003ch3\u003eQ\u0026amp;A の追加・編集\u003c\/h3\u003e\n\u003cp\u003eコード内の \u003ccode\u003e\u0026lt;details class=\"cart-faq__item\"\u0026gt;\u003c\/code\u003e ブロック（4行で1セット）をコピペで増減すれば、Q\u0026amp;A の数を自由に変更できます。\u003c\/p\u003e\n\u003cp\u003e\u003cimg alt=\"Q\u0026amp;A の追加・編集箇所（ハイライト箇所）\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2026-05-03_3.png?v=1777711498\" class=\"zoomable-image\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\n\u003cdiv class=\"divider\"\u003e\u003c\/div\u003e\n\n\u003ch3\u003e設定手順\u003c\/h3\u003e\n\u003cp\u003e◆ STEP 1\u003cbr\u003eテーマエディタを開き、ヘッダーグループに「カスタムLiquid」セクションを追加します。\u003c\/p\u003e\n\u003cp\u003e◆ STEP 2\u003cbr\u003e下記のサンプルコードを丸ごと貼り付けます。\u003c\/p\u003e\n\u003cp\u003e◆ STEP 3\u003cbr\u003eカートドロワー・カートページで動作を確認します。\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\n\u003ch3\u003e関連TIPS\u003c\/h3\u003e\n\u003cp\u003eカート関連のカスタマイズはこちらの記事も参考になります:\u003cbr\u003e\n\u003ca href=\"\/products\/2026-04-07\"\u003e【Horizon】カート画面に「あといくらで送料無料」を表示する設定例\u003c\/a\u003e\u003c\/p\u003e","brand":"STORE DOJO","offers":[{"title":"Default Title","offer_id":48828653895931,"sku":null,"price":0.0,"currency_code":"JPY","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2026-05-03.png?v=1777711502","url":"https:\/\/store-dojo.com\/products\/2026-05-03","provider":"STORE DOJO","version":"1.0","type":"link"}