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).

<h3>My very own settings form!</h3>
<fieldset>
    <legend>Colors</legend>
    <table>
      <tr>
        <th><label for="text_color">Regular text</label></th>
        <td><input id="text_color" name="text_color" class="color" value="#d60f0f"/></td>
      </tr>
      <tr>
        <th><label for="link_color">Link Color</label></th>
        <td><input id="link_color" name="link_color" class="color" value="#d60f0f"/></td>
      </tr>
      <tr>
        <th><label for="link_hover_color">Link Color Hover</label></th>
        <td><input id="link_hover_color" name="link_hover_color" class="color" value="#d60f0f"/></td>
      </tr>
    </table>
</fieldset>
<fieldset>
    <legend>Font, Logo, Background</legend>
    <table>
    </table>
</fieldset>

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.

<fieldset>
    <legend>Font, Logo, Background</legend>
    <table>
      <tr>
        <th><label for="regular_font">Regular text</label></th>
        <td>
          <select class="font" name="regular_font" id="regular_font">
               <option value="Helvetica, Arial, sans-serif" selected="selected">Helvetica, Arial, sans-serif</option>
          </select>
        </td>
      </tr>
    </table>
</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:

<option value="Trebuchet MS, sans-serif">Trebuchet MS, sans-serif</option>

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.

<fieldset>
    <legend>Font, Logo, Background</legend>
    <table>
     <tr>
        <th><label for="regular_font">Regular text</label></th>
        <td>
          <select class="font" name="regular_font" id="regular_font">
            <option value="Helvetica, Arial, sans-serif" selected="selected">Helvetica, Arial, sans-serif</option>
          </select>
        </td>
     </tr>
     <tr>
       <th><label for="use_logo_image">Use a custom site logo?</label></th>
       <td><input type="checkbox" id="use_logo_image" name="use_logo_image" value="1"/></td>
     </tr>
     <tr>
      <th>Site logo</th>
      <td><input type="file" id="logo_image" name="logo.png" data-max-height="200" data-max-width="800"/></td>
     </tr>
    </table>
</fieldset>

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.

<div id="header" class="clearfix">
  <h1 id="logo">
    <a href="/" title="Go Home">{{shop.name}}</a>
  </h1>
  <div id="cartlinks">
    <h2 id="cartcount">
      <a href="/cart">Cart</a><sup>{{ cart.item_count }}</sup>
    </h2>
  </div>
</div>

Replace the “header” div with the code below.

<div id="header" class="clearfix">
  {% if settings.use_logo_image %}
    <a href="/" title="Go Home"><img src="{{ 'logo.png' | asset_url }}" alt="{{shop.name}}" /></a>
  {% else %}
  <h1 id="logo">
    <a href="/" title="Go Home">{{shop.name}}</a>
  </h1>
  {% endif %}
  <div id="cartlinks">
    <h2 id="cartcount">
      <a href="/cart">Cart</a><sup>{{ cart.item_count }}</sup>
    </h2>
  </div>
</div>

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:

Pages: 1 2