nick nick - 3 years ago 133
CSS Question

shopify assets, file structure and naming conventions

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 Source

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;
}
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download