Using Shopify 2.0 Metafields - uploaded icons are blurry

Shopify Partner
9 1 2

Hi there - I've been using the Custom Fields app by Bonify with good results. But now that Shopify 2.0 offers metafields, I've been switching to them and updating my code. I've run into a problem, though. When I format a metafield to accept an image upload (icons in this case), the images are blurry. Using the Custom Fields app for this exact same purpose, the images are crisp and clear. I'm using the same files for both. I tried making my .png 1x and 2x with no difference in the quality of the image. Any idea how I can get a good, clear image upload using Shopify 2.0's built in metafields? I've attached images though the difference is more noticeable online where the Custom Fields images are super crisp.




Replies 3 (3)
Shopify Partner
9 1 2

I figured it out. 

If I double the dimensions in this bit...

<img class="fc-field field__icon-image field-type--image" src="{{ product.metafields.my_fields.plant_icon_1_of_3 | img_url: '140x140' }}" alt="" >

... and then half the dimensions in my CSS code (width: 70px), the image appears clearly. 

Shopify Partner
231 23 82

Hey @jessica-b,

I also tried and I used 64 x 64px image size. It automatically adapts the size and I am satisfied with the results. 



Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution!
New Member
1 0 0

Much obliged to you for posting that it very well may be only what to offer motivation to somebody who needs it! Keep up the extraordinary work.