Shopify theming is where it’s at. Shopify’s no-nonsense open-source templating language Liquid creates a great amount of flexibility in terms of front-end dev. However, anyone who’s done some Shopify theming knows there are a handful of gotchas. Here’s how to make your life a little easier:
This tutorial makes two assumptions:
1. You use a CSS preprocessor: Because you’re reading this article, you clearly make good life choices. It only follows that you would also use a CSS preprocessor. I don’t care which one you use: less, SASS, SCSS, Stylus (my fave) — I’m sure there are others. Since I desperately want to be popular, I’ll be using SCSS in the examples. If you are not familiar with CSS Preprocessors, I… just don’t know what to do with you.
2. You have at least a wee bit of experience with Shopify theming.: This tutorial doesn’t tell you how to do it, it tells you how to do it better 😉
These frameworks have done a lot of the groundwork for you already. No need to re-invent the wheel.
2. Namespace your Assets
Because you’re sensible, when you work on a project, chances are, your assets folder looks like this, or similar in concept:
In a shopify theme, however, your assets folder will look like this:
Seriously though, it will likely look more like this:
Oy, what a mess. This is due to a technical limitation explained here.
As your theme expands, the assets folder gets massive and frightening. Massively frightening. Massening. To retain some of your sanity, namespace your filenames, as though the filename included the folder name. Example:
Ahh, that’s better. And when your assets folder has 100+ files, you can easily locate what you’re looking for.
3. Match your SCSS and Templates
Shopify’s flexibile templating allows you to take a very modular approach to your markup and css. For simplicity’s sake, use a convention like matching your css structure with your template structure. It will make your development and maintenance a dream come true. A. Dream. Come. True.
Example theme folder (only some files included for example):
Example scss folder (again, only some files inlcluded):
Wow, life is so easy 🙂
4. Re-use your Styles for Checkout
Shopify checkout is locked-down tight; you have no control over the markup, but you do have full control over the css. You just have to remember that there are default styles you’ll probably want to overwrite.
The best approach is, as always, code re-use. So, along with your theme’s stylesheet, have a checkout stylesheet in your scss folder, that also gets output to your theme’s assets folder. (Unfortunately, it must be named checkout.css, so we can’t namespace the filename.)
Let’s add to our previous examples.
Notice I added an imports folder in the SCSS structure. Your project will likely have one (or similar): however you like to set global styles, make re-usable components, and import vendor libraries. The important thing is you can apply these styles to your checkout, making it look and feel as custom as possible.
Because your theme is sooo custom and mind-blowing, you want to offer a plethora of theme settings. Shopify makes this extremely simple for you to offer, and it allows you to create your own sensible defaults, using config/settings.html, and config/settings_data.json, respectively.
So, as you develop your theme, you may want to dig in the admin panel, set a few theme settings, and try them out. Great. And then, you may want to change your defaults in settings_data.json, and then you may notice that your admin settings have been wiped. 🙁
To avoid this, especially if you have some involved theme settings, try to plan and setup your defaults first. And at the very least, backup your admin theme settings, so when you do need to change a default, you can easily revert your changes back.