Easy solution for product variations!

by James L - Member - 12:36AM, Apr 25, 2008

If you want to add product variations, just like I did – you can take advantage of my 2-day hunt to find the answer!

In your admin section, click Assets. Click Theme Editor and under Templates click cart.liquid.

Scroll down the code until you see this:


<h2>You have selected the items below for purchase</h2>

        <h3><a href="{{item.product.url}}">{{ item.title }}</a></h3>
        <span class="money">{{ item.price | money}} each.</span>

Now all you need to do is add the following code here…


<label for="{{ item.title }}">CHANGE ME 1<label>
   <select name="attributes[{{ item.title }}]" id="{{ item.title }}">
   <option value="CHANGE ME 2" 
       {% if cart.attributes.item.title ==  "CHANGE ME 2" %} checked="checked" {% endif %} CHANGE ME 2 </option>
    <option value="CHANGE ME 3" 
       {% if cart.attributes.item.title ==  "CHANGE ME 3" %} checked="checked" {% endif %} CHANGE ME 3 </option>
</select>

For more options in the drop down, keep adding:


<option value="CHANGE ME 2" 
       {% if cart.attributes.item.title ==  "CHANGE ME 2" %} checked="checked" {% endif %} CHANGE ME 2 </option>

before </select>

Make sure to keep all “CHANGE ME”s that end in the same number the same as each other. So all three “CHANGE ME 2” should become the same word.

You can add another drop-down list just by copying the first code snippet, and customizing again.

After a purchase, if you go to your Orders page, the results from the drop-down menus will be shown in the orange “note” box.
Each result will be named as the exact product type it refers to, so it is easy to match it up!

Extra hint: If you have two drop-downs like I do (Fabrics and Colours), just add the word Fabric to the 1st form select label, and Colour to the second select label. So this:


<label for="{{ item.title }}">

will look like this:


<label for="{{ item.title }} Colour">

Just makes it easier to tell the difference at a glance.

Hope you enjoy guys!

James

Last edited 12:15AM, Apr 26, 2008

Jump to comment form | subscribe to this topic

7bf3b0eb4c1383589c9b5c6b1c672b31 James MacAulay jaded Pixel 11:47PM, May 07, 2008	That looks nifty, great work! It doesn’t look like it would really persist past the user clicking to update the cart, though, since this code… `{% if cart.attributes.item.title == "CHANGE ME 2" %}` ...wouldn’t reference `item.title` correctly because it would take `cart.attributes.item.title` to be a literal attribute called “item.title.” Or am I wrong? --- James MacAulay Shopify Developer
5adbe9e20522d6a177e76b223b6750ed HunkyBill Member 12:26AM, May 08, 2008	Hi, I remember talking James through this one. He started with the basics, advanced some, and through persistance came up with his code here. It has numerous obvious problems, that I neglected to point out, but hey, he was on a roll. In fact, he went from an IF statement with 40 ELSE cases, to a CASE statement with 40 possible WHEN conditions, to this…so he was justifiably proud. Why on earth would you, as a SHOPIFY DEVELOPER post to this with the question Or am I wrong?. You think we, the community, will hesitate to jump on you and not ask the obvious question, If you don’t know what you’re doing, how can you expect us to stick with you? Are you wrong? here James. Do you really not know your own Shopify? Hehehehe….. Just having a little fun.. poking the dog with a stick…maybe he’ll growl… maybe he’ll bite…rrrrr… nice doggy… --- Implement the Logic. Email: hunkybill@gmail.com WWW: http://wiki.shopify.com/Resistor_Software — Last edited 12:28AM, May 08, 2008
d39db367a6bd0e89be27cf388be65ad7 puniour Member 02:27AM, May 08, 2008	Hey James, When I goto “Templates click cart.liquid”, I dont see the code that you described? why? — Last edited 02:28AM, May 08, 2008
43bc2bd2f4f5eea925e61a3eb61362b4 tobi jaded Pixel 02:10PM, May 08, 2008	HunkeyBill: I wrote most of the original code for Shopify and probably still log most surviving lines of code in the codebase as well as 100% of liquid but you are way ahead of me in terms of clever liquid applications :-) --- Tobias Lütke Shopify – Founder, CTO
951a5e13ef4f3220a064523c0c4ff754 James L Member 01:15AM, May 09, 2008	Hey, looks like my old post finally got some attention!! Thanks James – I think it’s nifty too :) but you’re right, it doesn’t stay put after an Update Cart. Thanks again HunkyBill for even responding, and then helping me too – very kind of you. BTW, aside from the Update Cart issue which resets the selection boxes, what other problems are there? puniour – The code might not be exactly the same in different themes. The one I am using is Tangerine but at the time of posting the instructions, I could have been using Summersteps. (I changed themes as Summersteps was not playing nicely) If you are having issues try changing themes. Anyway, the code is still the same, it’s just a case of where to put it. Tobi – you are a legend. Shopify is great. Just thought it had to be said. : }} P.S. Not finished yet, but this is my site showing the drop-downs: http://m-interiors.myshopify.com/ Just add items to your cart to test them out. — Last edited 01:24AM, May 09, 2008
951a5e13ef4f3220a064523c0c4ff754 James L Member 01:36AM, May 09, 2008	... Thought I’d add a screenshot to show how the order looks when it comes through. — Last edited 01:36AM, May 09, 2008
951a5e13ef4f3220a064523c0c4ff754 James L Member 11:28PM, May 16, 2008	Does anyone know how to add these results to an email (formatted). I can add them, but they come through as one long line of text, very hard to read, e.g. colourredfabricarizona Is it possible to automatically format the attributes, similar to how they look in the RSS? More like this… Colour: Red Fabric: Arizona
5adbe9e20522d6a177e76b223b6750ed HunkyBill Member 06:57PM, May 17, 2008	@JamesL If your email is sent as plain text, the tab and newline characters will help…. they are ”\t” and ”\n” respectively. I think this is the case, but I am not 100% on that.. try it.. --- Implement the Logic. Email: hunkybill@gmail.com WWW: http://wiki.shopify.com/Resistor_Software
951a5e13ef4f3220a064523c0c4ff754 James L Member 12:34AM, May 18, 2008	I can’t add tabs or line breaks, I’m just pulling the info from my drop-downs, which is something like {{ attributes.etc }} Another question, is is possible for my drop-downs to only show up, when items in the cart belong to a certain collection. I don’t know how to do this in liquid, but it sounds possible. I would only need a simple if/else, as the drop-downs should only be invisible for 1 category. What I’m after is… if the product in the cart belongs to collection A, show the following, else... don’t!