James MacAulay 12/11/2009

Theme Settings Now More Fabulous

The release of theme settings a few months ago made Shopify themes a lot more flexible, giving shop owners the ability to easily customize the look of their shop in all sorts of ways. Now, in addition to giving the theme editor a cleaner and more functional interface, we are taking things further by introducing presets:

These work pretty much the way you’d expect. If you like the way your theme looks but you want to do some experimenting, just save your current settings as a preset and mess around with your colors and fonts all you like — you’ll have your original settings to go back to, and you can stash away your wild ideas for later. Here’s a screencast showing you how it all works:

You can start saving and loading presets for your settings-enabled theme right now. I’ve also added a couple of built-in presets to the Minimify theme, which you can take a look at if you load it up from the theme gallery.

A few technical points for designers

We no longer update the settings form itself

config/settings.html
when the form is used in the admin interface. Instead, the choices you make in that form are stored as JSON data in a new file at
config/settings_data.json
If there’s no
settings_data.json
Shopify will fall back to looking at the form’s default values in
settings.html

Since

settings_data.json
is part of the theme, it gets included when you export your theme as a zip archive. The JSON also includes your presets, so all of this is kept intact when you export and import themes. When you’re packaging up a theme, just create however many presets you want it to have and then load up whichever one you decide is the “default” before exporting as a zip file.

Because the data is stored in JSON now, it’s going to be easier for us to add theme settings support to Vision, so stay tuned for that.