Can I create a downloadable pdf from my store?

[Tom_D1]

Hey Everyone, 

Does anyone know how I would go about getting placing a link on my store so that once clicked, a pdf would automatically download? 

I'm hoping to do this for my 'Returns Policy' so that in the event a customer wants to return a product, they can download the form from my website. 

Thanks in advance

Tom. 

[Daniel9]

Hi Tom,

You should be able to do this by uploading the PDF to the files section of your Shopify admin:

• Go to https://YOURSHOPIFYSTORE.myshopify.com/admin/settings/files
• Click the Upload Files button in the top right and select the PDF to upload
• Once it uploads copy the text in the URL field, it should start with https://cdn.shopify.com/s/files...

Once you have that URL you can place it into your pages. Depending on how you're theme's setup you could use the following HTML:

<a href="https://cdn.shopify.com/s/files...">View Returns Policy</a>

Where "https://cdn.shopify.com/s/files..." is the URL you copied from before. 

Hope this helps!

[stemon]

But it will only open the pdf on another tab. How to make it so that once clicked the pdf downloads automatically?

[Alan_Houser]

That "mime-type" varies per browser/device (and every user in the world can change this setting themselves). @stemon  You would be best to open in a new window, and just let the browser do its thing.

[cexxer]

Hey Daniel, your solution was very helpful for me but im trying to center align the link. do you think it'll be possible?

[made4Uo]

Hi, 

No opening to a different window. Download it directly from your store. No app needed, nor external library. Check the video for more information

[EasifyApps-Zoe]

Hi @Tom_D1,

On Shopify, the PDF file will pop up in a new tab automatically. Your customers can preview the file and choose to download it with just a click. If you want the file to be downloaded right away, you can use a docs file instead.

By the way, I have a great suggestion for you 😊! There's a super useful, free Shopify app - Ease Product Attachments that lets you upload your files in different formats and showcase them on your product pages. That way, your customers can easily access and download them.

You can check out the app demo first to see if it suits your needs before installing it.

I really hope my suggestion helps you out!

[SaDC]

Go one step further and create an immersive digital flip catalog version to deliver an incredible, stand-out experience that elevates your content. Simply upload your PDF and you can make it clickable, shoppable, downloadable, and more!

[Wayne35]

If you are selling on Shopify + other places and intend to use the same PDF form for your return; you may want to consider using a third party PDF hosting instead of Shopify, for example Google Drive, Dropbox or Titlegram. 

They all come with free option, and Titlegram also lets you host it on a shorter and more professional URL with your branding.

[vortifytech1]

How to Force PDF Downloads Using JavaScript in Shopify: A Complete Guide

If you're looking to implement a solution in your Shopify store where PDF files download automatically instead of opening in the browser, this guide is for you. By default, PDF files uploaded to Shopify often open in the browser when linked. To fix this and ensure a smooth user experience, you can use JavaScript to force the files to download.

<div class="download_pdf">
<div class="download_pdf_inner section-header--button">

<a class="download_btn button download-pdf" data-pdf-url="{{ block.settings.download-pdf-url }}" download="{{ block.settings.download-pdf-label | handle }}.PDF">
{% render "download-icon" %}{{ block.settings.download-pdf-label }}
</a>
<a class="download_btn button download-pdf" data-pdf-url="{{ block.settings.download-pdf-url-b }}" download="{{ block.settings.download-pdf-label-b | handle }}.PDF">
{% render "download-icon" %}{{ block.settings.download-pdf-label-b }}
</a>
</div>
</div>
<style>
.download_pdf {
margin-bottom: 25px;
}
.download_pdf_inner {
display: flex;
gap: 12px;
}
.download_pdf_inner .download_btn {
padding: 15px;
gap: 8px;
width: 50%;
}

</style>
<script>

document.addEventListener("DOMContentLoaded", () => {
// Select all buttons with the class "download-pdf"
const downloadButtons = document.querySelectorAll(".download-pdf");

downloadButtons.forEach(button => {
button.addEventListener("click", async (event) => {
event.preventDefault(); // Prevent default anchor behavior

// Get the PDF URL from the button's data attribute
const pdfUrl = button.getAttribute("data-pdf-url");

if (pdfUrl) {
try {
// Fetch the PDF file as a blob
const response = await fetch(pdfUrl);
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
const blob = await response.blob();

// Create a downloadable link
const tempLink = document.createElement("a");
tempLink.href = URL.createObjectURL(blob);
tempLink.download = pdfUrl.split("/").pop(); // Use file name from the URL
tempLink.style.display = "none";

// Append, trigger click, and remove the link
document.body.appendChild(tempLink);
tempLink.click();
document.body.removeChild(tempLink);

// Revoke the object URL to free memory
URL.revokeObjectURL(tempLink.href);
} catch (error) {
console.error("Failed to download the file:", error);
}
} else {
console.error("No PDF URL specified for this button.");
}
});
});
});

</script>