'NO IMAGE' showing on collapsible row set to liquid, size chart metafields - Dawn

Solved

'NO IMAGE' showing on collapsible row set to liquid, size chart metafields - Dawn

Julia777
Excursionist
16 0 11

I've followed all the steps on this this thread, however now my collapsible row is showing ''no image' 

 

Intention: display jpg. image as a size chart in Collapsible Row using metafields


1. Created a Metafield with the file as a content type

 

Screenshot 2022-09-19 at 02.03.04.png

2. On the product page added a jpg file with the size chart:

 

Screenshot 2022-09-19 at 01.59.12.png

 

3. Edited the main-product.liquid and replaced "richtext" with "liquid":

 

Screenshot 2022-09-19 at 02.02.05.png

 

4. in the theme editor added a Collapsible Row with content as:  

 

<img src="{{ product.metafields.my_fields.size_chart | img_url: 'master' }}" alt="Top Notes" width="530">

 

PROBLEM: it now shows  ''no image'' instead of showing the image, unlike in the solved thread. What am I missing? I've tried using .png and .jpg images. 

Screenshot 2022-09-19 at 02.00.18.png

 

@LitCommerce help

 

Accepted Solution (1)

LitCommerce
Astronaut
2860 684 757

This is an accepted solution.

Hi @Julia777,

At step 4, change the code as follows:

<img src="{{ product.metafields.my_fields.size_chart | img_url: 'master' }}" alt="Top Notes" width="530">

=>

<img src="{{ product.metafields.custom.size_chart | img_url: 'master' }}" alt="Top Notes" width="530">

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

Julia777
Excursionist
16 0 11

I've also just tried making the image smaller max 530, still no image showing. No idea 

LitCommerce
Astronaut
2860 684 757

This is an accepted solution.

Hi @Julia777,

At step 4, change the code as follows:

<img src="{{ product.metafields.my_fields.size_chart | img_url: 'master' }}" alt="Top Notes" width="530">

=>

<img src="{{ product.metafields.custom.size_chart | img_url: 'master' }}" alt="Top Notes" width="530">

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!
Julia777
Excursionist
16 0 11

Thank you! Perfect

Bird_on_a_Wire
Explorer
72 0 13

Hello,  I am having a similar issue

 

I have added my image meta field to a liquid block in my collapsable row with the following

 

<img class="custom-option" src="{{product.metafields.custom.leather }}">

 

BUT my images are not displaying... only a placeholder icon is showing 

 

Screenshot 2022-09-22 at 15.38.59.png

 

Site: https://ebony-design.myshopify.com/

Password: dawlaw

 

Any help would be much appreciated!

 

 

LitCommerce
Astronaut
2860 684 757

Hi @Bird_on_a_Wire,

You can create a question on the community and send me the link. I will check it.
Because this will help build a better community.
Thank you.

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!
lsvvintage
Excursionist
42 2 4

Hi!

 

thank for your detailed explanation! I managed to get it done as well, finally! Would you be able to guide me with the same thing (metafield image in collapsible row), but on a page instead of a product page?

 

would be super helpful! Let me know!