\\\\\\\\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\\\\\\\":[]};\\\\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
\\\\n

How create sub-collection in Shopify with link lists

\\\\n May 16, 2015\\\\n
\\\\n
\\\\n Nick Mealey\\\\n 10 minute read\\\\n
\\\\n
\\\\n
\\\\n\\\\n
\\\\n
\\\\n \\\\n

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

\\\\n

May 16, 2015

\\\\n\\\\n

This blog post has been updated

\\\\n

Feb 23, 2018

\\\\n\\\\n

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.

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

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.

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

We’ll create a very simple tree:

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

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”.

\\\\n\\\\n

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”.

\\\\n\\\\n

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

\\\\n\\\\n

Update your theme to show your sub-collections

\\\\n

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

\\\\n\\\\n

templates > collection.sub-collections.liquid

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

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.

\\\\n\\\\n

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.

\\\\n\\\\n

Food

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

Why this is a good solution

\\\\n\\\\n

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

\\\\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

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

\\\\n

May 16, 2015

\\\\n\\\\n

This blog post has been updated

\\\\n

Feb 23, 2018

\\\\n\\\\n

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.

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

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.

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

We’ll create a very simple tree:

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

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”.

\\\\n\\\\n

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”.

\\\\n\\\\n

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

\\\\n\\\\n

Update your theme to show your sub-collections

\\\\n

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

\\\\n\\\\n

templates > collection.sub-collections.liquid

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

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.

\\\\n\\\\n

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.

\\\\n\\\\n

Food

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

Why this is a good solution

\\\\n\\\\n

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

\\\\n\\\\n\\\",\\\"previous\\\":{\\\"next\\\":{\\\"path\\\":\\\"_posts/2016-10-10-how-create-sub-collection-in-shopify-with-link-lists.md\\\",\\\"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\\\",\\\"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\\\":[]},\\\"path\\\":\\\"_posts/2016-10-10-a-better-way-to-do-sass-with-shopify-themes.md\\\",\\\"output\\\":\\\"\\\\n\\\\n \\\\n \\\\n A better way to do Sass with Shopify Themes\\\\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 \\\\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\\\":[]},\\\"url\\\":\\\"/blog/introducing-relatable\\\",\\\"relative_path\\\":\\\"_posts/2016-04-08-introducing-relatable.md\\\",\\\"id\\\":\\\"/blog/introducing-relatable\\\",\\\"collection\\\":\\\"posts\\\",\\\"excerpt\\\":\\\"

Today we’re excited to launch Relatable

\\\\n\\\\n\\\",\\\"draft\\\":false,\\\"categories\\\":[\\\"apps\\\"],\\\"layout\\\":\\\"post\\\",\\\"title\\\":\\\"Introducing Relatable\\\",\\\"date\\\":\\\"2016-04-08 20:00:00 +0000\\\",\\\"meta\\\":{\\\"title\\\":\\\"Introducing Relatable\\\",\\\"description\\\":\\\"Keeping things organized within a Shopify store can be hard, so we built Relatable to help with that.\\\"},\\\"read_time\\\":\\\"2 minute read\\\",\\\"permalink\\\":\\\"/blog/introducing-relatable\\\",\\\"image\\\":null,\\\"author\\\":\\\"Nick Mealey\\\",\\\"slug\\\":\\\"introducing-relatable\\\",\\\"ext\\\":\\\".md\\\",\\\"tags\\\":[]};\\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
\\n

Introducing Relatable

\\n April 8, 2016\\n
\\n
\\n Nick Mealey\\n 2 minute read\\n
\\n
\\n
\\n\\n
\\n
\\n

Today we’re excited to launch Relatable

\\n\\n

We’ve always had a little trouble when a client asked us to create some link between different Shopify resources. For example, how do you quickly and easily relate a list of articles to a product without digging into metafields, link lists, or some hack to allow the client to control the content. It’s always been a challenge to build this sort of functionality, so we built an app that lets you do just that - and it’s not hacky at all.

\\n\\n

Born from real projects

\\n

We didn’t build this while fantasizing about a magical app that would change the world. We had real people wanting this sort of functionality, and we built it so other developers can overcome the same challenges we faced.

\\n\\n

Built for developers

\\n

We built this app through and through for developers who want to take Shopify store to the next level. Check out the docs.

\\n\\n

Getting started

\\n

For now, the app is free. That might not always be the case, but if you install it today it will be for you forever. We’re actively seeking feedback, so take a look and see what you think!

\\n\\n

Visit Relatable

\\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\":\"

Today we’re excited to launch Relatable

\\n\\n

We’ve always had a little trouble when a client asked us to create some link between different Shopify resources. For example, how do you quickly and easily relate a list of articles to a product without digging into metafields, link lists, or some hack to allow the client to control the content. It’s always been a challenge to build this sort of functionality, so we built an app that lets you do just that - and it’s not hacky at all.

\\n\\n

Born from real projects

\\n

We didn’t build this while fantasizing about a magical app that would change the world. We had real people wanting this sort of functionality, and we built it so other developers can overcome the same challenges we faced.

\\n\\n

Built for developers

\\n

We built this app through and through for developers who want to take Shopify store to the next level. Check out the docs.

\\n\\n

Getting started

\\n

For now, the app is free. That might not always be the case, but if you install it today it will be for you forever. We’re actively seeking feedback, so take a look and see what you think!

\\n\\n

Visit Relatable

\\n\",\"previous\":{\"next\":{\"path\":\"_posts/2016-04-08-introducing-relatable.md\",\"url\":\"/blog/introducing-relatable\",\"relative_path\":\"_posts/2016-04-08-introducing-relatable.md\",\"id\":\"/blog/introducing-relatable\",\"collection\":\"posts\",\"draft\":false,\"categories\":[\"apps\"],\"layout\":\"post\",\"title\":\"Introducing Relatable\",\"date\":\"2016-04-08 20:00:00 +0000\",\"meta\":{\"title\":\"Introducing Relatable\",\"description\":\"Keeping things organized within a Shopify store can be hard, so we built Relatable to help with that.\"},\"read_time\":\"2 minute read\",\"permalink\":\"/blog/introducing-relatable\",\"image\":null,\"author\":\"Nick Mealey\",\"slug\":\"introducing-relatable\",\"ext\":\".md\",\"tags\":[]},\"path\":\"_posts/2016-10-10-how-create-sub-collection-in-shopify-with-link-lists.md\",\"output\":\"\\n\\n \\n \\n How create sub-collection in Shopify with link lists\\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 \\\\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\\\":[]};\\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
\\n

How create sub-collection in Shopify with link lists

\\n May 16, 2015\\n
\\n
\\n Nick Mealey\\n 10 minute read\\n
\\n
\\n
\\n\\n
\\n
\\n \\n

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

\\n

May 16, 2015

\\n\\n

This blog post has been updated

\\n

Feb 23, 2018

\\n\\n

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.

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

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.

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

We’ll create a very simple tree:

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

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”.

\\n\\n

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”.

\\n\\n

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

\\n\\n

Update your theme to show your sub-collections

\\n

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

\\n\\n

templates > collection.sub-collections.liquid

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

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.

\\n\\n

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.

\\n\\n

Food

\\n\\n\\n

Why this is a good solution

\\n\\n

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

\\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

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

\\n

May 16, 2015

\\n\\n

This blog post has been updated

\\n

Feb 23, 2018

\\n\\n

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.

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

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.

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

We’ll create a very simple tree:

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

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”.

\\n\\n

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”.

\\n\\n

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

\\n\\n

Update your theme to show your sub-collections

\\n

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

\\n\\n

templates > collection.sub-collections.liquid

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

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.

\\n\\n

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.

\\n\\n

Food

\\n\\n\\n

Why this is a good solution

\\n\\n

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

\\n\\n\",\"previous\":{\"path\":\"_posts/2016-10-10-a-better-way-to-do-sass-with-shopify-themes.md\",\"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\",\"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\":[]},\"url\":\"/blog/introducing-relatable\",\"relative_path\":\"_posts/2016-04-08-introducing-relatable.md\",\"id\":\"/blog/introducing-relatable\",\"collection\":\"posts\",\"excerpt\":\"

Today we’re excited to launch Relatable

\\n\\n\",\"draft\":false,\"categories\":[\"apps\"],\"layout\":\"post\",\"title\":\"Introducing Relatable\",\"date\":\"2016-04-08 20:00:00 +0000\",\"meta\":{\"title\":\"Introducing Relatable\",\"description\":\"Keeping things organized within a Shopify store can be hard, so we built Relatable to help with that.\"},\"read_time\":\"2 minute read\",\"permalink\":\"/blog/introducing-relatable\",\"image\":null,\"author\":\"Nick Mealey\",\"slug\":\"introducing-relatable\",\"ext\":\".md\",\"tags\":[]},\"url\":\"/blog/create-an-array-in-shopifys-liquid\",\"relative_path\":\"_posts/2016-10-10-create-an-array-in-shopifys-liquid.md\",\"id\":\"/blog/create-an-array-in-shopifys-liquid\",\"collection\":\"posts\",\"excerpt\":\"A quick way to create an array in Shopify's liquid.\",\"draft\":false,\"categories\":[\"apps\"],\"layout\":\"post\",\"title\":\"Create an array in Shopify's liquid\",\"date\":\"2016-06-06 20:00:00 +0000\",\"meta\":{\"description\":\"A quick way to create an array in Shopify's liquid.\"},\"read_time\":\"1 minute read\",\"permalink\":\"/blog/create-an-array-in-shopifys-liquid\",\"image\":null,\"author\":\"Nick Mealey\",\"slug\":\"create-an-array-in-shopifys-liquid\",\"ext\":\".md\",\"tags\":[]};\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
\n

Create an array in Shopify's liquid

\n June 6, 2016\n
\n
\n Nick Mealey\n 1 minute read\n
\n
\n
\n\n
\n
\n

According to Shopify’s documentation, you can’t create arrays with liquid.

\n\n

So it’s not as clean as something like:

\n\n
{% assign fruits = [\"orange\", \"apple\", \"peach\"] %}
\n\n

But instead you can create accessible arrays in liquid using the split filter:

\n\n
{% assign fruits = \"orange,apple,peach\" | split: ',' %}
\n\n

Even though is not particularly elegant, it does the job. You can then loop over this array and do whatever you like:

\n\n
{% for fruit in fruits %}\n  {{ fruit }}\n{% endfor %}
\n\n

And voila.

\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":"

According to Shopify’s documentation, you can’t create arrays with liquid.

\n\n

So it’s not as clean as something like:

\n\n
{% assign fruits = [\"orange\", \"apple\", \"peach\"] %}
\n\n

But instead you can create accessible arrays in liquid using the split filter:

\n\n
{% assign fruits = \"orange,apple,peach\" | split: ',' %}
\n\n

Even though is not particularly elegant, it does the job. You can then loop over this array and do whatever you like:

\n\n
{% for fruit in fruits %}\n  {{ fruit }}\n{% endfor %}
\n\n

And voila.

\n","previous":{"next":{"path":"_posts/2016-10-10-create-an-array-in-shopifys-liquid.md","url":"/blog/create-an-array-in-shopifys-liquid","relative_path":"_posts/2016-10-10-create-an-array-in-shopifys-liquid.md","id":"/blog/create-an-array-in-shopifys-liquid","collection":"posts","draft":false,"categories":["apps"],"layout":"post","title":"Create an array in Shopify's liquid","date":"2016-06-06 20:00:00 +0000","meta":{"description":"A quick way to create an array in Shopify's liquid."},"read_time":"1 minute read","permalink":"/blog/create-an-array-in-shopifys-liquid","image":null,"author":"Nick Mealey","slug":"create-an-array-in-shopifys-liquid","ext":".md","tags":[]},"path":"_posts/2016-04-08-introducing-relatable.md","output":"\n\n \n \n Introducing Relatable\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 \\\\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\\\":[]};\\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
\\n

How create sub-collection in Shopify with link lists

\\n May 16, 2015\\n
\\n
\\n Nick Mealey\\n 10 minute read\\n
\\n
\\n
\\n\\n
\\n
\\n \\n

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

\\n

May 16, 2015

\\n\\n

This blog post has been updated

\\n

Feb 23, 2018

\\n\\n

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.

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

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.

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

We’ll create a very simple tree:

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

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”.

\\n\\n

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”.

\\n\\n

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

\\n\\n

Update your theme to show your sub-collections

\\n

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

\\n\\n

templates > collection.sub-collections.liquid

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

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.

\\n\\n

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.

\\n\\n

Food

\\n\\n\\n

Why this is a good solution

\\n\\n

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

\\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

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

\\n

May 16, 2015

\\n\\n

This blog post has been updated

\\n

Feb 23, 2018

\\n\\n

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.

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

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.

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

We’ll create a very simple tree:

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

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”.

\\n\\n

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”.

\\n\\n

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

\\n\\n

Update your theme to show your sub-collections

\\n

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

\\n\\n

templates > collection.sub-collections.liquid

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

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.

\\n\\n

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.

\\n\\n

Food

\\n\\n\\n

Why this is a good solution

\\n\\n

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

\\n\\n\",\"previous\":{\"next\":{\"path\":\"_posts/2016-10-10-how-create-sub-collection-in-shopify-with-link-lists.md\",\"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\",\"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\":[]},\"path\":\"_posts/2016-10-10-a-better-way-to-do-sass-with-shopify-themes.md\",\"output\":\"\\n\\n \\n \\n A better way to do Sass with Shopify Themes\\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 \\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\":[]},\"url\":\"/blog/introducing-relatable\",\"relative_path\":\"_posts/2016-04-08-introducing-relatable.md\",\"id\":\"/blog/introducing-relatable\",\"collection\":\"posts\",\"excerpt\":\"

Today we’re excited to launch Relatable

\\n\\n\",\"draft\":false,\"categories\":[\"apps\"],\"layout\":\"post\",\"title\":\"Introducing Relatable\",\"date\":\"2016-04-08 20:00:00 +0000\",\"meta\":{\"title\":\"Introducing Relatable\",\"description\":\"Keeping things organized within a Shopify store can be hard, so we built Relatable to help with that.\"},\"read_time\":\"2 minute read\",\"permalink\":\"/blog/introducing-relatable\",\"image\":null,\"author\":\"Nick Mealey\",\"slug\":\"introducing-relatable\",\"ext\":\".md\",\"tags\":[]};\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
\n

Introducing Relatable

\n April 8, 2016\n
\n
\n Nick Mealey\n 2 minute read\n
\n
\n
\n\n
\n
\n

Today we’re excited to launch Relatable

\n\n

We’ve always had a little trouble when a client asked us to create some link between different Shopify resources. For example, how do you quickly and easily relate a list of articles to a product without digging into metafields, link lists, or some hack to allow the client to control the content. It’s always been a challenge to build this sort of functionality, so we built an app that lets you do just that - and it’s not hacky at all.

\n\n

Born from real projects

\n

We didn’t build this while fantasizing about a magical app that would change the world. We had real people wanting this sort of functionality, and we built it so other developers can overcome the same challenges we faced.

\n\n

Built for developers

\n

We built this app through and through for developers who want to take Shopify store to the next level. Check out the docs.

\n\n

Getting started

\n

For now, the app is free. That might not always be the case, but if you install it today it will be for you forever. We’re actively seeking feedback, so take a look and see what you think!

\n\n

Visit Relatable

\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":"

Today we’re excited to launch Relatable

\n\n

We’ve always had a little trouble when a client asked us to create some link between different Shopify resources. For example, how do you quickly and easily relate a list of articles to a product without digging into metafields, link lists, or some hack to allow the client to control the content. It’s always been a challenge to build this sort of functionality, so we built an app that lets you do just that - and it’s not hacky at all.

\n\n

Born from real projects

\n

We didn’t build this while fantasizing about a magical app that would change the world. We had real people wanting this sort of functionality, and we built it so other developers can overcome the same challenges we faced.

\n\n

Built for developers

\n

We built this app through and through for developers who want to take Shopify store to the next level. Check out the docs.

\n\n

Getting started

\n

For now, the app is free. That might not always be the case, but if you install it today it will be for you forever. We’re actively seeking feedback, so take a look and see what you think!

\n\n

Visit Relatable

\n","previous":{"path":"_posts/2016-10-10-how-create-sub-collection-in-shopify-with-link-lists.md","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","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":[]},"url":"/blog/introducing-relatable","relative_path":"_posts/2016-04-08-introducing-relatable.md","id":"/blog/introducing-relatable","collection":"posts","excerpt":"

Today we’re excited to launch Relatable

\n\n","draft":false,"categories":["apps"],"layout":"post","title":"Introducing Relatable","date":"2016-04-08 20:00:00 +0000","meta":{"title":"Introducing Relatable","description":"Keeping things organized within a Shopify store can be hard, so we built Relatable to help with that."},"read_time":"2 minute read","permalink":"/blog/introducing-relatable","image":null,"author":"Nick Mealey","slug":"introducing-relatable","ext":".md","tags":[]},"url":"/blog/create-an-array-in-shopifys-liquid","relative_path":"_posts/2016-10-10-create-an-array-in-shopifys-liquid.md","id":"/blog/create-an-array-in-shopifys-liquid","collection":"posts","excerpt":"A quick way to create an array in Shopify's liquid.","draft":false,"categories":["apps"],"layout":"post","title":"Create an array in Shopify's liquid","date":"2016-06-06 20:00:00 +0000","meta":{"description":"A quick way to create an array in Shopify's liquid."},"read_time":"1 minute read","permalink":"/blog/create-an-array-in-shopifys-liquid","image":null,"author":"Nick Mealey","slug":"create-an-array-in-shopifys-liquid","ext":".md","tags":[]},"url":"/blog/common-pitfalls-when-developing-a-shopify-theme","relative_path":"_posts/2016-10-10-5-common-pitfalls-when-developing-a-shopify-theme.md","id":"/blog/5-common-pitfalls-when-developing-a-shopify-theme","collection":"posts","excerpt":"Learn some tips on developing Shopify themes and some pitfalls to avoid. Build Shopify themes that perform and are easy to update and edit.","draft":false,"categories":["apps"],"layout":"post","title":"5 Common Pitfalls when Developing a Shopify Theme","date":"2016-10-10 20:00:00 +0000","meta":{"description":"Learn some tips on developing Shopify themes and some pitfalls to avoid. Build Shopify themes that perform and are easy to update and edit."},"read_time":"10 minute read","permalink":"/blog/common-pitfalls-when-developing-a-shopify-theme","image":null,"author":"Nick Mealey","slug":"5-common-pitfalls-when-developing-a-shopify-theme","ext":".md","tags":[]};

5 Common Pitfalls when Developing a Shopify Theme

October 10, 2016

I’ve worked with a fair amount of Shopify themes at this point, and there’s some trends I’ve noticed over time. Here’s some tips to avoid while you set out to build a Shopify theme.

1. Not thinking of others.

Remember that you’re not the only one working on your theme. Most clients will at least make small changes to your markup, CSS, or even JavaScript. The chances of another developer working on your theme is nearly absolute. As you build your theme, write it in such a way that others can easily jump in and change things.

2. Not making good use of snippets.

I find so often that themes are littered with conditional logic that’s hard to follow and takes away from the readability of the markup. Many themes I’ve worked with don’t even consider using this in theme.liquid. Why not break it up a bit:

<!DOCTYPE html>
<html>
  <head>
    {{ content_for_header }}
    {% include 'head' %}
  </head>
  <body>
    {% include 'header' %}
    <main id="main">
      {{ content_for_layout }}
    </main>
    {% include 'footer' %}
  </body>
</html>

This is a simple example, but there’s no reason for this file to be much longer. It’s better to have a long list of snippet files than html that is impossible to read and gain little context. Snippets provide a way to organize content logically so that the markup is easy to follow. Context is king. Remember that snippets inherit variables declared from where it was defined.

{% assign color = "blue" %}
{% include 'color-picker' %}

snippets/color-picker.liquid

Color is {{ color }}
// "Color is blue"

3. Indenting mayhem.

Indentation is the programmer’s punctuation. It gives context and clearly identifies what goes where. With a ton of frequency I run into html that looks like this:

<div><div><p>You're cart has
{{ cart.items.size }} items in it.
</p>
  <h2>Shipping Estimate</h2>


  <span class=" blue">  {% if color == "blue" %}
   Thanks for your order! {% endif %}
    </span>
   </div>




<div> </div></div>

Most of the time I end up indenting this myself so I can read it and understand what’s going on. Child tags should always be indented from their parents. It’s best to use soft spaces in your text editor so spacing is consistent across editors.

Formatting this might better look like this:

<div>
  <div>
    <p>You're cart has {{ cart.items.size }} items in it.</p>
    <h2>Shipping Estimate</h2>
    <span class=" blue">
      {% if color == "blue" %}Thanks for your order!{% endif %}
    </span>
  </div>
  <div></div>
</div>

But what about liquid indentation?

You’d probably be tempted to use a html formatter like Dirty Markup, but you’d probably run into some issues because liquid code is embedded inside your code. Sometimes a tool like this is really handy, but make sure you’re looking at your code and organizing it for the best readability.

So, how should you indent liquid? What’s better?

// Example #1:
<ul>
  <li>One</li>
  <li>Two</li>
  {% if three %}
  <li>Three</li>
  {% endif %}
</ul>

// Example #2:
<ul>
  <li>One</li>
  <li>Two</li>
  {% if three %}
    <li>Three</li>
  {% endif %}
</ul>

The subtle difference between these two is the last list item where the liquid conditional indents its contents. The argument for the first would be that it preserves the html indentation. Although the question must be raised - for whom is the indentation written? For the developer or someone viewing the page source? I would opt for the second since its readability is more clear.

Just remember - someone along the way is going to read your code, help them out by indenting everything (unless you want to make it cryptic).

4. Excessive use of !important CSS flags.

The CSS !important flag is one that should only be used on rare occasions. It’s an absolute last resort, not a handy tool for a lazy developer. When you keep in mind that other developers will be building or changing your CSS, you’ll reconsider how you structure selectors, but you as the developer will benefit the most gain.

The problem that arises from this is that it becomes very difficult to override properties defined with an !important flag. In fact, the only way to overriding it is to declare it after while also delcaring the flag. CSS really works off the principle of inheritance. I’ve seen this before in themes:

p {
  font-size: 16px !important;
}

Hm, so every single paragraph tag is forced to be 16px? Anytime you decide a certain context warrants a different size your only option is throw another important tag over it. This results in a theme with hundreds upon hundreds of !important tags. The snowball effect.

Before using this flag, ask the question -

Could this property ever change past this point?

If the answer is yes, don’t use it. It will create unnecessary hardship later down the road.

It’s better to use well qualified classes and selectors.

Instead of using the ‘one size fits all’ approach, it’s much better to use selectors that further define what you’re after. This puts a whole new meaning to “Cascading Style Sheets”. Take a look at this great article from Mozilla. This becomes even more powerful when using Sass. Here’s a good example:

<div class="product">
  <span class="price">{{ product.price }}</span>
</div>

// Bad
.product-price {
  font-weight: bold !important;
}

// Good
.product {
  .product-price {
    font-weight: bold;
  }
}

In this case you’re defining the font-weight based on the context, instead of universally declaring .product-price to be bold.

5. Not playing nice with JavaScript.

If you’re writing even a single line of JavaScript in a Shopify theme, you should read “Use JavaScript responsibly” from the Shopify docs. The three golden rules they list are essential. Although this article is specifically referring to app development, it directly applies to theme development as well. Consider using a framework to improve your JavaScript organization.

Why this is important

Building great Shopify themes and websites in general means staying organized and writing quality code. Even though the end user never sees a line of CSS or HTML, the developers who come after you will. It’s like a house that’s well put together on the outside but is a total wreck when you step inside. Remember that writing code that is readable is just as important as writing code that work efficiently to viewers.

More reading

Take a look at 8 Development Tips for Building Better Custom Shopify Sites, which is an article I wrote for Shopify.


Helium builds apps, themes, and stores on Shopify.

Learn more