Display images in Metafield for products

Solved
torasaki
Excursionist
13 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

 

0 Likes

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.

◦ Problem Solved? ✔️ Please click on Accept as Solution and like.
◦ Using a free theme? Improve it with copy/paste code snippets clicking here.
◦ Looking to hire an experienced developer? Same day response: ezfycode@gmail.com.
0 Likes
torasaki
Excursionist
13 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?

0 Likes

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

◦ Problem Solved? ✔️ Please click on Accept as Solution and like.
◦ Using a free theme? Improve it with copy/paste code snippets clicking here.
◦ Looking to hire an experienced developer? Same day response: ezfycode@gmail.com.
0 Likes
torasaki
Excursionist
13 1 0

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

0 Likes
torasaki
Excursionist
13 1 0