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

Create an array in Shopify's liquid

June 6, 2016

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

So it’s not as clean as something like:

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

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

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

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

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

And voila.


Helium builds apps, themes, and stores on Shopify.

Learn more