Happy Thanksgiving to all my Canadian peoples! I hope you guys are having an awesome long weekend so far.

I apologize for the lack of updates recently, I’ve been extremely busy with client projects, side projects, and moving. I do have a few Shopify tutorial ideas floating around in my mind, but I haven’t had much time to sit down and write them out. I’m hoping that in the coming weeks things will start to slow down.

So a couple of weeks ago, a bunch of my friends at Carleton University got together and started a student club called CUJA (Carleton University Japanese Association). I was appointed to be the web master and graphic designer, so I’ve been working on their branding, their website, and their membership cards. I’m still working on the mock-up of the site, shown below (a big, big thank you to my chums Mark Dunkley and Daniel Weinand for their tips and advices!).

Just yesterday one of the CUJA execs and I went to Staples to order the membership cards that I had designed. They won’t be ready for another 4-5 days, but I can’t wait to see how they turn out!

Another thing that was keeping me busy was moving. A couple of weeks ago I had moved from my former apartment to my parent’s place so that I can live with them until the new apartment becomes available. It’s my first time living at home in two years, so it was definitely a heart-warming experience (free food is also a huge plus!). I’ll be moving to the new place in about a week, and once I settle in I’ll be working more on the Shopify tutorials.

Well that’s enough rambling for today! Happy Thanksgiving everyone!

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>

You may be wondering, "what the hell is that Boombox thing on the top-right corner of your site?". Allow me to introduce you to Boomi.

The idea for Boomi spawned from a picture of a boom box that I saw on Flickr. The boom box kind of reminded me of a robot head, so I started doodling on my notepad. After a few sketches, I decided to use him for a music video project that I had to do for Audio/Video class back in 2007. His debut was in the following music video (WARNING: my animation skills are laughable).

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.

Continued »