How can I display custom icons in product metafields?

[torasaki]

I'd like to have some custom icons appear on the product page, like 1-year / 2-year warranty icon, 100% organic, etc. Is there a way to do this through the use of metafields.

Possible options I can think of:

1. I know you can check if the metafield exists, display this content. Is there a way to check if metafield text matches "1 year warranty", display this img tag. Metafield text matches "2 year warranty" display this img tag, etc...
2. Or can images be input in the metafield either through SVG or custom font
3. Open to suggestions

I'd rather not have to use an app for this if possible. I'm new to Shopify development, so any help or insight on this would be greatly appreciated.

[diego_ezfy]

You can use the settings for this. Keep in mind that this is an advanced topic, you'll need understanding of JSON and Liquid.

1. Go to settings.schema in your theme files

2. Add this code right at the bottom, don't forget a comma. 

    {
    "name": "Custom settings",
    "settings": [
      {
        "type": "image_picker",
        "id": "custom-image",
        "label": "Image"
      }
    ]
  }

3. Now upload any image at the theme settings > custom settings that we just created:

4. You can access this image now anywhere in your theme simply using {{settings.custom-image}}. Try adding this to your product-template.liquid for the sake of testing:

{% if settings.custom-image != blank %}
<img  src="{{ settings.custom-image | img_url: 'master' }}"
     alt="{{ settings.custom-image.alt | escape }}" />
{% endif %}

Let me know whether it works.

[torasaki]

@diego_ezfy I tried your solution, but I don't see the image I uploaded. I'm not sure how it would get that image, maybe I'm missing something. Should I have named the image something specific?

[diego_ezfy]

you have to upload the image again by clicking on the custom settings button 

[torasaki]

facepalm... I can see the image. Now to get it on the right product.

[torasaki · Accepted solution]

Solution here: https://community.shopify.com/c/Shopify-Design/Adding-custom-image-assets-per-product-metafields-or-...

[caro_chlt]

Hi,
The content was archived. Does anyone have a solution?

Thank you

[Hello2222]

looking for the same but its been archived