In this tutorial we will be modifying the product page of the Ripen theme to work more like the product page on Threadless. We’re going to be modifying the Ripen theme, but this tutorial is applicable to any Shopify theme. I would like to thank John Tajima again for teaching me how AJAX and JSON objects work with Shopify. We will also make it so that the number of products in the cart displayed automatically updates after you add an item to the cart.

Continued »

Dazed, tanned, and broke. These three words pretty much sum up my state right now, after spending three weeks in Tokyo, Okinawa, and Taipei. I’m currently at Narita Airport waiting for my flight to Toronto, where I will catch another plane back to Ottawa.

It’s been a while since my last post, but now that I’m finally finished my winter semester I can start writing here more often. I will also try my best to catch up on unanswered comments! It’s starting to sink in that there are only two more semesters of school left… I can’t wait to finish completely!

The highlight of this past semester was diving into the world of interactive multimedia. For one of our classes, we were taught an open-source programming language called Processing. My classmates Grant Lucas, Mark Pintar and I built the ‘faceTable’, which was an interactive table display that would display the user’s Facebook information by using customized Reactivision markers. Words don’t do it justice – we will be posting videos of it in action on Vimeo once we make the demonstration videos.

Plans for the summer

This summer I’d like to find and share more hacks and tweaks in Shopify that would allow storeowners to add unique features to their store. I’d also like to write more tutorials to help storeowners get started with their stores.

In my spare time, I plan on playing around with Processing and OpenFrameworks in an attempt to create some cool visual displays. Particle systems is an example of something I’d like to create using one of these two languages. I’ll also be playing shows with the band The Mudplots, as well as work on another band project that I have brewing :)

Anyway, I’m off to kill some more time – two more hours until my flight to Toronto! Don’t fail me, Reddit…

UPDATE: A random elderly man from Calgary just approached me with a super-serious look on his face asking if I could check something for him using the wifi on my laptop. Thinking it was an emergency, I opened up my laptop. Turns out he just really needed to know the result of the Pittsburgh vs Montreal game for his hockey pool. Canadians are awesome :D

Back in January, I returned to Carleton University to resume my studies after a 1-year work term at Shopify. This week is Reading Week, and I’m temporarily back at Shopify to do some work. It’s really nice to be back in the office, although it makes me want to drop out of school and stay here forever :P

School’s been pretty hectic. MEL Scripting, marketing, and product design methodology have all been keeping me pretty busy. Because of this, I won’t be writing any Shopify-related tutorials during the semester, but I hope to get back into it during the summer.

There is one class that I really enjoy at school, taught by an awesome new teacher called James Acres. He introduced us to the world of Processing and Arduino, and it’s like discovering Lego again for the first time. It’s our first time creating interactions between the physical and digital world, and it’s truly been a fascinating experience.

March is going to be one tough month with all the assignments and whatnot, but I think it’ll go by quickly. I can’t wait for this semester to be over with!

I was looking at t-shirts at an online store one day, and it had a nice little bar chart that displayed how much of each size it had left. I thought to myself, “I wonder if this is doable in Shopify?”. The answer is yes, thanks to jQuery and JSON Objects. In this tutorial, I’ll be showing you how to add a bar chart in your product page that shows how much of each variant you have left in a bar chart. A big thank you to Javascript wizard John Tajima for introducing me to JSON objects and helping me out with the Javascript portion of this tutorial.

Implementing this feature can be done in three easy steps: adding the HTML/Liquid, adding the Javascript, and then adding the CSS. You can also fully customize the look of the bar chart with CSS. This bar chart will work for any theme, as long as you insert the HTML, Liquid, Javascript and CSS properly.
Continued »