Table of contents in a collapsible text

Shopify Discussion

Topic summary

A Shopify store owner using the Prestige theme needed help formatting product size information in a collapsible text section. The sizes were displaying in a single line instead of as separate list items, making them difficult to read.

Problem: Multi-text metafield values appeared on one line rather than maintaining their original formatting with line breaks.

Solution provided:

  • Use the <pre> HTML tag to preserve formatting and line breaks
  • Add inline CSS (style="font-size: inherit;") to match the font size with other page elements
  • Code implementation: Wrap the metafield value in <pre> tags within the Liquid template

Outcome: The solution successfully displayed each size on its own line with consistent formatting. The issue is resolved.

Follow-up: A new user asked for guidance on creating a similar table of contents for product descriptions, indicating ongoing interest in this formatting approach.

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

Hi all,
Hoping someone can point me in the right direction.

I created a table of contents that shows product details in a collapsible text section.
See the page https://tokaceramics.com.au/products/shikika-japanese-mortar-black “details.”
As you can see (pic 1), I have 3 sizes showing in one line, and it’s not neat and hard to read.

Screen Shot 2025-02-12 at 4.32.17 pm.png
Screen Shot 2025-02-12 at 4.32.17 pm.png720×225 25.9 KB

Ideally, I’d like it to show like below, where each value has its own line:

  • Small: φ12.0cm ×5.0cm
  • Medium: φ16.0cm ×7.5cm
  • Large: φ19.5cm ×9.0cm

The value is pulled through from metafield, as each product has different sizing, and for this particular one, it’s created with multi text.

I recreated the metafield with rich text, but then the value shows unnecessary info (see pic 2).

Screen Shot 2025-02-12 at 4.34.11 pm.png
Screen Shot 2025-02-12 at 4.34.11 pm.png582×499 41.3 KB

I use the Prestige theme and also contacted them, and they told me to create a page metafield and create a table there, but that’s not really working either.

All I want is to be able to show the value exactly the same way when I add it to the product page (pic 3).

Screen Shot 2025-02-12 at 4.41.06 pm.png
Screen Shot 2025-02-12 at 4.41.06 pm.png734×148 10.3 KB

Hope it all makes sense, and if someone could help me out, that would be much appreciated.

2

Hi @kaorimtodd

Need to use pre tag

{%- if product.metafields.custom.size.value != blank -%}

{{ product.metafields.custom.size.value }}


                  

                {%- endif -%}

Kyle_liu_0-1739349633825.png
Kyle_liu_0-1739349633825.png586×304 5.8 KB

1 Like
3

Hi Kyle,

Thanks so much for your quick reply!
I tried that, and it works, but could you help me further?
As shown in the picture, the font size is larger than the others on the page.
Is there any way to fix this and make it the same size as the other fonts?

Screen Shot 2025-02-13 at 10.47.27 am.png
Screen Shot 2025-02-13 at 10.47.27 am.png536×309 11.8 KB

4 
{%- if product.metafields.custom.size.value != blank -%}

{{ product.metafields.custom.size.value }}


                  

                {%- endif -%}

Kyle_liu_0-1739409149286.png
Kyle_liu_0-1739409149286.png1281×197 6.57 KB

1 Like
5

It worked perfectly! You’re a lifesaver, thanks so much! :blush:

6

Hi how’s it going ?

im new to this and im actually trying to create a table of contents just like the one you have so i can list it as my product description/details , can you please help me out I want to keep it simple i don’t necessarily have to stack a few sentences on top of each other just 1 for each detail.