Split 3 product description content blocks into 3 collapsible rows (accordion):

1 0 0

I have 400+ products. Each product description is formatted as follows:

<h2>Product leader title</h2>

<p>content paragraph 1</p>
<p>content paragraph 2</p>

<h2>About the XXXX product </h2>

<p>content paragraph 1</p>
<p>content paragraph 2</p>

<h2>Size Guide</h2>

<table>table content</table>
<table>table content</table>


The "Product leader title" H2 and the "About the XXXX product" H2 are different for each product. The Size Guide H2 is always "<h2>Size Guide</h2>".

The goal is to convert the product description into 3 collapsible rows (accordion):

  1. Tab 1: <h2>Product leader title</h2>
  2. Tab 2: <h2>About the XXXX product</h2>
  3. Tab 3: <h2>Size Guide</h2>

I prefer NOT to install an app and go through 400 pages to re-do the description. Is there a code solution to grab the <h2>...</H2> content and use it as the content in a collapsible row?

I have tried the split filter but I could only get that to work for two of the three H2 content sections.

Any suggestions?

Reply 1 (1)

Shopify Partner
3079 604 857

Hello @okavango ,


It's possible but needs customization.
If you are good with code  first change h2 as Accordion title and then content which is after it as Accordion content.
After that you can write a script which will perform the action on click of titles to show/hide the items. 


- If helpful then please Like and Accept Solution.
- Want to modify or custom changes or bug fix on store Hire me.
- Email: guleriathakur43@gmail.com - Skype: navrocks1 ,
- Try GEMPAGES a great page builder
-Advance Search Filter