You can allow customers to easily save files to their Dropbox by adding two buttons, for each individual file or for all files in one click.
Navigate to Settings > Library and Account Settings > choose the theme you want to edit > Edit Code.
If you want to add a button to save each individual file and a button to save all files:
- Navigate to layout liquid to make changes and paste this code:
Remember to change <key> with the appropriate key given by Dropbox's documentation.
If you want only want to add a button to save each individual file:
- Navigate to file liquid to make changes and paste this code:
<a
href='#'
class='button sky-pilot-button inverse'
onclick="Dropbox.save('{{file.download_url}}', '{{file.filename}}', {})"
data-no-instant
>
{% render 'icons', icon: 'dropbox', classes: 'sky-pilot-action-icon' %}
Save to Dropbox
</a>
If you want only want to add a button to save all files:
- Navigate to line_item.liquid to make changes and paste this code at the top:
<script type='text/javascript'>
var files = []
</script>
{% for file in line_item.files %}
<script type='text/javascript'>
files.push({url: "{{file.download_url}}", filename: {{ line_item.product.title | json }} + "/" + {{ file.filename | json }} });
</script>
{% endfor %}
and this code at the end of the file:
<script type='text/javascript'>
if (files.length > 0) {
var button = Dropbox.createSaveButton({
files: files,
error: function(errorMessage){
if(errorMessage.indexOf("status 403") != -1)
alert('You have exceeded the limit of allowed dropbox saves');
}
});
var dall = document.getElementById('download-all')
if(dall) {
dall.appendChild(button);
$(button).removeClass("dropbox-dropin-btn","dropbox-dropin-default").addClass("button action_button");
var newText = "Save All to Dropbox";
button.innerHTML = newText;
}
}
</script>
Then add a
<span style="margin-left: auto;" id="download-all"></span>
where you want the button to display.
You can read more in Dropbox's official documentation here.
