Unique Collapsible Content for Every Product Page

Store Design
, , , , , ,

Topic summary

A store owner using the Dawn theme wants to implement customizable collapsible content sections on product pages, similar to BJJ Fanatics’ layout.

Key Requirements:

  • Variable number of parent rows per product (e.g., “Body Waves,” “Basic Steps”)
  • Customizable parent row titles
  • Adjustable number of child rows (1 to 7+)
  • Unique child row titles for each product

Proposed Solutions:

Two metafield-based approaches were suggested:

  1. Single/Multi-line Text Fields: Parent titles would be dynamic and easy to manage, but child content would require HTML table formatting, making it less flexible.

  2. JSON Metafields: Fully dynamic solution without HTML requirements. A sample JSON structure was provided showing how to organize parent titles, child titles, and row content with timestamps.

Current Challenge:

The store owner is struggling with how to make the number of rows variable per product using metafields, as they’re unsure how to avoid displaying a fixed number of rows across all pages. They’re unfamiliar with JSON implementation and seeking guidance on the second approach.

Summarized with AI on October 28. AI used: claude-sonnet-4-5-20250929.
1

Website

Sample Preview Page

Would like to add UNIQUE collapsible rows to my product pages. We use Dawn theme. Similar to the below - which is taken from www.bjjfanatics.com

Danceddiction_0-1746287495605.png
Danceddiction_0-1746287495605.png1126×748 33.9 KB

But they would need to be customized in the following way

  1. The number of “Volume” parent rows should be adjustable for every product page.
  2. The title for “Volume” parent rows should be adjustable for every row. We could have parent rows with the following names for example"
    1. Body Waves
    2. Basic Steps
    3. Body Movement
      etc.
  3. The number of child rows should be adjustable for every product. We could have only one child row, or could have 7+.
  4. The tile of every child row should be adjustable.

Let me know if this is something feasible and doable - or might take a lot more development than I realize. We could potentially explore other options to display the same information but this is the preferred method.

2

Hello @Danceddiction ,

Development requirement to achieve it.

And there are 2 ways to do it both include metafields:

  1. Use regular field type single line text and multi-line text.
    Using these fields parent row title will be dynamic and easy to manage but child row title content and title will be through table with html tags.
  2. Using field type JSON. Everything will be dynamic without use of html but you need to follow the format.

Regards
Naveen

3

#1 seems challenging because I need a way to customize the number of rows in the collapsible content. I’ve attempted using metafields but wouldn’t that mean each page will have to display a certain number of rows no matter what? I haven’t figured out how to adjust that part.

#2. I have not worked in JSON - is there something you can point me to too help work through how to implement this way?

4

Here is an example of JSON

[
  {
    “parent_title”: “Volume 1”,
    “Child_title": “Chapter Title”,
    “row_1”: “Intro”,
    “row_1_content”: “0.00 - 3.14”,	
    “row_2”: “Stance And Motion”,
    “row_2_content”: “3.14 - 7.14”
  },
   {
    “parent_title”: “Volume 2”,
    “Child_title": “Chapter Title”,
    “row_1”: “Intro”,
    “row_1_content”: “0.00 - 1.14”,	
    “row_2”: “Stance And Motion”,
    “row_2_content”: “1.14 - 4.14”
  }
]