How do you make text in the collapsible row have HTML formatting - RIDE THEME

[sipandswirl]

Hi, 

I would like to ask about how to format the text in the collapsible row to have HTML formatting.

Currently I have not been using the collapsible row in the Ride theme for the Product pages, and have been creating my own custom tabs. With my custom tabs, I can upload HTML content using metafields which saves me time. As you can see in the below screenshot, the custom tabs allows me to upload a HTML table content and it formats nicely.

However, the content takes up quite a bit of screen space, so I know it's best to use the collapsible rows feature that Shopify gives you in the Ride theme for the Product page.

I haven't been able to get HTML content to work here, as you can see in the above screenshot.

What I have tried so far:

I have tried this tutorial https://community.shopify.com/c/shopify-design/edit-theme-code-to-enter-metafield-with-html-in-colla... - but it doesn't work for the Ride theme. I was editting the code in the collapsible.content liquid file, which looks like the below. 

Following the tutorial, I added the IF/ELSE statements, and ensured it followed this format

{% if block.settings.heading == 'Details' %}

                    {{ product.metafields.my_fields.details }}

                  {% else %}

                    {{ block.settings.content }}

                    {{ block.settings.page.content }}

                  {% endif %}

I tried with the above code, and changed it to the relevant metafield for my store, see below

{% if block.settings.heading == 'Dimensions' %}

                    {{ product.metafields.custom-tabs.Dimensions}}

                  {% else %}

                    {{ block.settings.content }}

                    {{ block.settings.page.content }}

                  {% endif %}

It didn't work unfortunately.

Is there another file that would need to be updated as well as this one for the Ride theme?

[thirtycoders]

Hello @sipandswirl,

Do you want to like this type of tab section?

[sipandswirl]

Hi Thirtycoders, I'm not sure I understand your question here.

I am looking to make the Shopify dropdown work so that it saves some screen space for the user. 

Are you asking if I want to update the tabs and the way it works so that they look more like tabs and can also hopefully save more screen space for the user?

Thanks,