Linking an image to a link using metafield on product pages

Store Design
,
1

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!

2

Hi @TUB ,

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

  1. Go to Settings-> custom data → Products

EBOOST_0-1715345717326.png
EBOOST_0-1715345717326.png1061×610 18.2 KB

  1. Add 2 metafields

  • Name: icon, Type: files(images)

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

EBOOST_1-1715223341616.png

EBOOST_1-1715345909154.png
EBOOST_1-1715345909154.png719×638 11.3 KB

EBOOST_2-1715345919579.png
EBOOST_2-1715345919579.png1092×745 26.1 KB

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

EBOOST_3-1715345991088.png
EBOOST_3-1715345991088.png845×191 2.81 KB

  1. Add code below to anywhere that you would like to show
{%  if product.metafields.custom.icon.value and product.metafields.custom.pdf.value %}
  
  
  
  
{% endif %}
3

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!

4

Yes, you can do it