A few weeks back, Shopify released a new feature that allows designers to create a form within the theme editor that allow those without programming knowledge to customize their theme. The default themes already come with a form that allows you to customize certain aspects of the theme, but what if you want to add more customizable elements to the store? Or perhaps you’ve made a theme from scratch, and want to make your theme customizable so that your client can customize the theme themselves when you hand it over to them.

In this tutorial, I’m going to be using an older version of the Minimify theme to walk you through how to make the text colors customizable using the settings form. Please click here to download the Minimify theme. With that said, you can still follow this tutorial with a completely different theme.

1. Create the form

In the Theme Editor, click the “Create a settings form” button.

2. Rename “layout.css” to “layout.css.liquid”

The next thing you want to do is rename your CSS file so that it has a .liquid extension. This will allow you to have Liquid variables in your CSS file, which is necessary in order to make the settings form affect the values in your CSS file.

Open layout.css, and click the “Rename” link up top. This will open a textbox where you can rename the file. Add ‘.liquid’ to the name of the css file, and click the “Rename” button to save your changes.

3. Customizing the Regular Text Color

Let’s start off by having the form modify the color of the regular text of the theme. By default, the form will have 5 customizable elements, Regular Text, Accents, Background, Headers, and Regular Text. Changing the values in the form won’t do anything yet, because we haven’t told the layout.css.liquid file what to change.

In the theme editor, click the link that says “edit this form”. Doing this will open the code for settings.html.

Delete the entire content of settings.html, and copy/paste the following block of code. This is so that we can start fresh.

  
My very own settings form!

  

    
Colors
    

      

        
Regular text
        

      
    
  

Click save, close settings.html, and refresh your page. What you have now is a single color picker with the id “text_color”. This id is important to remember, as we need it to match it up with the color value in layout.css.liquid for the magic to happen. Your form should now look like this:

You can change the default color of the color picker by changing the hex value in the “value” attribute of the input. In the example above, it has the color “#d60f0f”, but you can change it to any hex color you wish.

Open layout.css.liquid, and look for the selector for the ‘body’ attribute. It should look like this:

  body {
    background: #fff;
    padding: 0;
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    line-height: 1.5em;
    font-size: small;
    color: #000;
  }

Notice the line in red – this is the CSS property that we want to modify with the form. What we’re going to do now is put in some Liquid to ‘link’ the color value from the color picker to the value of the “color” property of the body selector.

Enter {{ settings.text_color }} for the value of the color property. It should look like this:

  color: {{ settings.text_color }};

Notice how “text_color” in the Liquid tag above matches up with the id of the color picker’s id. This is how we tell Liquid to take the hex value of the color picker with the id “text_color”, and output it in the CSS file. Save layout.css.liquid.

Here comes the exciting part! In your settings form, pick any color that you want to be the color for the regular text. Click the “Save changes” button. When you refresh your store, you should see that the regular text is now the color that you just chose in the Settings form!

Customizing the Link Colors

Link colors are changed much in the same way as the regular text. Let’s start off by first adding two more color pickers to your form, one for link colors, the other for the hover color for links.

  
My very own settings form!
  

    
Colors
    

      

        
Regular text
        

      
      

        
Link Color
        

      
      

        
Link Hover Color
        

      
    
  

Open the editor for settings.html by clicking “edit this form”. Enter in two more <tr> elements, one for each new color picker. Rename the attributes for the labels and inputs accordingly (I named mine ‘link_color’ and ‘link_hover_color’). Your settings.html should now look like this:

Open layout.css.liquid. Enter {{ settings.link_color }} and {{ settings.link_color_hover }} for the ‘a’ and ‘a:hover’ selectors, respectively, as follows:

 a {
	text-decoration: underline;
	color: {{ settings.link_color }};
}

a:hover {
	color: {{ settings.link_hover_color }};
	text-decoration: none;
}

Now using your settings form, pick a color for the Link Color and Link Hover Color, and hit save changes. When you refresh your store, the links should be the color that you picked for Link Color, and when you hover over them, they should be the color that you picked for Link Hover Color!

Conclusion

In this tutorial, I went over how to set up the settings form to change the colors of some of the text in your theme. You can download what we’ve done so far here.

In part 2 of this tutorial, I will be walking through how to modify fonts and background images using the settings form. Stay tuned!