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.
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.
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.
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
time_tagfilter for semantic dates. Documentation
- Custom size parameters for the
img_urlfilter, including retina and cropping support
format_addressfilter for easier printing of address. Documentation
- New setting types for articles, urls, and image_picker
- The new
image_pickersetting lets you upload files to your shop rather than the theme for easy reusability (even after switching themes)
- The new
And there is more on the horizon. Read about theme sections in more detail on the Shopify blog.