Edit theme code to enter metafield with HTML in Collapsible Row (product page)

Solved

Edit theme code to enter metafield with HTML in Collapsible Row (product page)

tclapmarketing
Shopify Partner
14 0 7

I am getting an error when I add text with HTML markup to a metafield and then try to pull the metafield into a collapsible row. I believe this error can be solved by making this change in the actual theme code vs. using the theme editor.

 

Can somebody help with what the code should be to allow for this? I am using the theme "Dawn".

 

Alternatively, is there any way to make product description be a collapsible row? This would also solve my problem without involving metafields at all.

 

Thanks!

Thomas C.
Operations
blankcanvasbookstore.com
thomas@blankcanvasbookstore.com
Accepted Solution (1)

LitCommerce
Astronaut
2860 684 757

This is an accepted solution.

Hi @tclapmarketing,

Go to sections > main-product.liquid file, find 'product__accordion' and change code here:

beforebeforeafterafter

Code:

{% if block.settings.heading == 'Details' %}
                    {{ product.metafields.my_fields.details }}
                  {% else %}
                    {{ block.settings.content }}
                    {{ block.settings.page.content }}
                  {% endif %}

Hope it helps!

LitCommerce - The Most Simple & Affordable Multi-channel Selling Tool.
Effortlessly sell on biggest marketplaces like Amazon, Etsy, eBay, Facebook etc with bulk listing tool, real-time sync & smart order management. Use LitCommerce free for 1-year now!

View solution in original post

Replies 14 (14)

Dbuglabpvtltd
Shopify Partner
705 75 117

Hi @tclapmarketing 
can you please share your store URL?

and screenshot of issue where you  getting this issue.

banned
tclapmarketing
Shopify Partner
14 0 7

Hello here is the link to the page (preview with not-live theme) : https://umqsjkcg5uk2pulw-57078972601.shopifypreview.com

 

You can see in the attached screenshot that the metafield is loading but with the HTML markup visible.

 

Screen Shot 2022-02-25 at 12.56.57 PM.png

Thomas C.
Operations
blankcanvasbookstore.com
thomas@blankcanvasbookstore.com
Dbuglabpvtltd
Shopify Partner
705 75 117

Hi @tclapmarketing 

In meta fields you can select a simple text area for this then HTML wtag will not display on frint end.

banned
tclapmarketing
Shopify Partner
14 0 7

I have tried to make it work with both text options; Single line text & Multi-line text. Both options make the HTML markup visible.

Thomas C.
Operations
blankcanvasbookstore.com
thomas@blankcanvasbookstore.com
Dbuglabpvtltd
Shopify Partner
705 75 117

Hi @tclapmarketing 

Can you please share your store Admin access so I can check this issue?

banned
tclapmarketing
Shopify Partner
14 0 7

Yes, send a collaborator request and I'll give permission. ctbooks.myshopify.com

Thomas C.
Operations
blankcanvasbookstore.com
thomas@blankcanvasbookstore.com
Dbuglabpvtltd
Shopify Partner
705 75 117

@tclapmarketing 

Sent

banned
Dbuglabpvtltd
Shopify Partner
705 75 117

Hi @tclapmarketing 
if you add metafield  in code instead of customizer then it will work fine

Dbuglabpvtltd_0-1645816720406.png

 

Dbuglabpvtltd_1-1645816734405.png

 

banned
tclapmarketing
Shopify Partner
14 0 7

This seemed to work, but it added the metafield content under all of the collapsible rows, not just "Details". Is there a way for the content to only show up in the Details section? Thank you.

Thomas C.
Operations
blankcanvasbookstore.com
thomas@blankcanvasbookstore.com
Dbuglabpvtltd
Shopify Partner
705 75 117

@tclapmarketing 
yes then need to changes in liquid code.
It will take around 4-5 Hours.

banned

LitCommerce
Astronaut
2860 684 757

This is an accepted solution.

Hi @tclapmarketing,

Go to sections > main-product.liquid file, find 'product__accordion' and change code here:

beforebeforeafterafter

Code:

{% if block.settings.heading == 'Details' %}
                    {{ product.metafields.my_fields.details }}
                  {% else %}
                    {{ block.settings.content }}
                    {{ block.settings.page.content }}
                  {% endif %}

Hope it helps!

LitCommerce - The Most Simple & Affordable Multi-channel Selling Tool.
Effortlessly sell on biggest marketplaces like Amazon, Etsy, eBay, Facebook etc with bulk listing tool, real-time sync & smart order management. Use LitCommerce free for 1-year now!
tclapmarketing
Shopify Partner
14 0 7

Thank you so much for the help!

Thomas C.
Operations
blankcanvasbookstore.com
thomas@blankcanvasbookstore.com
mjmu
Tourist
21 0 1

Hi, I tried this solution, but unfortunatly it still displays the th code as text:

mjmu_0-1689508487908.png

mjmu_1-1689508674064.png

 

I'm using the refresh 10.0.0 theme.

 

Any idea?

 

MRamzan
Shopify Partner
463 3 44

I solved it by following this tutorial:

 

Hire Me:

WhatsApp: +91-9145985880
Email: mohdramzaan112@gmail.com
Skype: mohdramzaan112