{"product_id":"2026-05-03","title":"[Horizon] Add a FAQ accordion to the cart drawer and cart page","description":"\u003cp\u003eAn example of adding a FAQ accordion to the cart drawer and cart page in the Horizon theme. No theme file edits required — just paste a single Custom Liquid section into the Theme Editor. Theme updates won't break this customization.\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\n\u003cdiv class=\"divider\"\u003e\u003c\/div\u003e\n\n\u003ch3\u003eResult\u003c\/h3\u003e\n\u003cp\u003eA \"Frequently Asked Questions\" accordion appears alongside the existing \"Order note\" and \"Discount\" rows. Borders integrate naturally with the existing frame, and JavaScript injects a synthetic frame when both note and discount are disabled, so borders never disappear.\u003c\/p\u003e\n\u003cp\u003e\u003cimg alt=\"Cart drawer with FAQ accordion added\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2026-05-03_1_en.png?v=1777711498\" class=\"zoomable-image\"\u003e\u003c\/p\u003e\n\u003cp\u003eOpening the outer accordion reveals nested Q\u0026A items inside. The expanded height is capped at 40% of the viewport (or 360px), so cart items remain visible even on small phones.\u003c\/p\u003e\n\u003cp\u003e\u003cimg alt=\"FAQ expanded showing questions and answers\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2026-05-03_2_en.png?v=1777712234\" 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\u003eHow it works — Handling the Section Rendering API\u003c\/h3\u003e\n\u003cp\u003eHorizon re-renders the cart drawer via the Section Rendering API each time a cart item is added, removed, or updated. Naively injected DOM elements would get wiped on every cart update. This TIPS uses a scoped MutationObserver on \u003ccode\u003ecart-drawer-component\u003c\/code\u003e and \u003ccode\u003ecart-items-component\u003c\/code\u003e, plus the official \u003ccode\u003ecart:update\u003c\/code\u003e event, to automatically re-inject the FAQ after every re-render. The same script works on the cart page (\u003ccode\u003e\/cart\u003c\/code\u003e) as well.\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\n\u003ch3\u003eAdding or editing Q\u0026A\u003c\/h3\u003e\n\u003cp\u003eEach Q\u0026A is a 4-line \u003ccode\u003e\u0026lt;details class=\"cart-faq__item\"\u0026gt;\u003c\/code\u003e block. Copy and paste to add or remove items.\u003c\/p\u003e\n\u003cp\u003e\u003cimg alt=\"Q\u0026A editing area in the code\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2026-05-03_3_en.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\u003eSetup\u003c\/h3\u003e\n\u003cp\u003e◆ STEP 1\u003cbr\u003eOpen the Theme Editor and add a \"Custom Liquid\" section to the header group.\u003c\/p\u003e\n\u003cp\u003e◆ STEP 2\u003cbr\u003ePaste the entire sample code into that section.\u003c\/p\u003e\n\u003cp\u003e◆ STEP 3\u003cbr\u003eVerify the FAQ appears in the cart drawer and on the cart page.\u003c\/p\u003e\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\n\u003ch3\u003eRelated TIPS\u003c\/h3\u003e\n\u003cp\u003eFor more cart customization ideas:\u003cbr\u003e\n\u003ca href=\"\/en-us\/products\/2026-04-07\"\u003e[Horizon] Free shipping progress bar in the cart\u003c\/a\u003e\u003c\/p\u003e","brand":"STORE DOJO","offers":[{"title":"Default Title","offer_id":48828653895931,"sku":null,"price":0.0,"currency_code":"USD","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\/en-us\/products\/2026-05-03","provider":"STORE DOJO","version":"1.0","type":"link"}