"i only speak liquid" #23: Mission: New Build 🥷

Hey all 👋!

Welcome to 'i_only_speak_liquid' by Storetasker, where active Shopify developers like me (Jean-Philippe Allard) share learnings we face daily. This is my 3r o editions! 

PS: I'm a developer on Storetasker; Apply here if you want to join Storetasker's gated network of vetted Shopify developers. 

What I've been thinking about

I'm just out of a crazy crunch , where I had two very customized landing pages to build in tight time frames. The pages were both using totally different styles than the main store. No problemo, I thought, it's not my first (or my last!) crunch, and I can juggle them and get everything out on time with minimal suffering. One thing I didn't account for, is they were both on very old legacy themes (one was on Debut 1.1!), with a ton of customizations from various devs over time. Needless to say, it was a complete mess, and it made me work a lot more evenings than I expected! Nevertheless, working on those got me thinking a lot about how to avoid those issues in my future builds. Mainly, I've been thinking about modularity, upgrade paths, merchant implication, and ease of future dev work, depending on different starting points. I see three broad categories that would cover most bases:

1. Starting from scratch

2. Starting from a Minimalist theme, such as Dawn

3. Starting from a Premium Theme, such as Flex

Starting from scratch

I think this is a bad starting point in 99% of cases. There are three main issues:

1) You'll be rebuilding a wheel that has already been built a million times. You don't need to write the cart form from nothing, when it's basically always built the same way. You don't need to redo collection pagination, when it's already a solved problem. And you definitely don't need to rebuild a schema for an image + text section yet again. Who loves building schemas, anyway?

2) However awesome you are, the tradeoff between quality, cost, and time to delivery will be a bad one. For a full-featured site, it will either cost an obscene amount of money, take a zillion years, or corners will be cut. There's simply no way a "blank-slate" start will give the same quality as a commercial theme with thousands, if not tens of thousands man-hours sunk into it.

3) Maintainability. There won't be any upgrade paths, because, well, there won't be any upgrades unless the client asks you. The web being always evolving, it might be good for the dev's wallet, but it won't be good for the clients' sanity.

Starting from a Minimalist Theme

A Minimalist, HTML/CSS first, JS second theme is the best starting point for sites that want to strike the right balance between ease of custom development, and ease of use for the merchant. Devs can implement the brand guidelines using section and theme schemas as soft guardrails, and allow the merchant to recreate what he requires within the theme customizer with just enough control to avoid visual spaghetti.

Using a theme like Dawn, upgrade paths are easy if the customizations on top of the theme are built smartly. I like to keep edits to existing CSS files such as base.css to a minimum, and duplicate sections that are close to my needs by adding scoped CSS declarations within the duplicated section using the #shopify-section- selector. This way, my CSS only applies to my custom section, and I can upgrade my theme with very little fuss whenever a new feature or bug fix is pushed, since the original theme sections are untouched. Performance would be sliiiightly better if the CSS was all in the same file, but I prefer to keep things modular for easy maintainability.

I love how easy Dawn is to work with. Every section has its own .css and .js file, and the minimal JS is easy to understand and tweak if needed. It's the best of both worlds - you can do custom spec sections with minimal complexity, on top of a full feature set where you don't need to reinvent the wheel. If I have to dev anything, Dawn is my #1 choice!

Starting from a Premium Theme

Premium themes like Flex are great for merchants that want to avoid dev work. They're easy to use, well documented, have great support, and are surprisingly flexible. I mean, if you look at Fresh, Glow or Techno, you could easily believe they're three totally different themes. But they're all built on Flex, within the Customizer, with no dev work at all.

For merchants with limited technological expertise, wanting to do their own build, resorting to a developer only for slight tweaks outside what the theme can offer, it's a fine starting point. Upgrades will also be easy as long as there are few customizations to the code, using the respective theme developer's upgrade paths.

Where premium themes are weaker is when you need to open the hood to go deeper than the presentation layer. For example, in the past, I had to modify how Flex adds products to the cart to include a minimum quantity and a pack size feature. Flex manages add-to-carts in JS. It has two main JS files totaling over 3000 lines of code, and 25 JS modules having 100-2000 lines each. While the JS is cleanly written with helpful names and comments, it's still a major undertaking to modify such a code base for a custom use case. It took much longer than if I had to do it within a less JS heavy theme. And however well you do the job, upgrades to the latest theme versions will be more complex, since it's more difficult to stay modular with edits. 

3 links you can't miss

1. Awwards - Looking for web design inspiration? There's an almost infinite amount of creativity to help you think outside the box. Here's a cool one I just stumbled on!

2. Dawn Theme Principles - Explaining in detail the philosophy behing HTML/CSS first, JS second.

3. SuperHi - Front-End tutorials with actually nice projects. If learning cool stuff like this Physics Project, this Animations Project, or this WebGL project don't motivate you to learn new things, I don't know what would!

One app I like

Bundle Builder - One thing I wouldn't touch inside a theme would be managing complex bundle logic. I had a client that had functionality like this built in jQuery on his theme, using customizer fields to manage products included in bundles. It was an unmaintainable monster that had cost over $20,000 (before I came in!), and it was broken half the time. We integrated this app, reduced code complexity, and increased merchant independence. 

One learning as a freelancer

When discussing or planning a project, take the time to understand the client needs. The real ones. Help him put his needs into words by asking the right questions. Then, using your experience through multiple clients, and the clients' knowledge of his business and industry as a guide, weigh the pros and cons together. Lastly, put the client needs above yours to make the best decision, and then commit to it no matter what.

For example, even though my work is easier when a build is on Dawn, I don't hesitate to recommend a premium theme, if I think it will fit the needs of the client better.

That's it for this issue! I hope it will give you food for thought on your next build.

Until next time!

Jean-Philippe