Timber: Shopify's Theme Framework

I personally talk about the benefits of Timber a lot. Designers and developers that aren’t experienced with Shopify are eager to hear how it can help them get started on our platform and I love being able to help them learn. One area I don’t talk enough about is the process involved in creating the theme framework and how it all came together.

Learn more about working with Shopify Theme Kit.

You might also like: How to Get the Most out of the Timber Theme Framework

Where Timber came from

During a one-on-one session, Shopify’s Design Director, Verne Ho, asked what type of project I wanted to work on that would bring value to Shopify. I mentioned an idea that Mark Dunkley and I had discussed a few days before — to build a starter theme that designers or developers of any skill level could quickly use to become proficient on Shopify’s Liquid templating language.

We’d take the grunt work out of learning a new language. We’d handle all the complexities of an ecommerce store. We’d make creating a customized store online easier

Theme development before Timber

Theme development on any platform is not an easy feat. There are new things to learn, quirks to discover, and processes to follow. Before Timber, theme creators could look to skeleton-like frameworks as a starting place, or download a free theme and reverse-engineer it. In each case, there was still an unstructured learning curve that caused confusion and took time to work through. Those new to Shopify would sometimes be in over their head before they even began.

A third option was to start completely from scratch. The Liquid documentation is a lot for most designers and developers to take in when new to the platform, so the amount of time needed to start from nothing was rarely available. Many theme designers that we interviewed ended up creating their own boilerplates for repeat personal use. These personal boilerplates were great for their authors, but didn’t often get out to the public so others could benefit from them.

To reach our goal of simplifying theme development, it took a lot of planning and failure to decide what Timber was going to be, and what it wasn’t.

You might also like: 4 Advanced Shopify Theming Techniques to Add to Your Workflow

Defining the scope

With the guidance of Verne and Mark, we created a small team to flush out the idea. Helen Tran joined the team as our lead designer and was adamant that the design of the yet-to-be-named framework had to be nearly invisible . We wanted to lay the groundwork of styles, but let it be a tool for others to build their designs on, not a theme that you download and publish immediately.

Should it be almost entirely Liquid tags with little HTML markup? Initially we struggled with an overall scope:

How much style should there be?
Should it strive for the breadth of Bootstrap?
Should we even include a CSS grid?
How opinionated should it be?

Like the unwritten mantra at Shopify, we strived for simplicity. We had no desire to create something as elaborate as Bootstrap, but we did want to provide all the ecommerce-related elements a theme-maker would need right out of the gate.

Defining the right mix of simplicity with an inherently complex ecommerce site took some time. Most approaches were attempted in code and then discussed openly in group chats.

We decided the framework would consist of:

All required Shopify templates and theme requirements
Basic theme settings as examples
Ecommerce-related meta content tags (Facebook, Pinterest, Twitter)
Sass instead of vanilla CSS (no Sass knowledge necessary)
Mobile first CSS grid
Brief and useful comments in the code
Documentation, documentation, documentation

Theme development after Timber

Now that Timber is healthy and active, you can start your theme with a solid code base and skip wasting time on just getting to your starting point. You don’t have to worry about how your store’s content gets rendered to the page; you only have to style it. Timber essentially takes a data-heavy project and lets you build it as if it was strictly front-end code. No more PHP or Ruby, just HTML and CSS, with a bit of pre-defined Liquid.

If you build on Shopify — or want to build on Shopify — Timber is going to make your life easier because it focuses on simplicity.

Keeping it simple

We narrowed that list down to three core values that were most important for someone choosing a framework. They are general statements, but important ones. Moreover, it places unseen features like included meta tags behind the scenes where they belong.

Though Timber’s main offering is simple, it’s full of other invisible ecommerce-ready features too. Collection sorting, deep linking to product variants, Pinterest Rich Pins, schema tags, and customer account areas all round out the ecommerce framework.

On top of all the features included, we had to remember that someone with no Liquid experience should be able to use the templates as if they had been writing it all along. I constantly put myself in the shoes of other developers and asked: How can we make this framework as simple to use as possible. Anything that would make their life easier would be incorporated into Timber.

Realizing what didn't work

I was the only developer actively on the project, so it was easy to let bad code slip through the cracks. Luckily, the rest of Shopify’s front-end development team was only a pull request away for code reviews. We’ve all worked with frameworks and they had endless suggestions to make Timber easier to develop on.Sometimes trying to make a developer’s job easier didn’t work. Hacks, Liquid workarounds, and overly complex CSS would make their way into the code. They got the job done, but complexity was exactly what we wanted to avoid.

By seeking out code reviews and asking for help, it led to benefits like:

Now that it has launched and people have started using Timber, the theme community continues to voice their opinions on what should and shouldn’t be included. Feature requests, bug reports, and even the occasional typo are brought up simply by making the code available to anyone.

Where Timber is going

Timber will continue to be an ongoing project. It has had a handful of large updates so far, and many smaller ones along the way.

New features like collection sorting and variant images are supported by Timber in line with their launch, so you can be sure the latest features are included when you download it. We’ll also be addressing bugs found in the current codebase, and looking for other forward-thinking approaches to front-end development.

One larger task on the potential roadmap is to incorporate Grunt.js to allow modularizing styles into separate Sass stylesheets. We currently offer it as a
standalone task , but Timber itself doesn’t use it. That means all styles are
confined to a single stylesheet.

If we decide to go down this route, we’ll create basic and advanced usages of Timber. The current basic approach will still be available as it is today, just with a few configuration files and folders to ignore in the master repo. If a developer wants to make use of Grunt, they can use the development folders and Grunt tasks to customize their build experience. This is still up for debate, so you can voice your opinion here .

What it means for partners

By providing Liquid templates, modularized Liquid snippets, a CSS framework, some base theme settings, and ajax cart integration, you can spend your design and development time on what users will see and interact with rather than backend content integration.Timber is only as good as what people build with it. Partners should think of their ecommerce store as a completely blank canvas and focus on design and user experience instead of the complexities of an ecommerce site.

The future of Shopify Themes

We’re currently overhauling our free themes to be mainly based on Timber, including our latest theme, Supply . By consolidating our themes to use the same base structure, we’ll be able to provide a more unified level of support to our merchants (i.e. less hacks, more structure), and update them much more efficiently as new features are released.

Let me know in the comments section or at @cshold if you've used Timber to create something cool. I'd love to see the different ways that Partners are using the tool.

You might also like:The Essential List of Resources for Shopify Theme Development

Carson Shold