Shopify Tutorial: Associating Product Variants with Product Images

In this tutorial I’ll be showing you how to associate product variants with product images using jQuery and Shopify’s new feature for adding unique alt tags for product images. For demonstration purposes I’m going to be modifying one of Shopify’s free themes, Radiance, but this technique will work with any theme. You can check out demos of this in action here (single option) and here (multiple options).

The screenshot below shows what the Radiance’s theme looks like initially. The first thing we’re going to do is set up the product’s variants and alt tags. After that, we hide the #thumbs <ul>. Finally, we’re going to add some Javascript to make it so that the options dropdown in the top-right corner changes the image inside the #active-wrapper div with the appropriate product image. For example, if you select “Black” for colour, #active-wrapper will show the product image with the black shirt.

Sounds easy, right? Let’s get started!

Ottawa Ruby

Just a quick post about a Ottawa Ruby, a website that I recently made for my good friend and coworker Ed O. Gooding.

If you’re in Ottawa and love Ruby, come out to the next meetup!

Shingo Hairstylist logo

This past week I worked on a logo for a good friend of mine, Shingo. Shingo is a hairstylist from Japan, and he’s here in Ottawa to study english. He asked me to design a logo for him so that he could make business cards later down the road.

One thing that I learned from this exercise is that scissors are really freaking hard to draw. I must have drawn scissors dozens of times before getting it right. I would often screw up the proportion ratio between the blade and the ring, and the scissors would end up looking phallic (as silly as that sounds, haha).

A book that I picked up last week called Vector Basic Training: A Systematic Creative Process for Building Precision Vector Artork helped me a lot with my workflow. I’m not finished reading it but I took some tips from it as I worked on Shingo’s logo. In particular, Von Glitschka’s advice on going back-and-forth between analog and digital (i.e. from pencil on paper to the pen tool in Illustrator, and vice versa). I’m planning on writing a full review of the book later on, but it’s definitely pretty awesome so far.

What are your thoughts on the logo? Any feedback/criticism would be awesome

Battlefield 3

For the past couple of months I’ve been hooked on DICE’s latest game, Battlefield 3 (BF3). I was a huge fan of Battlefield 1942 so I knew that I would love BF3 right off the bat.

BF3 is the best FPS I’ve ever played. Between BF1942 and BF3, I played a lot of FPS games but most of them were short-lived. One exception is TF2, which I played a lot until it went crazy with all the hats, crafting and micro-transactions.

One of BF3′s great new features is “Battlelog”, which is EA’s social platform for BF3 players. The best part about Battlelog is its stat-tracking. Through Battlelog you can check your kill:death ratio, weapon stats, unlocks, awards, and reports of past rounds. I find myself logging into Battlelog after rounds to see how I did, and whether or not I’m about to unlock something.

As for the actual gameplay, what makes BF3 so awesome is its emphasis on teamwork. This was made even more true when I was one day recruited by a platoon called N7 Spectres. I was asked to join when I was having a pretty sweet game on Noshahr Canals. I was a little worried at first because I thought that being in a platoon meant daily practices and getting super-pissed at one another for messing up, but man, how wrong I was. N7 Spectres is a group of some of the coolest, friendliest and most importantly skilled players, and it makes playing BF3 even more fun.

N7 Spectre’s founder, eGessDub, posts some pretty sweet gameplay videos on his Youtube channel here. Yesterday eGessDub posted a game with me in it! It’s pretty rad to re-experience the match from another person’s perspective.