Add Download Button for Any Type of Files

Add Download Button for Any Type of Files

How to see the code

1. Please log in/create an account first. This is to ensure that all purchases are connected to an account and can be viewed on different devices.

2. Purchase the code using the "purchase box" on the specific page of the desired code.

3. After the purchase, please refresh the page.

Compatibility: All Shopify Themes

Do you have some file you need to share to your customer? Or limit the access of this file to the logged-in customers? Definitely can be done with NO APP, NO external library either. Let the customer download images, video, audio, pdf, csv, and zip files. No app needed. Please it any of your Shopify pages. Change the download name to your store name.

Check DEMO store here 💻. Password: made4uo

 To start:

1. Go to your Admin store > Themes > Online store > Actions > Edit code.

2. In the theme editor, open the section folder, and you can name it whatever you want, then paste the code below

 <link class="import" href="{{section.settings.file_link}}" rel="import" />
<div class="downloadContainer">
{% for block in section.blocks %}
{% if section.settings.user_enabled %}
{% if customer %}
<file-download class="downloadWrapper">
{% if block.settings.download_title != blank %}<h3 style="text-align: center">{{block.settings.download_title}}</h3>
{% endif %}
<a class="file" href=""
download="{{block.settings.title | escape }}" style="text-decoration: none"
data-file-type="{{block.settings.file_type | escape }}"
data-file="{{block.settings.download_link | escape }}">
<button class="button btn">{{block.settings.button_label | escape }}</button>
</a>
</file-download>
{% else %}
<div class="downloadWrapper">
<h3 style="text-align: center">{{block.settings.user_message}} <a class="logInText" href="{{ routes.account_login_url }}" target="_blank">here.</a></h3>
<a class="file" href=""
download="{{block.settings.title}}" style="text-decoration: none"
data-file="{{block.settings.download_link }}">
<button class="button btn" disabled>{{block.settings.button_label}}</button>
</a>
</div>
{% endif %}
{% else %}
<file-download class="downloadWrapper">
{% if block.settings.download_title != blank %}<h3 style="text-align: center">{{block.settings.download_title}}</h3>{% endif %}
<a class="file" href=""
download="{{block.settings.title | escape }}" style="text-decoration: none"
data-file-type="{{block.settings.file_type | escape }}"
data-file="{{block.settings.download_link | escape }}">
<button class="button btn">{{block.settings.button_label | escape }}</button>
</a>
</file-download>
{% endif %}
{% endfor %}
</div>
<style>
.downloadContainer {
position: relative;
padding: 5rem;
display: flex;
justify-content: center;
align-items: center;
gap: 2rem;
}

.logInText {
cursor: pointer;
text-decoration: none;
}
.logInText:hover {
opacity: 0.7;
text-decoration: underline;
}

.downloadWrapper {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.downloadWrapper > a {
transition: all .3s ease;
}
.downloadWrapper > a:hover {
transform: scale(1.1);
}
@media only screen and (max-width: 750px) {
.downloadContainer {
flex-direction: column;
}
}
</style>
{% schema %}
{
"name": "Download Section",
"settings": [
{
"type": "checkbox",
"id": "user_enabled",
"label": "Enable to customers only"
}
],
"blocks": [
{
"name": "download-section",
"type": "download-section",
"limit": 4,
"settings": [
{
"type": "text",
"id": "download_title",
"label": "Download title",
"default": "Download the file here"
},
{
"type": "text",
"id": "download_link",
"label": "Download link",
"info": "Copy the link that you save in your Shopify store."
},
{
"type": "select",
"id": "file_type",
"label": "File type",
"default": "image/jpeg",
"options": [
{
"value": "image/jpeg",
"label": "jpeg image"
},
{
"value": "image/png",
"label": "png image"
},
{
"value": "image/gif",
"label": "gif image"
},
{
"value": "application/pdf",
"label": "pdf file"
},
{
"value": "video/mp4",
"label": "video file"
},
{
"value": "audio/mpeg",
"label": "audio file"
},
{
"value": "text/csv",
"label": "csv file"
},
{
"value": "application/zip",
"label": "zip file"
}
]
},
{
"type": "text",
"id": "title",
"label": "Download file name",
"info": "Change the file name different from the name you have in your Shopify"
},
{
"type": "text",
"id": "button_label",
"label": "Download button label",
"default": "DOWNLOAD"
},
{
"type": "text",
"id": "user_message",
"label": "If customer enabled, please enter your message if not customer",
"default": "Please sign up or log in to download"
}
]
}
],
"presets": [
{
"name": "Download Section"
}
]
}
{% endschema %}


 

3. Lastly, find your main.js file, under the Asset folder. For Dawn, it is global.js. For other themes, it might be theme.js. Then paste this code below.

  class FileDownload extends HTMLElement {
constructor() {
super();
this.fileBox = this.querySelector('a');
this.file = this.fileBox.dataset.file;
this.fileType = `${this.fileBox.dataset.fileType}`;
this.requestFile();
}

requestFile() {
fetch(`${this.file}`)
.then((response) => response.arrayBuffer())
.then((data) => {
const bufferView = new Uint8Array(data);
const urlCreator = window.URL || window.webkitURL;
const url = urlCreator.createObjectURL(new Blob([bufferView], {type: this.fileType }))
this.fileBox.href = url;
})
.catch((e) => {
console.error(e);
})
}
}

customElements.define('file-download', FileDownload);

 

That's it. All you need to do is upload the files you have. Please see the video for instructions.

Copied!
Voltar para o blogue

1 comentário

I am curious about this code. I want to create a download button. If I purchase and use your code can I then customize the page visually to make the page compatible with my website?

Jane Bernard

Deixe um comentário