TrackBack

TrackBack URL for this entry:
http://www.typepad.com/services/trackback/6a00d8341c9edc53ef00e5521d301f8833

Listed below are links to weblogs that reference Custom Product Color Variations in Shopify:

Comments

Feed You can follow this conversation by subscribing to the comment feed for this post.

Dan Grigsby
Gavin: great write up. I've been digging into Shopify customization and this is a superb example.
Phil Horne
Your code is exactly what Im looking for... I am going to mod it a little so that it pulls the options from the products tags instead of hard coding them... If you want the modified code let me know. Phil
Gavin Terrill
@Phil - that sounds like a good approach. I am using the tags for navigation, but I'm sure other folks would like to know how you go using tags. Send me the code I'll update the page.
Brad Manning
I don't know how to get code to display in this comment box correctly, please bear with me.

Does this still work? Maybe I am missing something but I can't get colors displayed by editing the product description, adding,

notextile
script type="text/javascript"
colors = ['Navy', 'Black', 'White'];
/script
/notextile

I edited the code on product.liquid so it says,

if (colors.length > 0) {...} else { document.write("no colors available"); }

and it says that no colors are available.
Then I defined colors in the script at the top of product.liquid so it says,

script type="text/javascript"
var colors = ["Red", "Orange", "Blue"];
var variants = [];
/script

And then Red, Orange and Blue displayed correctly. This leads me to think it is a problem with the code in the product description.
Did I forget something?
Thanks.
BBG
Brad - in the product description, are you using tags properly? (maybe you left them out because the comments won't allow it). Anyways, what is happening is {{ product.description }} is actually loading the javascript that specifies the colors, so make sure it is above the "if colors.length" statement. You should be able to "view source" and see the javascript statements from the product description if it working properly.
Brad Manning
Thank you, it works perfectly now. The problem was that {{ product.description }} was loading after I was using the colors, so nothing was available yet. A little rearranging and colors appeared. Thank you for the help.
Phil Campbell
Do you have the original themes/txt that i can copy and paste - mine are not working properly over on - http://www.purplepigz.co.uk Some bits are ok but the checkout page is messed up.. colours and rows and i get undefined in the email notification.
BBG
@Phil - Sorry, I don't have anything you can download. Re your checkout page, it looks like you are missing the javascript tags around the javascript code.

The comments to this entry are closed.