Exporting Images from the Settings > Files Library

BirdieGolden
Shopify Partner
51 1 19

Hi friends, we're migrating our website from one Shopify store to a developer sandbox and have successfully migrated the theme and products.

 

Unfortunately, NONE of the images (social icons, logos, lifestyle photos) came over, and there doesn't appear to be any way to download our images.

 

Is there a way to export our image library? Or do we need to literally go through each photo, one by one, and download them?

 

Thank you!

(Also, if the latter is the answer...SHOPIFY PLEASE FIX THIS)

Replies 63 (63)

Elle
Shopify Staff
1092 97 208

Hi, @BirdieGolden 

 

Elle here from Shopify. 

Currently, this feature does not exist in our platform. Our developers are aware of the requests for this feature and we do hope we can bring this to life soon!

 

I was able to find a GitHub where a developer external to Shopify details a couple of different ways to fetch these files using Javascript here.

 

Hope this helps!

 

Cheers,
Elle

 

 

 

Elle | Social Care @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

Steve_Brown_UK
Shopify Partner
3 0 32

This is ridiculous. I can't believe that you cannot let the store owner download their assets. What's wrong with you people?

Stuart_H_AU
Shopify Partner
5 0 14

Is there a roadmap of features and expected release dates? This has to be on of the biggest flaws in shopify, along with the inability to create decent looking content pages without creating an exponential number of custom templates.

Elle
Shopify Staff
1092 97 208

Hi, all

Thank you for expressing your concerns. Our developers are aware of this request and we hope to offer a solution in the future. At this time, there is no roadmap I can share; however, please keep your eyes on our changelog for product updates. 

If you are able to provide more context as to why this feature is imperative to running your business on Shopify, I will share this directly with our developers. 

Also, if you are looking for a workaround, there are solutions provided in this thread here. 

 

Elle | Social Care @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

Stuart_H_AU
Shopify Partner
5 0 14

Thanks - I adapted another script to open all the files in new tabs from the Settings > Files section and I used that tab extension, worked perfectly fine except for the three hours i wasted finding that solution buried in the forums.

The business case is for customers who operate a DEV > UAT > LIVE deployment process. Managing those media assets added through the theme customizer is a pain, migrating across to a different store requires the following;

Source: Export Theme
Source: Export Products (if required)
Source: Manually Export Images

All it needs is a 'download option' from the Settings > Files Dashboard; and if you're there - extending it to show more than 50 images would be handy.

---

Extension: https://chrome.google.com/webstore/detail/tab-save/lkngoeaeclaebmpkgapchgjdbaekacki/related

Script:

function fetchPageAssets(){
  var downloader = $("<a id='download-file' href='' download='' target='_blank'></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()
Stuart_H_AU
Shopify Partner
5 0 14

Update: Adding ?limit=250 query parameter to the admin/settings/files URL allows you to use the above script for a larger number of images without having to paginate.

Elle
Shopify Staff
1092 97 208

Thank you so much for sharing, @Stuart_H_AU !

Elle | Social Care @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

jwhaley
Visitor
2 0 0

Thank you so much for helping exactly 0%, Elle!

HandHugs
Shopify Expert
198 1 60

I ran that script in Javascript console on the Files page, but it only opened the first image in a new tab and then gave me a GET error.

I would love some help getting this to work so we don't have to pay an app every time we want to see a preview in a dev store!

Stuart_H_AU
Shopify Partner
5 0 14

Hey, you could try a different approach and use the following script to create a HTML file containing all the images from the files section. Once complete, you open the HTML file in your browser, it will fetch all the images and just 'save as'.

 

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&colon;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()

 

CynthiaESJ
Excursionist
17 0 31

Oh my gosh! I just figured out this functionality doesn't exist and I'm shocked! 

You wanted a business reason - here are a couple:

1) some of us have subdomains sites that need to use the same images so we need to be able to download OUR assets and re-upload them to our new Shopify site.

2) I personally have a second store with a new brand name that needs all of my image assets from my first store. I already had to pay for a third party app to download my entire store since Shopify doesn't give us that functionality either(!). So I'm paying for that and now I just figure out that my image assets are all still linked to my first store. 

It is clear that we should all be able to download our own assets. I just gave two valid reasons for needing this functionality using Shopify stores. 

Of course, Shopify does not want to make it easy to move to another platform, so there is also the business reason of leaving Shopify and wanting all of your Shopify store content to use on a different platform. But I know Shopify isn't going to give a solution for that! I don't need that, but I DO NEED the my own assets to upload on to my other Shopify store.

I can't believe this functionality still doesn't exist in 2021!! 

c-

Rita2021
Visitor
1 0 3

We are a statewide organization with chapters across the state. For various reasons we chose not to go with multiple stores in Shopify. We chose to have a different store for each chapter. The largest chapter has uploaded almost all the products and images without pricing and inventory.  We are using the export of this as the basis or all the other stores.  BUT THE IMAGES DO NOT DOWNLOAD. We need to download the handle for each product and the images associated with it.  Alternatively, we need the Export Products to contain the links to the images and allow our other stores access those images.

CynthiaESJ
Excursionist
17 0 31

Hi Rita, 

I feel your pain! 

Although this is something Shopify MUST FIX for us, I wanted to point you towards an app that at the least will get you what you say you need - Excelify (on the app store or at Excelify.io). I've used it several times and am currently using it again. It will download all the product info that you cannot get from Shopify. That will include URLs to the images for your products, but realize that the URLs will all point to the store you exported them from. Sounds like that will be ok for what you are doing, since you say you have one store with the "master" product list on it. So as long as that store stay live, the URLs you use on the other stores will work for you. 

Right now, that's exactly what I just did for store #3 I am setting up. It works fine, my site #3 is up and the products are all as expected - using the image URLs for the images that still live on store #1. The problem is that I will be closing down store #1, so I can't just leave my image assets at the URLs associated with that store. But there is no way from Shopify to get my images migrated physically over to my new store #3 (also on Shopify). This is unacceptable and Shopify needs to fix it.

Anyway, thought I'd post this in case it will help your specific need. Good luck!

cheers,

c-

garrinevan
Tourist
3 0 10

This sucks. Shopify, figure this out asap.

jodiecball
Visitor
1 0 0

It's been three years. Not only does shopify not allow you to export your images in a zip file, but the zip file of the products don't include the product categories AND the link they email you to download your product file doesn't work half the time unless you view the source code of the email and edit the link they send you. I've stopped recommending shopify to replatform my clients. Bigcommerce's backend is wildly better & headless shopify solutions with webflow frontend are way easier to create a good UX. Shopify is no longer my platform of choice. Fix these issues! 

jwhaley
Visitor
2 0 0

Thanks for the pathetic attempt at pretending to care about implementing something that is 60000% obvious, and then failing to do it for 300 years. Shopify is awful.

DevelopmentGuy
Visitor
1 0 1

It's because they want the merchant to purchase a $2K/mo plan in order to create a sandboxed site. 

PurpleMamba
Shopify Partner
119 2 16

@DevelopmentGuy wrote:

It's because they want the merchant to purchase a $2K/mo plan in order to create a sandboxed site. 


Even then you can't export the files.

Josh_Poole
Tourist
7 0 13

It is sad that Shopify still does not have this basic functionality. Very disappointing 

DazC
Excursionist
17 0 15

We just used Rewind (paid app) to create a clone of one of our Shopify stores, to set it up in a different region, only to find that it doesn't copy the stuff from "Settings -> Files".

We haven't even got the store logos in the Theme Customiser because, you guessed it, this pulls from the Library that is "Settings -> Files".

Not only does "Settings -> Files" not have any kind of mass export or import available, there is also no API to interact with it.  As far as I can see all of the video, PDFs, and other assets that we would need on the duplicated store would all have to be scraped by hand, and then uploaded one by one to the new store.

Surely in 2021 this isn't actually what we have to do, is it?

We are on the $2k+ a month Shopify Plus plan and don't even have this basic functionality.  It's madness.

garrinevan
Tourist
3 0 10

Agreed. This is incredibly disappointing.

kevinurb
Visitor
1 0 2

Important to add. As it looks like based on the latest change to the Settings Files UI, the script workaround do not work anymore. 

garyrgilbert
Shopify Partner
388 40 159

Anyone who has arrived here this latest script works.

 

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&colon;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()

 I did not create this, and therefore can not promise that it will work for you 🙂

- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
jillianashley
Tourist
8 0 1

can you show me where in the script section I add this?

jillianashley
Tourist
8 0 1
garyrgilbert
Shopify Partner
388 40 159

Hi Sorry, didn't get the notification 🙂

 

You can just add the script directly in the developer tools console.. First thing you need to do is go to the files page in your shopify admin

admin/settings/files

 

then open the browser developer tools (ctrl + shift + i in chrome) switch to the console tab, paste the code in and hit enter... a file will automatically end up in your downloads directory, open this file in your browser (you should see all the images now displayed).. the last step is to use the browser "save page as" feature to save the complete webpage.. that will automatically download all files and place them in a separate directory and voila...

Its a little complicated but since shopify doesnt provide that feature yet we don't have much choice.

 

Cheers

Gary

- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
jillianashley
Tourist
8 0 1

Thank you for responding! I am wondering if Shopify blocked users from doing that, because I see these messages

jillianashley_0-1622727030682.png

jillianashley_1-1622727134622.png

@garyrgilbert 

 

garyrgilbert
Shopify Partner
388 40 159

Ok Try this one.. I just tested it.

 

 

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&colon;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()

 

 

 

 

- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
jillianashley
Tourist
8 0 1
garyrgilbert
Shopify Partner
388 40 159

Sorry,

 

The add snippet function of the forum is changing a line of code...

this line

let data = 'data&colon;application/octet-stream;base64,' + window.btoa(files.join('\n'));

 should be

 

garyrgilbert_0-1622728985970.png

 

its escaping the colon and adding the HTML entity.. 

 

- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
brentay
Shopify Partner
8 0 4

@garyrgilbert 

Thank you so much for sharing this and identifying why it wasn't working! This is amazing.

CynthiaESJ
Excursionist
17 0 31

Hi @garyrgilbert and @brentay

I tried Gary's script, fixed the colon issue, but I get an error when running in my Chrome console. I'm in my Shopify Admin on my settings/files page (as you can see in screenshot). Pasted the fixed code in, hit return and get "Uncaught SyntaxError: Invalid or unexpected token" error. I attached a screenshot for you to see. I re-tried a few times, but same error. 😞

This would be so fantastic to have working! I hope you can tell me what is wrong on my end. 

 

Screen Shot 2021-06-05 at 11.48.48 AM.png

Thanks so much!

Cynthia

 

 

garyrgilbert
Shopify Partner
388 40 159

Hi,

I created a github gist so that the forum won't mess with the Javascript code.

 

https://gist.github.com/mubbo/81273206a2bad430b4bfc4f00f9d5e96

 

Cheers,

 

Gary

 

- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
jillianashley
Tourist
8 0 1

Thank you so much @garyrgilbert. I was able to download the images, but do you know if there is an excel version that can be downloaded for the image file names so I can add it to my product file import? Thank you again!

garyrgilbert
Shopify Partner
388 40 159

Hi @jillianashley,

 

no, I'm afraid not

- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
CynthiaESJ
Excursionist
17 0 31

Thanks so much @garyrgilbert! I used your code from github (and your info on adding the URL param for longer list of image files) and it all worked great! 🙂 

What a great help you have been, thanks for taking your time to help all of us!

cheers,

c-

Alexgvb
Shopify Partner
4 0 0

unfortunately, this is only for the current page. of course you may use the limit=250 in the URL but if you have more than 250 files, you have to use the pagination and rerun the code for every page. quite a pain if you have a lot of pages. 

PurpleMamba
Shopify Partner
119 2 16

@Alexgvb There is now a Files API for this. This workaround was only necessary before the Files API was released.

 

Michael_Dragich
Shopify Expert
73 1 22

Two workarounds listed in this thread.  One with another script approach the other with the app Matrixify.

ShopaFree.me • Free Shopify Setup & Design
MIPO
Shopify Partner
6 0 1

Do you happen to know what im doing wrong? Everything works until i have to save the images to disc. "Saving page as" only saves the html page with all the images to disc and not all the images. As I understood it I should be able to save all images in one go? Am I mistaken? Appreciate your help 🙂 

garyrgilbert
Shopify Partner
388 40 159

Hi, 

If you more than one page of images in Shopify you will need to repeat it for each page.

Make sure when you save you are saving as complete web page otherwise it will only save the html without creating a directory for the images and other files.

Hope that helps.

Cheers

Gary

- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
jbwhaley
Shopify Partner
4 0 3

No, this isn't an option on Plus stores either, which is beyond ludicrous.

jbwhaley
Shopify Partner
4 0 3

It's three years later. What definition of "soon" are you using?

 

This is 1000% an obvious oversight that should never have been an oversight to begin with. 

Michael_Dragich
Shopify Expert
73 1 22

"Soon" = The mother-shop's definition of course!  By that measure, they're about 2 years away from adding file and image exports.  Then we can chat about native export/import management for Collections and Metafields (guesstimating 2030 for those 🙂  

Sections : It quite literally took 4 years from the point of announcement of sections everywhere, which was the year they launched sections on the home page, before they were actually available everywhere.

 

However : From the devil's advocate perspective, I moved into my new place two years ago, and still haven't unpacked 🙂 Just guessing here, but I'm thinking adding ANY feature to an SaaS with 2mill+ subs that's publicly traded is prolly a bit more complex than unpacking and organizing all my tchotchkes.

 

All of that said, yeah, it feels like it should have been included from day one.

ShopaFree.me • Free Shopify Setup & Design

ut_er
Tourist
7 1 2

Unbelievable that Shopify has not yet added this functionality...

 

I want my own backup of my shop, on my PC, and I want the whole thing there, so I can just upload it (or each part) and have my entire store back. 

garyrgilbert
Shopify Partner
388 40 159

@ut_er 

Shopify has created the ability for Partners to extend the functionality of the shop system so they don't have to build everything themselves.. and can concentrate on the core functionality of the system (and also on what brings them the most revenue of course )

 

There are apps available that you can use to export your shop most probably at a reasonable price too (depending on how big your store is). I'm not sure that there is an app specifically designed for the files though... maybe I should create one.

 

Regards,

 

Gary

- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
HandHugs
Shopify Expert
198 1 60

@garyrgilbert the only one i know of is Rewind Copy - they copy your theme files over to another store and send you an email with a zip folder download of all the Files in the Settings > Files area. It is reasonably priced (they do a pay per file type of model) but it would be useful to have the option to do JUST the files and nothing else, since it's already easy enough to port over a theme.

geekdidi
Visitor
1 0 0

This is so simple to accomplish, it's obvious Shopify isn't doing for malicious reasons that, most probably, has to do with 'the bottom line '. 

 

Just wanted to add that this extension helped in my case, might be useful.

BarterLoops
Visitor
2 0 0

Yes, please. I have to copy and paste the image links to my product spreadsheets. Then a copy message pops up and covers the file name. Making it difficult to transfer to the correct line with speed.

 

If I could have a button to download all image file links with a spreadsheet. Then copy the links in bulk and carry them over,  that would be nice?

 

 

Screen Shot 2022-05-07 at 9.31.04 PM.png