Among all the people who use Shopify, there is a huge spectrum of background knowledge and expectations. Some sign up because they want to start selling something right away. Shopify is great for them because they can choose one of our beautiful themes and get going without any hassle.

Others are web designers who need to create the perfect theme to showcase their clients’ unique products. Shopify is great for them too because it gives them complete control over a theme’s code.

But what about people who just want to change some colors or add a custom logo to the site, but don’t know HTML or CSS? What if you’re a designer creating that perfect theme, but you want your client to be able to make some predictable changes in the future?

This has been an issue with Shopify for a while, and we’re pleased today to announce new features which will empower both shop owners and designers in some really exciting ways.

The theme settings form

We have been thinking about the problem of theme customization for a long time, and we’ve looked at a lot of other products to see how they’ve tackled it. Eventually we realized that the best way forward was to let theme authors use their existing HTML and Liquid knowledge to make their themes as customizable as they wish, in the way that makes the most sense for that particular theme.

A designer can now include a file called settings.html in a theme. The HTML in this file contains form inputs (text fields, drop-down menus, checkboxes, and so forth) which are wrapped up in a form and shown at the top of the theme editor screen. Shopify juggles the HTML a bit before showing it to the user, and this makes it easy for dynamic controls like color pickers to be included by the theme author with nothing more than the addition of a CSS class on a text field.

The names given by the theme author to each form input correspond directly to properties on the new settings object exposed in each of the theme’s layouts and templates. Those properties contain the user-specified values entered in the form and can be used to customize the templates in whatever ways the theme author can dream up. We updated all of the standard themes available in each shop’s theme gallery to support customization in this way, and they allow the user to change fonts and colors, add site logos, and more.

There’s a lot of potential here beyond what we’ve already done with the standard themes, and we can’t wait to see what the Shopify design community comes up with.

Liquid assets

People have wanted this one for a while, and it’s finally here: now you can generate your CSS files using Liquid. Just put a .css.liquid extension on any file in your theme’s assets folder and Shopify will generate a corresponding .css file for you to reference in your layout.

The generated file is only updated when either its source .liquid file or the theme’s settings are saved, so settings is the only Liquid variable available within these files (all the usual tags and filters can still be used though).

Not only does this dovetail nicely with the new settings forms, it also provides theme authors with an easy and powerful way to write CSS that doesn’t become a headache to maintain.

Snippets

Another new feature which goes well with theme customization is snippets. Snippets are like mini-templates which can be included at any point within another template, or even another snippet. They live in their own folder within the theme and can be managed straight from the theme editor. Snippets are great for keeping a theme’s code organized, especially when you want the user to be able to change whole chunks of a page through the theme settings form.

As an example, a theme author might create a number of snippets to go in the shop’s sidebar, such as a product collection or blog feed, an “about us” blurb, and a notification of seasonal sale prices. They could then be easily swapped in and out with a few drop-down menus in the settings form.

Alternate layouts

One layout not flexible enough for you? Now you can create alternate layouts in the theme editor which can be associated with different templates by using the layout tag within that template. If your multiple layouts have a lot in common, you can use snippets to keep from repeating yourself.

Alternate templates

Sometimes one of your products or collections is just so exceptional that it deserves a style all its own. Or maybe your blogs and pages communicate such diverse messages that each should have its own look and feel. This kind of thing used to be a hassle for theme designers, but now it’s easy because you can create alternate versions of your templates to be used in specific circumstances.

Just as with alternate layouts, you can create these template variants from the theme editor. And when editing a product, collection, blog, or page, you’ll find a drop-down menu in the sidebar to select which template it will use.

One more thing…

Being able to generate stylesheets from Liquid is a huge win, but CSS files aren’t the only theme assets you can generate with Liquid. Check this out:

I think you’ll agree that with these improvements to Shopify’s theme system, web designers have an incredibly powerful creative platform at their disposal. More information on how to use these new tools can be found on our wiki:

• Theme Settings
• Including snippets in other templates
• Specifying alternate layouts