Yes, this happens because the Shopify CDN is cross-origin, and the download attribute is often ignored by browsers. That’s why your button opens the file in the browser tab instead of forcing a direct download.
One quick solution is to wrap your <Button> in an <a> tag like this:
<a
href="https://cdn.shopify.com/s/files/1/0916/8722/3587/files/123-2.png?v=1737458814"
download="image.png"
target="_blank"
rel="noopener noreferrer"
>
<Button variant="primary">Download</Button>
</a>
If you want more control and guaranteed “download-only” behavior, you can fetch the file via JavaScript and trigger a blob download:
const handleDownload = async () => {
const response = await fetch(
"https://cdn.shopify.com/s/files/1/0916/8722/3587/files/123-2.png?v=1737458814"
);
const blob = await response.blob();
const url = window.URL.createObjectURL(blob);
const link = document.createElement("a");
link.href = url;
link.download = "image.png";
link.click();
window.URL.revokeObjectURL(url);
};
<Button variant="primary" onClick={handleDownload}>
Download
</Button>
Both approaches work fine depending on your needs. I also ran into a similar issue when building a custom file tool for my projects, and I documented a detailed guide here: TeraBox Downloader – might help if you’re dealing with large files or browser download restrictions.
