Solved

How can I display custom icons in product metafields?

torasaki
Excursionist
14 1 0

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.

Screen Shot 2020-08-12 at 3.48.08 PM.png

 

Accepted Solution (1)
Replies 7 (7)

diego_ezfy
Shopify Partner
2967 571 898

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

dantepw_0-1597276599437.png


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

dantepw_1-1597276775777.png

 

 

    {
    "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:

dantepw_3-1597276869885.png


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
Excursionist
14 1 0

@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
Shopify Partner
2967 571 898

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

torasaki
Excursionist
14 1 0

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

torasaki
Excursionist
14 1 0

This is an accepted solution.

caro_chlt
Visitor
1 0 4

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

Thank you

Hello2222
Shopify Partner
8 0 0

looking for the same but its been archived

hk