How do I add settings to the Store Owner UI?

If you are designing a theme to offer for sale to other people, or if you like to change up your store frequently, you might like to add some options to the Design UI to allow them to be changed through the interface, rather than having to be manually edited in the CSS file.

You add these through the CSS file and you will notice a section at the bottom that already contains all the default ones.

To add anything as a setting in the UI, just put /*: Attribute Name :*/ at the end of the line for the attribute you want. Change "Attribute Name" to whatever description you think will best allow users of the theme to understand what it is they will be changing when they adjust this setting.

Some examples:
body {
  font-family: 'Century Gothic', 'Apple Gothic', sans-serif; /*: Body Font :*/
  background-color: #FFFFFF;        /*: Body Background :*/
  background-repeat: repeat;        /*: Background Image Repeat :*/
  background-position: top center;  /*: Background Image Position :*/
  background-attachment: scroll;    /*: Background Attachment :*/
}

You can do this with CSS styles and also with Liquid elements. If it is a CSS attributes you just add it as-is.

For Liquid attributes you can create your own custom ones if you put them in the "storenvy" selector block and prefix them with "storenvy-"

For example there are 4 already set up with the default theme:

storenvy {
  storenvy-featured-collection: collection-;  /*: Featured Collection :*/
  storenvy-use-theme-background: if-;    /*: Use Theme Background :*/
  storenvy-show-store-name: if-;          /*: Show Store Name :*/
  storenvy-show-logo: if-;                /*: Show Logo :*/
}

When you come to use these in the Liquid code, the 'storenvy' becomes 'store', the first hyphen becomes a dot and additional hyphens will become underscores e.g. 'storenvy-featured-collection' will become 'store.featured_collection'

Options for the Property Values:

• if-
• collection-
• product-

When you have added items like this, they will be displayed on the design toolbar and in the 'Theme" tab on the admin panel.

​