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 
5 Tips for Better Shopify Theming
1. Use a Framework as a Starting Point
Whatever your CSS preferences are, whether LESS or SASS, Foundation or Bootstrap (or BEM), there is a Shopify theme framework out there for you.
- Shopify Timber (https://github.com/Shopify/Timber/) – Built from the ground up using a BEM-style grid system
- Bootstrap for Shopify (http://bootstrapforshopify.com/)
- Cam Shopify Theme Framework (https://github.com/Cam/Shopify-Theme-Framework) – built using Foundation
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:
- css/
- fonts/
- js/
- images/
In a shopify theme, however, your assets folder will look like this:
Seriously though, it will likely look more like this:
- cat.gif
- jquery.js
- my_script.js
- my_theme.css
- loud_repeated_beeping_noise.mp3
- one_million_cats.gif
- serif_font.ttf
- some.jquery.plugin.js
- some.css.library.css
- zoolander.jpg
- …
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:
- audio_loud_repeated_beeping_noise.mp3
- css_some.css.library.css
- css_my_theme.css
- fonts_serif_font.ttf
- images_cat.gif
- images_one_million_cats.gif
- images_zoolander.jpg
- js_jquery.js
- js_my_script.js
- js_some.jquery.plugin.js
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):
- assets/
- css_mytheme.css
- layout/
- theme.liquid
- snippets/
- product-grid-item.liquid
- templates/
- collection.liquid
Example scss folder (again, only some files inlcluded):
- css_mytheme.scss
- layout/
- _theme.scss
- snippets/
- _product-grid-item.scss
- templates/
- _collection.scss
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.
Theme Folder:
- assets/
- checkout.css
- css_mytheme.css
- layout/
- theme.liquid
- snippets/
- product-grid-item.liquid
- templates/
- collection.liquid
SCSS Folder:
- checkout.scss
- css_mytheme.scss
- checkout/
- _checkout-reset.scss
- _checkout.scss
- layout/
- _theme.scss
- imports/
- snippets/
- _product-grid-item.scss
- templates/
- _collection.scss
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.
Related: 10 Ways to Improve Your eCommerce Checkout
5. Batch Changes to your Theme’s Settings
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.
Related: 7 Awesome Responsive Shopify Themes
Well, there you have it. There are some gotchas with Shopify theme development (as with any theme development), but all in all, once you dig into it, you will fall in love. Happy coding
More resources you may (read: will) find useful:
The post Mini Tutorial: 5 Tips for Better Shopify Theming appeared first on Demac Media.
