Difference between Shopify Files and Assets for images

Settings -> Files

These are the global files that can be accessed from any theme. You store different assets there, for example any image uploaded in the customize panel for the image picker field goes there. There are some other assets that goes there but this is the just of it, they are global assets and can be accessed from any theme even if you delete the theme from which you added the files via the customize panel.

In addition there is no API (as of now) that allows to communicate with this. Meaning that APPs can’t upload files there directly.

Theme -> Assets

On another hand the theme assets are considered local for the specific theme, if you delete the theme those files are gone and you can’t access them.

These files comes with the theme, so when you add a new theme to your store, the assets (css/js/images) comes with it.

There is an API that allows you to communicate with the Asset API so APPs can write and read from the theme asset folder.

Why would you use one instead of another

There is no specific rule here, you can use either of them for files, but there are a few good practices.

If your theme requires a specific functionality – add those files in the theme assets folder. For example CSS & JS files needs to go there. Why you ask?

There is a tool called ThemeKit that allows you to communicate with the theme and read/write files directly in the assets folder (and other places), this makes development and debugging a lot easier for developers. So if your css or js file is uploaded in the Settings -> Files there is no way to read/write it without downloading it and reuploading it there manually (which is a pain).

Since the theme assets comes with the theme when you download your theme and upload it to a different store it will just work. So in that sense please use the theme assets in those cases.

On another hand when you have specific customization options, some themes have the option to link to a SVG or MP4 files, since there is no way to add this, usually administrators upload such files in the Settings -> Files section and copy/paste the global link to the customize panel field.

So to put it simply theme assets are for the theme functionality, while settings files are for the customization assets.

When it comes to images, usually most of images should be manageable from the customize panel with an image_picker field, those will upload the image directly to the Settings -> Files without you doing anything.

But if you have for example a static image that the theme requires (for example the logo) and there is no customize option for it, then add that to the theme assets folder.

TL;DR

Theme assets are the files that are strictly tied to the theme in question while the Settings -> Files are the files that can be accessed from any theme.

When you are developing a theme write ALL files in the theme assets files in order to allow for the theme to be shared if you like or modified easily afterwards.

Use the Settings -> Files only when you need to link to a specific global asset or allow for the user to copy paste links in your customize settings of the theme.