Shopify Tutorial: Customizing the Settings Form (Part 2 of 2)
Last week I posted a tutorial on how to make some text customizable using the settings form. In this tutorial, I will be showing you how to customize the font and background using the settings form. I will be continuing to work on the Minimify theme that we modified in the last tutorial: please click here to download the theme if you don’t have it handy.
1. Create a new fieldset
Let’s start off by creating a new fieldset. Fieldsets allow you to group different sets of settings form inputs. For example, you can group all inputs that affect the font colors under a fieldset called “Font Colors”. Open the settings form code, add a new fieldset (as shown below in red).
My very own settings form!
The <legend> tag works as the title of the fieldset. I named the new fieldset “Font, Background, Logo” because I’ll be adding settings for these elements in this tutorial. Notice how in the screenshot below, the title that I had between the <legend> tag appears as the title of the fieldset on the actual form. Your form should now look like this:
Alright! Now that we’ve got the new fieldset up, let’s fill’er up with some new settings!
2. Customizing the Regular Text Font
To create a dropdown menu that will allow users to change font of the regular text, you must first insert a new <select> tag inside the fieldset. For the remainder of the tutorial, we’ll be working in this fieldset only. Open the code for settings.html, and enter the code colored in red below in our newly-created fieldset.
This will create a new drop-down with the id “regular_font” in your settings form. In my example, I have it so that ‘Helvetica, Arial, sans-serif’ is the default font, but you can easily set it so that it’s another font from the list. For example, if you want Trebuchet MS to be the selected font, you can put the following <option> tag instead:
Click save, and refresh your screen. Your settings form should now look like the screenshot below.
The next step is to link font selected in this new dropdown menu with layout.css.liquid. Open layout.css.liquid, and look for the ‘font-family’ property for the body selector. The ‘body’ selector for layout.css.liquid is shown below.
body {
background: #fff;
padding: 0;
margin: 0;
font-family: Arial, Helvetica, sans-serif;
line-height: 1.5em;
font-size: small;
color: {{ settings.text_color }};
}
You want to replace the value of the ‘font-family’ property with the Liquid tag that outputs the option selected in the “regular_font” dropdown. To do this, simply replace the value for ‘font-family’ with the following Liquid tag.
font-family: {{ settings.regular_font }};
Save layout.css.liquid. Now that the “regular_font” dropdown is tied in with layout.css.liquid, you can change the font on your site by simply selecting a font from the settings form, and clicking the “Save Changes” button!
3. Customizing the Logo
Being able to swap logos is probably the most sought-after feature by those who do not know HTML/CSS. This can now be done very easily thanks to the settings form.
To start, enter the two new <input> tags (shown below in red and blue) inside the settings.html code.
What’s really cool is that you can set the maximum width and maximum height of the logo being uploaded, using the ‘data-max-height’ and ‘data-max-width’ attributes. This means that you don’t have to worry about cropping your image to the right size, because the form will do it for you without screwing up the proportions of the image. In the code above, I have set the maximum width to be 800 pixels because that is the width of the store’s layout.
Save the settings form, and hit refresh. Your settings form should now look like this:
What we have now is a checkbox that checks to see if the user wants to use his own logo or not, and an input for selecting the image that the user wants to use as the logo.
Unlike the other settings, we need to modify theme.liquid instead of layout.css.liquid. This is because we’re going to be outputting an image, and not modifying a CSS property. Open up theme.liquid, and look for the div with id “header”. In the Minimify theme, this is the div that contains the logo, so we’re going to be adding some Liquid to link it with our settings form.
{{shop.name}}
Cart{{ cart.item_count }}
Replace the “header” div with the code below.
What we did above is we added a conditional statement (labeled above in red) to check to see if the user has the “use_logo_image” checkbox checked off. The line {% if settings.use_logo_image %} checks to see if “use_logo_image” is checked. If it is, then it will run the code in blue, which outputs ‘logo.png’. If it not checked, it will run the code shown above in green, which simply output the shop name in text.
When you upload an image for the logo, the form will automatically rename the file “logo.png”, so you don’t have to worry about renaming anything in theme.liquid.
Before:
After:
4. Customizing the Background Image
Customizing the background image is the last thing we will go over in this tutorial. Start off by appending the code in red below into settings.html.
Save the the settings form, and refresh the page. Adding the code above will create new options for the background image, as show in the screenshot below. Their respective id’s are also labeled in red.
Next, in layout.css.liquid, paste over the CSS selector for ‘body’ with the following:
body {
background-color: {{ settings.bg_color }};
{% if settings.use_bg_image %}
background-image: url(bg.gif);
background-position: {{ settings.bg_image_y_position }} {{ settings.bg_image_x_position }};
background-repeat: {{ settings.bg_image_repeat }};
background-attachment: {{ settings.bg_image_attachment }};
{% else %}
background-image: none;
{% endif %}
padding: 0;
margin: 0;
font-family: Arial, Helvetica, sans-serif;
line-height: 1.5em;
font-size: small;
color: {{ settings.text_color }};
}
Save layout.css.liquid. In the code above, the If-statement (colored in red) first checks if the “Use a background image?” checkbox is checked. In Liquid terms, it checks if {{ settings.use_bg_image }} has a value or not.
If settings.use_bg_image has a value, then it will run the code in blue, which outputs the uploaded image as the background. The background also takes on the CSS properties background-position, background-repeat, and background-attachment, whose values are being set by the settings form.
If the settings.use_bg_image does not have a value, then it will run the code in green, which will set the CSS property background-image to none. Keep in mind that you can still set the background color even if you don’t plan on using a background image.
Here are some examples of what you can do with the background using only the settings form (they’re not the prettiest examples, but I just wanted to show you the capabilities of the settings form).
Position: Top Left, Tiling: Do Not Tile, Background Color: #ffffff.
Position: Top Left, Tiling: Tile Horizontally, Background Color: #1f62ff.
Tiling: Tile Everywhere.
Conclusion
That’s it for this tutorial! You can download the finished version of the theme and settings form here.
The tutorial turned out to be a bit longer than I had expected, but I hope it will give you an idea of how to customize the settings form for your own themes. If you have any comments/questions, please leave a comment below, thanks!
3 Comments
September 23rd, 2009
Cool, thanks guys! The settings form is definitely a kick-ass feature in Shopify!
September 23rd, 2009
Once again, a great follow-up tutorial! Can’t wait to deploy custom theme settings in the themes that I’m developing!
September 21st, 2009
Great tutorial, I am going to integrate Theme Settings in my next Shopify theme.