linking an image to a link using metafield on product pages

[TUB]

Hello!

I was wondering if someone can advise how to add an image on a product page then link that image to pdf. 

So in my case, I want to link an image with another file, a step-by-step how to guide. 

The image is separate from the file I will be attaching it to, so i can alt tag the image. 

I am using superstore version 5.1.0

Any help would be very much appreciated!

[EBOOST · Accepted solution]

Hi @TUB ,

If you use Dawn theme. May I suggest to update code these steps:

1. Go to Settings-> custom data -> Products

2. Add 2 metafields

-  Name: icon, Type: files(images)

- Name: pdf, Type: files( Accept all file types)

3. Go to each product to add data to these fields

4. Add code below to anywhere that you would like to show

{%  if product.metafields.custom.icon.value and product.metafields.custom.pdf.value %}
  <a href="{{ product.metafields.custom.pdf.value.url }}" target="_blank">
  <img src="{{ product.metafields.custom.icon.value| image_url: width: 50}}" alt="" />
  </a>
  
{% endif %}

[EBOOST · Accepted solution]

Hi @TUB ,

If you use Dawn theme. May I suggest to update code these steps:

1. Go to Settings-> custom data -> Products

2. Add 2 metafields

-  Name: icon, Type: files(images)

- Name: pdf, Type: files( Accept all file types)

3. Go to each product to add data to these fields

4. Add code below to anywhere that you would like to show

{%  if product.metafields.custom.icon.value and product.metafields.custom.pdf.value %}
  <a href="{{ product.metafields.custom.pdf.value.url }}" target="_blank">
  <img src="{{ product.metafields.custom.icon.value| image_url: width: 50}}" alt="" />
  </a>
  
{% endif %}

[TUB · Accepted solution]

Amazing! I am using superstore theme, but I will give it a shot. 

So after I have created the metafield, do I paste the code in custom liquid on the template product page? 

Thank you!

[EBOOST]

Yes, you can do it