Shopify themes, liquid, logos, and UX
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!
Solved! Go to the solution
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
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 %}
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!
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
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 %}
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!
Yes, you can do it
2m ago Learn the essential skills to navigate the Shopify admin with confidence. T...
By Shopify Feb 12, 2025Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025