Debut and Shopify Sections

This project was completed while at Shopify

In March of 2016 Shopify held its first partners conference at Fort Mason’s Herbst Pavilion in San Francisco. We announced a ton of cool new features, products, and our future visions on commerce. I was even lucky enough to give a talk on the best practices of building themes on Shopify.

As a developer of Shopify themes, I was most excited for the new Online Store Editor talk by Thibaut and Russell. They introduced a new theme editor that enables merchants to have much more granular control over their shop’s design and layout.

Settings become contextual to the screen you’re looking at rather than a long list of global ones. Home page content could be added, edited, removed, and reordered without having to get lost in code. Developers became able write a single module worth of code that provided endless layout and customization options to merchants.

We gave merchants super powers.

Mario plus flower equals fire Mario

I spent nearly a year working with Thibaut, Russell, and their large team to get this feature in front of merchants and partners. In October — after a beta period of releasing it to new merchants and some partners to gather feedback — we launched the new editor to everyone.

The new theme | Debut

With the editor shipped our new default theme, Debut. This was my favourite theme to work on to date because of how closely we worked with the team implementing the back end code for sections. Just like a front end developer working with a designer can influence a layout or design, my team of front end theme developers helped guide the work done by the editor team.

Debut - default Shopify theme

This went both ways. Our team tried many approaches for how our code — mainly the JavaScript — would work within the editor. We rewrote stuff. A lot.

We also had to learn a new of thinking about building themes. Prior to sections, there were a lot of hacks that you could do to get things working the way you wanted. When I say hacks, I mean ways of using Liquid to do things it wasn’t mean to do. My favourite example was allowing merchants to order content on their home page based on a theme setting’s value matching an associated snippet file name. Now you can create multiple sections and the merchant can drag and drop them with ease.

Check out Debut and other themes with sections in our updated Theme Store.

The new editor brought a lot more eyes to themes and Liquid itself. This led to Liquid improvements to remove other hacks and non-optimal code. The push for more features, simplicity, and removal of hacks was on.

Updates to Liquid

  • A time_tag filter for semantic dates. Documentation
  • Custom size parameters for the img_url filter, including retina and cropping support
  • A format_address filter for easier printing of address. Documentation
  • New setting types for articles, urls, and image_picker
    • The new image_picker setting lets you upload files to your shop rather than the theme for easy reusability (even after switching themes)

And there is more on the horizon. Read about theme sections in more detail on the Shopify blog.