How to add a download button to a specific product image?

Store Design
,
1

Hello everyone,

I am currently working on an application for a client, and I require a download button to be added to a specific image. This image can either be a part of a carousel or the first image displayed. End-users should be able to click on the download button to download the selected image.

The image selection functionality has already been implemented in the application, but I am facing an issue with adding the download button. I am storing the image URL from the application when the store owner selects a specific image from a product.

My aim is to have the download button displayed on every page where the selected product image is shown, such as on the product detail page, collection listing, recommendation page, etc.

However, upon checking the URL in the store, I found that it appears to be completely different. I would be grateful for any help from the community in resolving this issue, regardless of the theme being used.

Thank you.

1 Like
2

Hello @Maulik_B ,

Here’s how you can resolve the problem:

  1. Go to Online Store → Theme → Actions → Edit code

Ref- step 1.png
Ref- step 1.png1434Ă—819 104 KB

  1. Open theme.liquid → Find the code that displays the product image like this:
{% if product.images.size > 0 %}
  
    

      
    

  

{% endif %}
  1. Add the following code after the product image code:
{% if product.files.size > 0 %}
  
{% endif %}
  1. Save and preview

Hope this will help you.

Ali Reviews team.

3

@irene-vintage Thanks for the reply, you are right but this will work for just one theme, I am creating an app and I want it dynamic, I created a script for this and I can able to find out all product images also but to set the download button on the specifically selected images it difficult for me, I mean to identify the image which is selected in the app is confusing. The solution should be common across any theme.

4

Hi @Maulik_B , need a “Download All Images” button on your Shopify product pages? This YouTube tutorial provides a clear solution.