Posting in the Magento forums has been disabled pending the implementation of a new and improved forum solution which should better serve the community.

For new questions please post at magento.stackexchange.com, the community-run support site for the Magento community. We will be providing updates on the new forum solution soon. For questions or concerns please email community@magento.com.

Magento Forum

How can I have swatches or color picker? 
 
yonirad
Jr. Member
 
Total Posts:  11
Joined:  2008-08-22
 

Everything I sell comes in multiple colors. I want to be able to have swatches. The user should be able to select the color of their choice and the image would change. How can I do this? See attached image.

Image Attachments
swatches.JPG
 
Magento Community Magento Community
Magento Community
Magento Community
 
jimmypalmer
Sr. Member
 
Total Posts:  79
Joined:  2008-05-04
 

are you looking for something like this:

http://www.scrubline.com/urbane-scrub-tops/contrast-bias-v-neck-tunic.html

 
Magento Community Magento Community
Magento Community
Magento Community
 
Brandlive eCommerce
Jr. Member
 
Avatar
Total Posts:  7
Joined:  2008-03-31
Buenos Aires, Argentina
 

I’m looking exactly that functionality. Do you know how to do it?

 
Magento Community Magento Community
Magento Community
Magento Community
 
jimmypalmer
Sr. Member
 
Total Posts:  79
Joined:  2008-05-04
 

yes, it’s kind of a hack, but it works well for me.

 
Magento Community Magento Community
Magento Community
Magento Community
 
Brandlive eCommerce
Jr. Member
 
Avatar
Total Posts:  7
Joined:  2008-03-31
Buenos Aires, Argentina
 

Could you post the code?
Thanks

 
Magento Community Magento Community
Magento Community
Magento Community
 
jimmypalmer
Sr. Member
 
Total Posts:  79
Joined:  2008-05-04
 

unfortunately it is not that easy.  It is pretty involved and very specific to what I am doing. 

In short there is a file titled product.js located in js > varien.  Magento uses this javascript file to load up the different options for the configurable products.  If you have more than one option it nicely reloads the second drop down after you have chosen the first option. 

I added several functions that work side by side with this functionality to display these images as color options.  It becomes a hack because I use the label in the drop down as a signifier for the name of the image that i want to display. 

For example, if the label of the option is Red, it looks for an image red.jpg and displays it in correlation to this option.  I wanted to use the admin code but didn’t have the time to track down how to return this on the front end javascript.  It’s a nightmare in there and I just had to keep it simple. 

I have a newer version that basically uses a code signifier that is at the end of the label.  For example, the color might be “Aqua Breeze” and it might have an admin code of “AQBR”.  I ended up putting the admin code in the label.  This will cause it to show up in the drop down, but my shoppers need to be able to see this color code anyways so it was a fine hack for me.  So, the label would now read “Aqua Breeze (AQBR)” and it pulls the code off and looks for the image “AQBR.jpg”.

What theme are you using?  Are you strong in javascript?

 
Magento Community Magento Community
Magento Community
Magento Community
 
Discovery
Enthusiast
 
Total Posts:  767
Joined:  2007-12-29
 

I only needed to show colour swatches (I did not have hires originals in all colours for my products). I put this together:

http://www.magentocommerce.com/wiki/adding_colour_swatches_to_configurable_products

 
Magento Community Magento Community
Magento Community
Magento Community
 
oakRunk
Sr. Member
 
Total Posts:  117
Joined:  2008-09-15
 
jimmypalmer - 05 November 2008 08:24 AM

unfortunately it is not that easy.  It is pretty involved and very specific to what I am doing. 

So can you post up some of that code anyways? Some of us cant write code very well but know enough to modify it to fit our needs wink

 
Magento Community Magento Community
Magento Community
Magento Community
 
nathanael.attali
Jr. Member
 
Total Posts:  20
Joined:  2009-01-15
 

i’m looking for that code too.
thanks to post .

I’m a going crazy with this.
Nathan

 
Magento Community Magento Community
Magento Community
Magento Community
 
sherrie
Moderator
 
Avatar
Total Posts:  1655
Joined:  2007-12-14
Waterloo, ON
 

This is what I used to create a similar feature: http://activecodeline.com/magento-product-image-change-on-color-selection/

 
Magento Community Magento Community
Magento Community
Magento Community
Magento Community
Magento Community
Back to top