Re: linking an image to a link using metafield on product pages

Solved

linking an image to a link using metafield on product pages

TUB
Tourist
6 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
1228 319 368

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
- Need a Shopify developer? Contact email: eboost10@gmail.com
- Visit our site: https://www.eboosttech.net to view and download shopify themes and magento2 extensions free
- ❤❤DONATE ❤❤Coffee tips

View solution in original post

TUB
Tourist
6 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
1228 319 368

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
- Need a Shopify developer? Contact email: eboost10@gmail.com
- Visit our site: https://www.eboosttech.net to view and download shopify themes and magento2 extensions free
- ❤❤DONATE ❤❤Coffee tips
TUB
Tourist
6 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
1228 319 368

Yes, you can do it

- Hope can help. If you find my reply helpful, please hit Like and Mark as Solution
- Need a Shopify developer? Contact email: eboost10@gmail.com
- Visit our site: https://www.eboosttech.net to view and download shopify themes and magento2 extensions free
- ❤❤DONATE ❤❤Coffee tips