Product Variations - Improved Customization

HunkyBill — Fri, 14 Dec 2007 16:36:37 +0000

Hi, Having tricked out some stores to provide Variants with Options, I have learned some new tricks. Some cool refinements to the technique. Definitions of variant options in the blog are now much simplified. If you wanted to customize *colors* available for a variant, you would now only need to supply text like this to the article in the products blog you created: ['Colors Available: ', 'Red', 'Green', 'Blue'] The first entry in the list is the label text that shows beside the drop-down list of available colors. So, if you want to add, remove or change colors.. editing this simple list is all you have to do. Secondly, I ran into a Shopify site where the paged _Collection_ listing of Products displayed the product variants _and_ had an 'Add to Cart' button for each Product. This was a new one to me and forced me to create a new algorithm to handle *collection.liquid* processing, so that adding products to the cart from there triggered the customization code properly. The trick was to create a nice Object with each one hashed to the unique product being dumped in the collection listing. That hashed Object was then assigned the product's variants _and_ any customization if provided via the blog entry matching the product. Voila. Attaching a listener to each Add to Cart button hashed on the product ID and you have instant access to the products variants, and the customization if any. Passing that to the cart ensured the cart reacted properly, as if the Product had been added via the *product.liquid* script. This is an elegant and very nice addition, encapsulating yet another shopping pathway through a store with customization.

Matt Beck commented

Matt Beck — Fri, 14 Dec 2007 19:23:12 +0000

nice trick.

HunkyBill commented

HunkyBill — Sun, 16 Dec 2007 23:38:54 +0000

Hi,

Some inspired thinking on the part of the Alchemist and now the product customization is even more powerful. Using the handy liquid construct:

{% capture key %}{{product.vendor}}.{{product.type}}{%endcapture%}

we get a key allowing us to match to Product Vendor and Product Type. This means it is possible to customize only the products of a certain vendor and type.

Product Vendor = XYZ, Type = Foo
Product Vendor = XYZ, Type = Bar

If you had a product blog article entitled XYZ.Foo you would see customization options for that product, but not for product XYZ, type Bar…

Very handy…

Christina commented

Christina — Mon, 17 Dec 2007 09:02:22 +0000

ooh, that’s the kind of thing I like! nifty.

nate b commented

nate b — Tue, 22 Sep 2009 22:15:44 +0000

I see this is older than the article in the WIKI… does this still work, cuz I can’t get either method to work…How do I even make the dropdown menu show up? I added the javascript and I am now getting the 6 errors as the wiki said I should but HOW do I make the dropdown menu show up?

Could I be missing a critical step on why the dropdown menu for my sizes isn’t showing up.. help someone, bill is great but already told me he is busy helping paying clients. But im not a client and I need help. I am a webmaster and entrepreneur that needs help on his Shopify community forums. . . help someone

HunkyBill commented

HunkyBill — Wed, 23 Sep 2009 00:51:05 +0000

@Nate,

While that wiki entry is old, it still serves a purpose of sorts. An expert Javascript coder can build upon it. A neophyte webmaster, dare I say, no way Jose.

You should NOT try and use that technique without some coding skill. An alternative for you would be to burn up some SKU’s and just use the new Shopify product options. You can setup those yourself. You’ll pay Shopify instead of me or another coder.

I highly doubt anyone on this community forum will trick out a site with your complexity for you. You’ll have to do most of the work yourself using Shopify, or pay for some custom coding…

Nothing wrong with those options Nate… bizness is bizness right…

nate b commented

nate b — Wed, 23 Sep 2009 05:37:34 +0000

yea it is biz but here at the COMMUNITY forums? And biz for the simple problem of a dropdown menu not showing up. Im not tricking anything out, or asking anyone to trick anything out. I need support and help with somthing I read in the wiki. I followed the directions which I felt skipped over a few steps somehow but none the less I followed every step in the wiki and now I have what I would think to be a very simple problem that I think I can tackle without hiring someone but with a bit of troubleshooting it can be solved. Now I am asking for some troubleshooting type help on the shopify COMMUNITY forums, not the shopify sales forums. People at the support forums tell you to come here for issues like this, then some people here tell you to hire someone….smh… i just need help…. thas all because

STEP 2. in the wiki is just too vague for my understanding. and sorry for being slow but its not broken down like step one at all. I just need some clarification and direction, is that too much to ask? Help someone anyone that is willing to help me for free?

and sorry if i started off on the wrong foot with people here I am just accustomed to but diff type of atomosphere, but u are all cool and any future and past help is appreciated.

Jamie commented

Jamie — Wed, 23 Sep 2009 12:28:39 +0000

Sorry Nate he’s right. The kind of help you are asking for is very in depth and would take hours to sort for anyone. Follow HunkyBill’s advice and simply use the built in multiple option features that are already in most Shopify themes. His solution in the wiki is for advanced users, to skirt a few sku’s. It does not apply in your circumstance. If you are unsure what is wrong, start by going to a fresh theme where it does work and apply that code to your own theme.

nate b commented

nate b — Wed, 23 Sep 2009 20:46:59 +0000

really? can I please know how it will takes hours to sort.. that way I can use my hours sorting it..because honestly step 2 in the wiki is just not detailed at all as step one. …and you all may be right BUT I just want to know what “SPECIFIC CODE” to put in my theme to make a dropdown menu SHOW UP and interact with the information that exists in the little javascript thingy..thats where I am stuck…. like is it possible for someone to tell me step by step what to do after hunkybill’s step one. Like where do I go next. What am I putting where? bottom of page? inside a div? what am I actually INSERTING?

it cant be that hard. And I know I know how to follow steps because everything that I have learned which may not be much to you all, but to this point came from tutorials and I followed them pretty well making a layout and coding it along with some other slightly simple things. Basically if I have good steps to follow then I can get it done. Jus need some direction.

And thanks for the tip at the end jamie I will do…“good o trouble shootin advice” (I may be dense but didn’t think to do that)

And also is there a wiki and information on what themes have the multiple option features? How can I use this? Will it be more simple to do?? Why I haven’t seen this before in the wiki? How do I get sizes to work with this? Is there a wiki?

ANd Thanks on any feedback to my weird posts… sorry im slow guys…i just wanna learn……really

Caroline Schnapp commented

Caroline Schnapp — Wed, 23 Sep 2009 20:56:08 +0000

And also is there a wiki and information on what themes have the multiple option features?

All themes part of Shopify’s Themes Gallery do. Go to http://YOUR_SHOP_NAME.myshopify.com/admin/themes and pick any one.

Caroline Schnapp commented

Caroline Schnapp — Wed, 23 Sep 2009 20:58:34 +0000

One important link: http://wiki.shopify.com/Tutorial_to_convert_existing_product_to_multiple_options

Really, it is a matter of hitting the wiki and searching for ‘options’.

I have done it for you here:
http://wiki.shopify.com/Special:Search?search=options&go=Go

nate b commented

nate b — Thu, 24 Sep 2009 18:51:53 +0000

thanks caroline…thanks a bunch… i got it :) ;)u guys are the bizest

nate b commented

nate b — Fri, 30 Oct 2009 15:55:17 +0000

anyone willing to implement this in me page.. I will pay..?