\n\n \n \n \n\n\n
\n \n \n \n \n\n \n
\n\n\n
\n
\n
\n\n \n \n \n \n\n
\n

A better way to do Sass with Shopify Themes

\n February 25, 2015\n
\n
\n Nick Mealey\n 10 minute read\n
\n
\n
\n\n
\n
\n \n

Thanks for Sass Shopify, but I’ll use Compass instead.

\n

I’ve recently undertaken a project to use the eCommerce platform Shopify. After switching from Magento, I’ve really come to appreciate how simple and powerful the platform is. One “out of the box” feature that comes with Shopify’s liquid templating is using Sass/SCSS. As Shopify’s backend takes care of parsing your .scss files, you don’t have to worry about compiling to .css extensions. Although this is a nice feature for small projects, it doesn’t give you any flexibility or organization with your Sass. Shopify is pretty opinionated when it comes to file structure, and since sub-folders don’t work within the assets folder, using the built-in Sass compiler simply isn’t good enough.

\n\n

Instead, I use the ruby compiler Compass to do all the heavy lifting, and it allows pretty much endless features when compiling. If you’re not familiar with Compass, check out http://compass-style.org/ for more info. Basically, I simply create a folder outside the assets folder named sass and compile the files into .scss.liquid/.css.liquid files. Within the root of my theme, the directory structure would looking something like this:

\n\n
|-- assets\n|-- config\n|-- layout\n|-- snippets\n|-- templates\n|-- sass\n    |-- styles.scss\n    |-- base\n        |-- _base.sass\n        |-- _colors.sass\n        |-- ...\n    |-- layout\n        ...\n    |-- modules\n        ...\n    |-- views\n        ...\n
\n\n

Then, in styles.scss file, I include each file in the order I want them to be loaded. styles.scss

\n\n
/* Normalize */\n@import \"base/normalize\";\n\n/* Variables*/\n@import \"base/colors\";\n@import \"base/variables\";\n\n/* Mixins */\n@import \"bourbon/bourbon\";\n@import \"layout/breakpoints\";\n@import \"base/mixins\";\n\n/* Fonts */\n@import \"base/fonts\";\n\n/* Base */\n@import \"base/base\";\n\n/* Layout */\n@import \"layout/layout\";\n@import \"layout/header\";\n@import \"layout/footer\";\n\n/* Modules */\n@import \"modules/modules\";\n@import \"modules/nav\";\n@import \"modules/shopper\";\n...\n\n/* Views */\n@import \"views/support-article\";\n...\n
\n\n

Now that the structure is setup, how do we actually create files that are accessible within the asset folder? We use some Compass config to help us out. Note that files that begin with an underscore are partials and will not processed to the assets folder. So, any partial we include will compile into a single file that will be used in our theme. In this case, styles.sass  will compile to styles.css (in the assets folder) and be renamed to styles.scss.liquid, where it will be served to the client. Here’s an example of a Compass config file: config > compass.rb

\n\n
css_dir = \"assets\"\nsass_dir = \"sass\"\njavascripts_dir = \"js\"\nsourcemap = true\noutput_style = :compressed\n\n# Saves css files as liquid\non_stylesheet_saved do |filename|\n  if File.exists?(filename)\n    # Break up the path\n    path = File.dirname(filename) + \"/\"\n    file = File.basename(filename, \".*\")\n    extension = \".scss.liquid\"\n\n    # Move the file to new location\n    FileUtils.mv filename, path + file + extension\n  end\nend\n
\n\n

What’s happening here is that after Compass compiles the Sass and saves the css files, it will rename the file to an extension we want to use. You can use .css.liquid or .scss.liquid, but I’m using .scss since Shopify looks for that extension specifically on the checkout page.

\n\n

What’s awesome about this

\n\n

In short, this allows us to use the liquid templating in the Sass that we write, and we get a whole lot of flexibility in using Compass. Since the file is renamed to have a .liquid extension, we can do things like:

\n\n
.header {\n  background: url('{{ \"awesome_background.jpg\" | asset_url }}');\n}\n.logo {\n  height: #{'{{ setttings.logo_size }}'}\n}\n
\n\n

A quick note on escaping liquid

\n\n

One very important note I’d like to make is that if you use liquid without wrapping it in quotes, Compass will try and parse it as Sass/CSS and it will fail. The way to get around that is to quote it, then interpolate the value with #{}. Before I started on this, I felt like the organization wasn’t really there, but since using this technique, the project feels right at home.

\n\n\n
\n\n
\n
\n
\n

Helium builds apps, themes, and stores on Shopify.

\n Learn more\n
\n
\n
\n
\n\n \n\n \n
\n\n\n\n\n\n\n\n\n\n\n\n","content":"\n

Thanks for Sass Shopify, but I’ll use Compass instead.

\n

I’ve recently undertaken a project to use the eCommerce platform Shopify. After switching from Magento, I’ve really come to appreciate how simple and powerful the platform is. One “out of the box” feature that comes with Shopify’s liquid templating is using Sass/SCSS. As Shopify’s backend takes care of parsing your .scss files, you don’t have to worry about compiling to .css extensions. Although this is a nice feature for small projects, it doesn’t give you any flexibility or organization with your Sass. Shopify is pretty opinionated when it comes to file structure, and since sub-folders don’t work within the assets folder, using the built-in Sass compiler simply isn’t good enough.

\n\n

Instead, I use the ruby compiler Compass to do all the heavy lifting, and it allows pretty much endless features when compiling. If you’re not familiar with Compass, check out http://compass-style.org/ for more info. Basically, I simply create a folder outside the assets folder named sass and compile the files into .scss.liquid/.css.liquid files. Within the root of my theme, the directory structure would looking something like this:

\n\n
|-- assets\n|-- config\n|-- layout\n|-- snippets\n|-- templates\n|-- sass\n    |-- styles.scss\n    |-- base\n        |-- _base.sass\n        |-- _colors.sass\n        |-- ...\n    |-- layout\n        ...\n    |-- modules\n        ...\n    |-- views\n        ...\n
\n\n

Then, in styles.scss file, I include each file in the order I want them to be loaded. styles.scss

\n\n
/* Normalize */\n@import \"base/normalize\";\n\n/* Variables*/\n@import \"base/colors\";\n@import \"base/variables\";\n\n/* Mixins */\n@import \"bourbon/bourbon\";\n@import \"layout/breakpoints\";\n@import \"base/mixins\";\n\n/* Fonts */\n@import \"base/fonts\";\n\n/* Base */\n@import \"base/base\";\n\n/* Layout */\n@import \"layout/layout\";\n@import \"layout/header\";\n@import \"layout/footer\";\n\n/* Modules */\n@import \"modules/modules\";\n@import \"modules/nav\";\n@import \"modules/shopper\";\n...\n\n/* Views */\n@import \"views/support-article\";\n...\n
\n\n

Now that the structure is setup, how do we actually create files that are accessible within the asset folder? We use some Compass config to help us out. Note that files that begin with an underscore are partials and will not processed to the assets folder. So, any partial we include will compile into a single file that will be used in our theme. In this case, styles.sass  will compile to styles.css (in the assets folder) and be renamed to styles.scss.liquid, where it will be served to the client. Here’s an example of a Compass config file: config > compass.rb

\n\n
css_dir = \"assets\"\nsass_dir = \"sass\"\njavascripts_dir = \"js\"\nsourcemap = true\noutput_style = :compressed\n\n# Saves css files as liquid\non_stylesheet_saved do |filename|\n  if File.exists?(filename)\n    # Break up the path\n    path = File.dirname(filename) + \"/\"\n    file = File.basename(filename, \".*\")\n    extension = \".scss.liquid\"\n\n    # Move the file to new location\n    FileUtils.mv filename, path + file + extension\n  end\nend\n
\n\n

What’s happening here is that after Compass compiles the Sass and saves the css files, it will rename the file to an extension we want to use. You can use .css.liquid or .scss.liquid, but I’m using .scss since Shopify looks for that extension specifically on the checkout page.

\n\n

What’s awesome about this

\n\n

In short, this allows us to use the liquid templating in the Sass that we write, and we get a whole lot of flexibility in using Compass. Since the file is renamed to have a .liquid extension, we can do things like:

\n\n
.header {\n  background: url('{{ \"awesome_background.jpg\" | asset_url }}');\n}\n.logo {\n  height: #{'{{ setttings.logo_size }}'}\n}\n
\n\n

A quick note on escaping liquid

\n\n

One very important note I’d like to make is that if you use liquid without wrapping it in quotes, Compass will try and parse it as Sass/CSS and it will fail. The way to get around that is to quote it, then interpolate the value with #{}. Before I started on this, I felt like the organization wasn’t really there, but since using this technique, the project feels right at home.

\n\n","previous":null,"url":"/blog/a-better-way-to-do-sass-with-shopify-themes","relative_path":"_posts/2016-10-10-a-better-way-to-do-sass-with-shopify-themes.md","id":"/blog/a-better-way-to-do-sass-with-shopify-themes","collection":"posts","excerpt":"Doing Shopify development with Sass in the assets folder can be limiting. Instead I choose to use Compass to compile my CSS for Shopify","draft":false,"categories":["apps"],"layout":"post","title":"A better way to do Sass with Shopify Themes","date":"2015-02-25 20:00:00 +0000","meta":{"description":"Doing Shopify development with Sass in the assets folder can be limiting. Instead I choose to use Compass to compile my CSS for Shopify projects."},"read_time":"10 minute read","permalink":"/blog/a-better-way-to-do-sass-with-shopify-themes","image":null,"author":"Nick Mealey","slug":"a-better-way-to-do-sass-with-shopify-themes","ext":".md","tags":[]},"url":"/blog/how-create-sub-collection-in-shopify-with-link-lists","relative_path":"_posts/2016-10-10-how-create-sub-collection-in-shopify-with-link-lists.md","id":"/blog/how-create-sub-collection-in-shopify-with-link-lists","collection":"posts","excerpt":"If you've used Shopify for any amount of time, you'll realize that it doesn't support creating sub categories for all your products. But it is possible.","draft":false,"categories":["apps"],"layout":"post","title":"How create sub-collection in Shopify with link lists","date":"2015-05-16 20:00:00 +0000","meta":{"title":"How create sub-collection in Shopify with link lists","description":"If you've used Shopify for any amount of time, you'll realize that it doesn't support creating sub categories for all your products. But it is possible."},"read_time":"10 minute read","permalink":"/blog/how-create-sub-collection-in-shopify-with-link-lists","image":null,"author":"Nick Mealey","slug":"how-create-sub-collection-in-shopify-with-link-lists","ext":".md","tags":[]};

How create sub-collection in Shopify with link lists

May 16, 2015

So, what is the best way to do Shopify sub-collections?

May 16, 2015

This blog post has been updated

Feb 23, 2018

Shopify has since rolled out their easy-to-use multi-level dropdown system. This article was written before this was available, thus much of the content here can be created much simpler using our Meteor Menu app for setting up sub-collection menus.


If you’ve used Shopify for any amount of time, you’ll realize that it doesn’t support creating nested categories for all your products. Truthfully, if you a million products and collections this might not be the best option for you. This methods works great if you have less than a few hundered collections.

We’ll create a very simple tree:

 Food
 - Breakfast
  - Cereal
  - etc...
- Lunch
  - Sandwich
  - etc...
- Dinner
  - Fish
  - etc...

The principle is pretty simple - create all your collections then create the hierarchy with a navigation link list. So, create a new collection and take note of the collection handle. This will act as a “parent collection”.

Then, create all your sub-collections as standard Shopify collections however you want. Nothing special about them, just standard collections, and you can choose to manually add products or by criteria. Now head over to the navigation page in Shopify and create a new link list. Name it something relevant and give it a handle that corresponds to the parent collection. Prepend the handle with a “collection-“ so that you don’t deal with namespaces in the future. In this case our navigation handle is: “collection-food”.

Add all your sub-collections to the list. You can name and reorder them however you like.

Update your theme to show your sub-collections

Add a new file in your templates folder and name it “collection.sub-collections.liquid”.

templates > collection.sub-collections.liquid

{{ collection.title }}
{% assign collection_handle = "collection-" | append: collection.handle %}
<ul>
  {% for link in linklists[collection_handle].links %}
   {% assign sub_collection = link.object %}
   <li><a href="{{ link.url }}">{{ link.title }}</a></li>
  {% endfor %}
</ul>

This is obviously a very basic pattern, but it gets you started. Basically, we’re just looping through the link list and printing out each collection as a link. You could take this a step further and get that collection’s image, description, or products. Take a look at the Shopify Docs for more details.

Now head into your Shopify admin and set the collection template to collection.sub-collections. Open that collection and you should see a breakdown of your sub-collections.

Food

Why this is a good solution

The best reason, it’s really simple. It’s easy to setup and managing, you can reorder sub-collections, change titles, and add more sub-collections with a click. It also comes with the benefit that when Shopify adds sub-collections as a feature, you’ll be ready to rock, since you already have your collections all built and organized. Questions? Email me at nick@heliumdev.com


Helium builds apps, themes, and stores on Shopify.

Learn more