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

sipandswirl
Visitor
3 0 1

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.

 

Screenshot 2024-05-11 at 2.20.21 pm.png

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. 

 

Screenshot 2024-05-11 at 2.22.11 pm.png

 

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?

Replies 2 (2)

thirtycoders
Shopify Partner
113 19 24

Hello @sipandswirl,

Do you want to like this type of tab section?

Thirtycoders || Shopify Partner
Found my response useful? Show your appreciation with a Like!
Did your query get resolved? Mark it as an Accepted Solution.
For additional discussions, reach out via: Email ID: thirtycoders@gmail.com
sipandswirl
Visitor
3 0 1

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,