Re: Dawn Theme - Collapsible Row With Image (Size Chart)

Solved

Dawn Theme - Collapsible Row With Image (Size Chart)

Maro33
Pathfinder
114 0 43

Hello, I have made some steps to display jpg. image as a size chart in Collapsible Row using metafields (each jpg for each product).

 

This is what I did:
1. Created a Metafield with the file as a content type:

Maro33_0-1646849198724.jpeg

 

 

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

Maro33_1-1646849198963.jpeg

 

 

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

Maro33_2-1646849199097.jpeg

 

 

4. in the theme editor added a Collapsible Row with content as:  product.metafields.my_fields.size_guide | img_url }}" alt="Top Notes" width="530">

Maro33_3-1646849199418.jpeg

 

 

IT SEEMS TO WORK BUT AS YOU CAN SEE THE IMAGE IS VERY BLURRY (SHRUNK TO LOW RESOLUTION).

 

DO YOU KNOW WHAT TO CHANGE TO DISPLAY THE IMAGE WITH THE ORIGINAL RESOLUTION?

Accepted Solution (1)

LitCommerce
Astronaut
2860 684 745

This is an accepted solution.

Hi @Maro33,

Please change the code in step 4 as follows:

<img src="{{ product.metafields.my_fields.size_guide | 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 8 (8)

LitCommerce
Astronaut
2860 684 745

This is an accepted solution.

Hi @Maro33,

Please change the code in step 4 as follows:

<img src="{{ product.metafields.my_fields.size_guide | 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!
Maro33
Pathfinder
114 0 43

Yes! It's working now. Thank you!

Urs
Tourist
4 0 2

Hi,  I am trying to implement this collapsable Size Chart in Dawn.  I did steps 1 to 4 and replace 4 with the new suggested code but I am getting that product.metafields.my_fields.size_guide | img_url: 'master' is invalid.  It says change or remove the dynamic source... Any idea? I am new to this ... Thanks

Melinda5
Explorer
52 3 11

Having this issue too, can you help us! @LitCommerce 

 

I pasted the code: <img src="{{ product.metafields.my_fields.size_guide | img_url: 'master' }}" alt="Top Notes" width="530">

 

IMG_0162.png

 

Thanks in advance! 😊

tattvalogy
Visitor
1 0 0

Will img_url change for different themes? Im working with sense theme in shopify

Julia777
Excursionist
15 0 9

Just followed all steps, but now it says ''no image'' when I open the collapsible row... The image is already added in the metafield of the product. Am I missing something?

LitCommerce
Astronaut
2860 684 745

Hi @Julia777,

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!
Julia777
Excursionist
15 0 9