How to add nutritional labels and ingredients list to product information?

[biznazz101]

Hello everyone, I am attempting to add a nutritional label (image) and ingredients list (text) to about 20+ products in a store. They will be different for every product, and preferably would be shown in the "product information" section of the product page. This is the current website we are working on:

I assume the best way to accomplish this is using Metafields to avoid a large amount of product templates. Ideally the image/text would all be held in a third dropdown similar to the ones in the screenshot above.


This is about as close as I have gotten so far. I have created a Single Line Text metafield for the ingredients list, then above I have a custom liquid section containing the Image File metafield using the following code (but it isn't rendering the image as expected):

<div>{{product.metafields.custom.nutritional_image }}</div>

Here is the result using a test store:

I am sure there is a better way to make this happen, basically I would like the nutrition label image (file metafield) in a section above the dropdown of ingredients (single line text), or combined into a single dropdown which renders both metafields for the product.

Any help would be greatly appreciated! Thank you!

[biznazz101]

UPDATE: I have found a way to do it, but the image is blurry no matter how I resize it, any tips would be appreciated.

<div>
{{ product.metafields.custom.nutritional_image | img_tag }}</div>

Thanks!