product-accordian.liquid. <\/strong><\/p>\n\n\n\nThen paste the following code in the newly created section and save it.<\/p>\n\n\n\n
{%- style -%}\n .product-accordion {\n padding: 40px 20px;\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';\n }\n .product-accordion .accordion-item {\n border-bottom: 1px solid #ddd;\n }\n .product-accordion .accordion-title {\n cursor: pointer;\n font-weight: bold;\n padding: 15px;\n background-color: #f7f7f7;\n color: #000;\n }\n .product-accordion .accordion-content {\n padding: 0 15px 15px;\n display: none;\n color: #f7f7f7;\n }\n .product-accordion .accordion-item.active .accordion-content {\n display: block;\n }\n .product-accordion .accordion-content p {\n margin: 0;\n }\n{%- endstyle -%}\n\n<div class=\"product-accordion\">\n {%- for block in section.blocks -%}\n <div class=\"accordion-item\" data-accordion>\n <div class=\"accordion-title\">\n {{ block.settings.title }}\n <\/div>\n <div class=\"accordion-content\">\n {{ block.settings.content }}\n <\/div>\n <\/div>\n {%- endfor -%}\n<\/div>\n\n{% schema %}\n{\n \"name\": \"Product Accordion\",\n \"tag\": \"section\",\n \"class\": \"product-accordion\",\n \"settings\": [],\n \"blocks\": [\n {\n \"type\": \"accordion_item\",\n \"name\": \"Accordion Item\",\n \"settings\": [\n {\n \"type\": \"text\",\n \"id\": \"title\",\n \"label\": \"Accordion Title\",\n \"default\": \"Accordion Title\"\n },\n {\n \"type\": \"richtext\",\n \"id\": \"content\",\n \"label\": \"Accordion Content\",\n \"default\": \"<p>This is the accordion content.<\/p>\"\n }\n ]\n }\n ],\n \"presets\": [\n {\n \"name\": \"Product Accordion\",\n \"category\": \"Product\",\n \"blocks\": [\n {\n \"type\": \"accordion_item\"\n },\n {\n \"type\": \"accordion_item\"\n }\n ]\n }\n ]\n}\n{% endschema %}\n\n<script>\n document.addEventListener('DOMContentLoaded', function () {\n document.querySelectorAll('[data-accordion] .accordion-title').forEach(function (title) {\n title.addEventListener('click', function () {\n const item = this.parentElement;\n item.classList.toggle('active');\n });\n });\n });\n<\/script>\n<\/pre>\n\n\n\nStep 3: Edit & Preview the Section<\/h3>\n\n\n\n To showcase this section in the frontend, head to Online store > Themes > Customize.<\/strong><\/p>\n\n\n\nFrom the top drop-down, select Product > Default products.<\/strong><\/p>\n\n\n\n
Then click Add section <\/strong>and select Product accordion.<\/strong><\/p>\n\n\n\n
From here, edit the section and save the changes.<\/p>\n\n\n
\n
This is how it will be previewed. Simple and very basic.<\/p>\n\n\n
\n
Best Way to Add an Accordion to Shopify<\/h2>\n\n\n\n The best way is to grab a dedicated Shopify app like MIT Sections Pro. It’s super customizable, won’t cost much, and comes packed with tons of ready-to-use sections that look great and are easy for everyone to use.<\/p>\n\n\n\n
Other ways can be a real time-sink and might not even give you what you’re looking for.<\/p>\n\n\n\n
With MIT Sections Pro, you get full access to all sections, plus a free trial so you can try them out before you buy. Choosing our app will totally upgrade your store, which is a win-win for your business.<\/p>\n\n\n
\r\n
\r\n
130+ Shopify Sections<\/span>\r\nYour all-in-one solution to create a professional Shopify store<\/p>\r\nInstall App Now<\/a>\r\n<\/div>\r\n\r\n
\r\n<\/div>\r\n<\/div>\n","protected":false},"excerpt":{"rendered":"
As a Shopify store owner, you can improve your product pages using an accordion. Here, we will learn to add an accordion to the Shopify…<\/p>\n","protected":false},"author":5,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[787],"tags":[],"class_list":["post-22739","post","type-post","status-publish","format-standard","hentry","category-shopify"],"acf":[],"_links":{"self":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/22739","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/comments?post=22739"}],"version-history":[{"count":4,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/22739\/revisions"}],"predecessor-version":[{"id":23680,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/22739\/revisions\/23680"}],"wp:attachment":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/media?parent=22739"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/categories?post=22739"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/tags?post=22739"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
![\"Accordion](\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/09\/accordion.gif\")
<\/figure>\n<\/div>\n\n\n![\"Preview](\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/09\/app-preview-6-700x323.png\")
<\/figure>\n<\/div>\n\n\n![\"On](\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/09\/browse-section-12.png\")
<\/figure>\n<\/div>\n\n\n![\"Click](\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/09\/try-for-free-11-700x322.png\")
<\/figure>\n<\/div>\n\n\n![\"From](\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/09\/app-add-section-5.png\")
<\/figure>\n<\/div>\n\n\n![\"From](\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/09\/app-edit-section-4-700x364.png\")
<\/figure>\n<\/div>\n\n\n![\"Preview](\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/09\/app-preview-7-700x323.png\")
<\/figure>\n<\/div>\n\n\n![\"In](\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/09\/click-default-product.png\")
<\/figure>\n<\/div>\n\n\n![\"click](\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/09\/code-add-section-7.png\")
<\/figure>\n<\/div>\n\n\n![\"Now](\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/09\/code-edit-section-4-700x256.png\")
<\/figure>\n<\/div>\n\n\n![\"Preview](\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/09\/code-preview-5-700x178.png\")
<\/figure>\n<\/div>\n\n\n![\"MIT](\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/11\/mit-sections-pro.png\")
\r\n<\/div>\r\n<\/div>\n","protected":false},"excerpt":{"rendered":"