Download all Shopify CDN assets from a store

console_download_files.js

function fetchPageAssets(){
  var downloader = $("<a id='download-file' href='' download=''></a>")
  $(".ui-title-bar").append(downloader)
  var assets = $("#assets-table .next-input--readonly")
  assets.each(function(index, input) {
    $('#download-file').attr('href', input.value);
    $('#download-file')[0].click();
    if (index + 1 == assets.length) {
      var lastItem = $(input).parents("tr[bind-class]").attr('bind-class').substring(25,36)
      $.ajax({
        url: "/admin/settings/files?direction=next&last_id="+lastItem+"&last_value="+ lastItem+"&limit=100&order=id+desc",
      }).done(function(data) {
        var mutationObserver = new MutationObserver(function(mutations, observer) {
          mutations.forEach(function(mutation) {
            if (mutation.target.id && mutation.target.id == "assets-table") {
              fetchPageAssets()
              observer.disconnect()
            }
          })
        });
        mutationObserver.observe(document, {
          childList: true,
          subtree: true
        });
        var newDoc = document.open("text/html", "replace");
        newDoc.write(data);
        newDoc.close();
      })
    }
  })
}
fetchPageAssets()

console_download_list.js

function fetchPageAssets() {
  var assets = $("#assets-table .next-input--readonly")
  assets.each(function (index, input) {
    files.push(input.value)
    if (index + 1 == assets.length) {
      var lastItem = $(input).parents("tr[bind-class]").attr('bind-class').substring(25, 36)
      $.ajax({
        url: "/admin/settings/files?direction=next&last_id=" + lastItem + "&last_value=" + lastItem + "&limit=100&order=id+desc",
      }).done(function (data) {
        var mutationObserver = new MutationObserver(function (mutations, observer) {
          mutations.some(function (mutation) {
            if (mutation.target.id &&
              mutation.target.id == "assets-area" &&
              mutation.addedNodes[0].nextElementSibling.innerHTML.indexOf("empty") > -1
            ) {
              downloadListFile()
              observer.disconnect()
              return true;
            } else if (mutation.target.id &&
              mutation.target.id == "assets-area" &&
              mutation.previousSibling.className == "ui-layout ui-layout--full-width"
            ) {
              fetchPageAssets()
              observer.disconnect()
              return true;
            }
          })
        });
        mutationObserver.observe(document, {
          childList: true,
          subtree: true
        });
        var newDoc = document.open("text/html", "replace");
        newDoc.write(data);
        newDoc.close();
      })
    }
  })
}
function downloadListFile() {
  var downloader = $("<a id='download-file' href='' download='shopify-files.txt'></a>")
  $(".ui-title-bar").append(downloader)
  var data = 'data:application/octet-stream;base64,' + window.btoa(files.join(','));
  $('#download-file').attr('href', data);
  $('#download-file')[0].click();
}
var files = []
fetchPageAssets()

Download-Shopify-CDN-Assets.md

Instructions

1. Go to your Shopify admin/settings/files page
2. Open your browser Dev tools, go to the console

Then, depending on the option you choose:

Option 1 - Download all the files directly (might crash you browser)

3. Make sure your browser is set to download files automatically and doesn't ask for the download location every time
4. Paste the content of the console_download_files.js file, and press enter
5. Your browser will automatically fetch each page and download every file on it. It might ask you to accept "multiple downloads" (Chrome)

Option 2 - Download a .txt file containing the list of the files to download

3. Paste the content of the console_download_list.js file, and press enter
4. Your browser will automatically fetch each page and download the list of all the files on the CDN. You'll then be able to use any file download manager to import the list and safely download everything.

Another solution would be just getting an array of the cdn urls then writing it to a html file and just using Firefox or Chrome's Save Page As feature. This will download all the images into a folder on your computer.

1. Change limit to 250 in Shopify

Append limit to url: https://my-fantastic-store.myshopify.com/admin/files?limit=250

2. Get your array of cdn URLs

$('.next-input').map(function(key, val) { return val.value; }).get();

3. Adjust in text editor

Paste in Sublime text or favorite text editor
Regex replace ^ with <img src= and $ with />
Wrap in <html><body> </html>

4. Use Save Page As in Chrome or Firefox

5. Complain to Shopify about this nonsense and why they don't have bulk downloading

This works much better, save with .html extension

1. Append limit to url: https://my-fantastic-store.myshopify.com/admin/files?limit=250

2. Go to Google Chrome Developer Console and paste this code

function fetchPageAssets() {

    var assets = $('.next-input').map(function(key, val) { return val.value; }).get()
    assets.forEach(function (value) {
        if (value != "") {
            files.push('<img src="' + value + '">')
        }
    })
}

function downloadListFile() {
    var downloader = $("<a id='download-file' href='' download='shopify-files.html'></a>")
    $(".ui-title-bar").append(downloader)
    var data = 'data:application/octet-stream;base64,' + window.btoa(files.join('\n'));
    $('#download-file').attr('href', data);
    $('#download-file')[0].click();
}
var files = []
files.push('<html>\n<body>')
fetchPageAssets()
files.push('</body>\n</html>\n')
downloadListFile()

3. Use Save Page As in Chrome or Firefox, save complete page which downloads image files as well

@klhurley 's solution worked well for me. Just to add:

You may need to convert (depending on your browser version) the .webp file formats that are downloaded by the browser into png or other. If you do need to, find and install https://developers.google.com/speed/webp/docs/dwebp and use that utility to convert them into pngs:

dwebp <inputfile> -o <outputfile>

I downloaded the utility from homebrew on mac and used the following script to convert all my webp files after copying them all into one folder:

ls -l | grep .webp | awk '{$1=$2=$3=$4=$5=$6=$7=$8=""; print $0}' | awk '{$1=$1};1' | xargs -I '{}' sh -c "dwebp {} -o output/{}.png || true"

There might be a nicer way to do that but I was in a hurry ;).

for those who get 404 error, you can take a look here: https://gist.github.com/lexthor/63ac60fe5bce357084a934503c677233
I have forked the gist and update the code.

Another way to ensure the files downloaded are .PNG rather than .WEBP is by using Chrome as your default browser. Chrome will automatically convert the files for you.

for those who get 404 error, you can take a look here: https://gist.github.com/lexthor/63ac60fe5bce357084a934503c677233
I have forked the gist and update the code.

Thanks @lexthor

This working for me in 2021
`
/**

• Script for put into console for download all images from Shopify /admin/settings/files?limit=250
  */

function fetchPageAssets() {
let images = document.querySelectorAll('img[src*=files]');
images.forEach(function(image) {
files.push('<a href="' + image.src.replace(/_60x60/, "") + '"><img src="' + image.src.replace(/_60x60/, "") + '">
');
});
}

function downloadListFile() {
let button = document.createElement("a");
let data = 'data:application/octet-stream;base64,' + window.btoa(files.join('\n'));
button.id = "download-file";
button.href = data;
button.download = "shopify-files.html";
document.querySelector("body").append(button);
button.click();
}

var files = []
files.push('\n')
fetchPageAssets()
files.push('\n\n')
downloadListFile()
`

This working for me in 02.06.2021 after shopify admin panel updates!

function fetchPageAssets() {
let images = document.querySelectorAll('img[src*=files]');
images.forEach(function(image) {
files.push('<img src="' + image.src.replace(/_60x60/, "") + '">');
});
}

function downloadListFile() {
let button = document.createElement("a");
let data = 'data:application/octet-stream;base64,' + window.btoa(files.join('\n'));
button.id = "download-file";
button.href = data;
button.download = "shopify-files.html";
document.querySelector("body").append(button);
button.click();
}
var files = []
files.push('\n')
fetchPageAssets()
files.push('\n\n')
downloadListFile()

Thank you @reajkee13!

This working for me in 02.06.2021 after shopify admin panel updates!

function fetchPageAssets() {
let images = document.querySelectorAll('img[src*=files]');
images.forEach(function(image) {
files.push('<img src="' + image.src.replace(/_60x60/, "") + '">');
});
}

function downloadListFile() {
let button = document.createElement("a");
let data = 'data:application/octet-stream;base64,' + window.btoa(files.join('\n'));
button.id = "download-file";
button.href = data;
button.download = "shopify-files.html";
document.querySelector("body").append(button);
button.click();
}
var files = []
files.push('\n')
fetchPageAssets()
files.push('\n\n')
downloadListFile()

Perfect!

Hello, can anybody help here!
I got to download all files from Shopify, they all are in one HTML file, can't convert to 250 different jpg files. How could I do this? None of the online converters doesn't read those files...

Another option would be to upload the same HTML files to other Shopify stores, already as those 250 photos.

THANKS, A MILLION!

Hello, can anybody help here!
I got to download all files from Shopify, they all are in one HTML file, can't convert to 250 different jpg files. How could I do this? None of the online converters doesn't read those files...

Another option would be to upload the same HTML files to other Shopify stores, already as those 250 photos.

THANKS, A MILLION!

You can save then this page with your browser and all files will be in a separate folder.

SO LOVELY! THANK YOU!

Thank you so much @reajkee13 :-)

Amazing, thank you!

Thanks a ton!

Thanks @reajkee13, worked for me today!

Thank you @reajkee13

Worked for me also...thank you for this script..