Solved

linking an image to a link using metafield on product pages

TUB
Tourist
4 1 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!

Accepted Solutions (2)

EBOOST
Shopify Partner
833 229 256

This is an accepted solution.

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

 

2. Add 2 metafields

-  Name: icon, Type: files(images)

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

EBOOST_1-1715223341616.png

EBOOST_1-1715345909154.pngEBOOST_2-1715345919579.png

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

EBOOST_3-1715345991088.png

 

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 %}

 

 

Hope can help

If you find my reply helpful, please hit Like and Mark as Solution

https://www.eboosttech.net

EBOOST
DONATE ❤❤

View solution in original post

TUB
Tourist
4 1 1

This is an 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!

View solution in original post

Replies 3 (3)

EBOOST
Shopify Partner
833 229 256

This is an accepted solution.

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

 

2. Add 2 metafields

-  Name: icon, Type: files(images)

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

EBOOST_1-1715223341616.png

EBOOST_1-1715345909154.pngEBOOST_2-1715345919579.png

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

EBOOST_3-1715345991088.png

 

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 %}

 

 

Hope can help

If you find my reply helpful, please hit Like and Mark as Solution

https://www.eboosttech.net

EBOOST
DONATE ❤❤
TUB
Tourist
4 1 1

This is an 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
Shopify Partner
833 229 256

Yes, you can do it

Hope can help

If you find my reply helpful, please hit Like and Mark as Solution

https://www.eboosttech.net

EBOOST
DONATE ❤❤