26 Aug 08-09
Theme customization for everyone
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
settingsobject 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.liquidextension on any file in your theme’s assets folder and Shopify will generate a corresponding
.cssfile for you to reference in your layout.
The generated file is only updated when either its source
.liquidfile or the theme’s settings are saved, so
settingsis 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:
Comments
August 26, 2009 02:42PM EDT
This is wonderful, page templates and snippets have been on my wish list for so long. Very excited!
August 26, 2009 02:42PM EDT
This seems like a good step in the right direction. The snippets (or include files if you will) is certainly a handy and clean way to enhance a template(s). One aspect of themes that continues to bug me is the enforcement that all images referenced in the theme CSS and layouts has to be in a single folder. No hierarchy for images make complex layouts painful to work with. Any plans to allow child folders for images or assets?
August 26, 2009 02:42PM EDT
Jeff: Simply create a new variant of the collection.liquid and call it collection.pink.liquid . Then in the code you can add {% layout ‘pink_layout’ %} which will tell Shopify to use the pink_layout instead of the standard theme.liquid .
August 26, 2009 02:42PM EDT
Alternate templates and layouts may be a godsend for my site, but I’m wondering how they will work in practice. I’m using the moderno theme right now, pretty heavily modified. This theme has a main theme template for the header and footer and then all the other templates are contained within it. Let’s say I wanted to change the color scheme and graphics of the entire site depending on which collection you were in, including our store logo (because the logo background color needs to change). Is this possible with alternate templates? I’m just not sure because every page is actually comprised of at least two templates.
August 26, 2009 02:42PM EDT
Very very intriguing!
I agree – this is just scratching the surface.
I’ve never heard of Liquid before, but it seems that if you went with SVG files directly (and, um, browser support was much better) then you could just use CSS.
By that I mean, each of those fish should have class=“fish” and specify the fill/stroke colors directly in your CSS. Whatever processing goes on in the theme editor would just ensure that the fish’s colors are tied to the settings bg color or whatever.
Very cool stuff!
August 26, 2009 02:42PM EDT
Tobi: Thanks, after re-reading a couple times I sort of figured it would work something like that, but wasn’t sure. I will try it this weekend :) Seems like exactly what I’ve been wishing for, we carry some pretty disparate brands in terms of brand image.
August 26, 2009 02:42PM EDT
Good point Jeff :)
That’s one of the things that makes SVG so cool, and why it’s a shame that limited browser support forces us to resort to PNG conversion in the first place. Hopefully if these kinds of workarounds are used more and more, then SVG will gain more support from web designers, platform developers, and browsers across the board.
Hunkybill: no plans for that at the moment, but I’m glad you like what you see here anyway :)
August 26, 2009 02:42PM EDT
This is just plain awesomeness with a bow. I can’t wait to play with this next week on a new project I am starting. My one and only complaint is from a UI perspective. Can we get this moved under theme assets or into the sidebar where there is plenty of room? It seems sort of thrown in there and it’s totally in the way for everyday work flow. When going to the theme editor that’s just not the first thing you are going to be looking for to work on…. it’s the liquid/asset files.
August 26, 2009 02:42PM EDT
Super cool use of SVG! Very exciting.
I’m one of the developers on the open source SVG Web project, which uses Flash in order to bring SVG to Internet Explorer (http://code.google.com/p/svgweb). We don’t currently support displaying SVG in background images like you are doing in your video, but you can embed it in other ways. It’s currently in alpha but perhaps it can help what you are doing; we are always looking for new testers and developers!
Best,
Brad Neuberg
http://codinginparadise.org
August 26, 2009 02:42PM EDT
Good evening!
Sounds like you have been busy with all the new changes we will be seeing. I surely want to learn as much as I can about doing some changing at least on my homepage.
Thanks for all your work and support.
Rita Kontny
August 26, 2009 02:42PM EDT
THANK YOU! Can’t wait to play with the new toys!!