Managing Shopify’s settings.html

After working with Shopify themes for a while, one of the irritations I’ve dealt with repeatedly has been the management of Shopify’s settings.html file. Theme settings are an important part of your theme - if you want to resell it, you need to provide users with easy ways to customise it to suit their needs, and if you’re building something for a client it’s often useful to give them the ability to adjust aspects of the theme themselves.

As your theme grows, however, the settings.html file can start getting difficult to manage. It’s one huge HTML file, you need to remember all of the potential types of input, and on top of all that there’s a lot of repeated code.

Today, I’m announcing grunt-shopify-theme-settings – a Grunt plugin that makes the creation of settings files for Shopify themes much easier. Instead of manually writing out your settings.html file, you can now declare your settings in a simple YAML format, cleanly separated into multiple files if you’d like, and with support for some handy features like autogenerating ‘repeat’ fields.

Here’s an example of a simple settings.yml:

Appearance and Fonts:


    Background Style:
      name: background_style
      type: select
        none: None
        color: Custom Color
        image: Custom Image

    Background Color:
      name: background_color
      type: color

    Background Image:
      name: background_image.jpg
      type: file
      help: Upload a jpeg.

    Repeat Backgound Image?:
      name: background_image_repeat
      type: checkbox

  Slide {i}:
    repeat: [1, 2, 3]

    Show Slide {i}?:
      name: slide_{i}_show
      type: checkbox

    Slide {i} Image:
      name: slide_{i}_image.jpg
      type: file

Running this YAML file through the settings generator will result in this HTML being generated, which in turn looks like:

Example settings generated by grunt-shopify-theme-settings.
The example settings in the Shopify Admin.

I think this approach makes the management of settings files much, much easier – I’ve definitely found it useful in my day to day work. If you’re already using Grunt to manage building your Shopify themes, this plugin will slot very easily in to your existing workflow. If not… well, you should be :). For more examples and installation plus usage instructions, check out the repository on GitHub.

I’d love any an all feedback about the plugin – just tweet @gavinballard, or if you run into problems, fire up an issue on GitHub.