shopify assets, file structure and naming conventions

Question

I am using Shopify to develop my e-commerce site and I am a little confused about assets.

Do I just dump all my JavaScript, css and images in the assets folder or can I have sub folders for each of them inside the assets folder?

Do I need to end every file name in .liquid?

If I can make subfolders would I use a relative path like this?

{{ 'css/default.css' | asset_url | stylesheet_tag }}

Answer 1

You just upload all assets (images, CSS, JS, or any other file pertaining to the theme of your website) into the assets folder. You then just reference it by the filename.

Sub-folders are not possible at this time, but it's something I think a lot of Shopify customers would appreciate. I personally like a clean folder structure.

CSS:

{{ 'styles.css' | asset_url | stylesheet_tag }}

JS:

{{ 'modernizr.min.js' | asset_url | script_tag }}

Referencing images or other assets in the CSS:

{{ 'background.jpg' | asset_url }}

div#myDIV {
  background: url({{ 'background.jpg' | asset_url }}) center center no-repeat;
}