Working on the product pages

When I use fire bug, everything looks right, excepts my attributes are listed in red and in quotes. What step did I miss?

These are in red and in quotes because that's how String variables are displayed in Firebug. I have looked at the screen capture you sent me by email, and I can tell you that much: there's no problem whatsoever in how your variants are “descrambled”.

The code I provide is tailored to work for a certain theme (Vogue). If the drop-downs don't show up in your own theme, it's probably because they're not appended to the right div element in the code.

please help! this has been two weeks of hell for me and my client is losing business because of this...

The code provided involves manipulation of the Document Object Model, the algorithm is explained in details, same with the code. If you need my help with this, hire me. Implementation of the Descrambler costs $300 USD.

Alternatively, teach yourself DOM scripting with the JavaScript library of your choice. If you like jQuery, I recommend reading the book JavaScript The Missing Manual, or Learning jQuery 1.3.

I hope that your friend has paid for your subscription, and that you will get lots of beer too.

Take care,

Caroline

By the way, you're posting your comment under the wrong tutorial if you want to use 1 SKU per product and have options. The tutorial that shows how to use JavaScript attributes is over here.

but what i need to do now is be able to change those options per item... [...] essentially if i have 2 items but want to offer them in different sizes and or colors what is the best way to implement that

You will need to do the following if your options differ on a per-product basis:

1. Define your options in your product description (at the bottom), using JavaScript
2. From these options, build your drop-down boxes dynamically on the product page

For no 1, define 2 arrays in your product description and wrap your code in notextile tags, like so:

<notextile>
<script type="text/javascript">
if ((typeof Shopify) == 'undefined') {
  var Shopify = {};
}
Shopify.colors = [....];
Shopify.sizes = [....];
</script>
</notextile>

As for no 2, you can make your life easier if you use the select element manipulation plugin I recommend here.

Thanks for the positive feedback. It is very much appreciated. It made my day!