Table of contents in a collapsible text

[kaorimtodd]

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.

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).

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).

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

[Kyle_liu]

Hi  @kaorimtodd 

Need to use pre tag

{%- if product.metafields.custom.size.value != blank -%}
                  <div class="rating-wrapper">
                    <pre>{{ product.metafields.custom.size.value }}</pre>
                  </div>
                {%- endif -%}

[kaorimtodd]

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?

[Kyle_liu · Accepted solution]

{%- if product.metafields.custom.size.value != blank -%}
                  <div class="rating-wrapper">
                    <pre style="font: var(--text-font-style) var(--text-font-weight) var(--text-base) / 1.65 var(--text-font-family);">{{ product.metafields.custom.size.value }}</pre>
                  </div>
                {%- endif -%}

[kaorimtodd]

It worked perfectly! You're a lifesaver, thanks so much! 😊

[Jrdiamondsco]

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.