Product Color Option Display Bug?

Store Builder Questions
1

I am adding my first products to my store that require color options. I have added the appropriate color choices in Global Options and appropriate color image for those options.



When I display the page it shows up as seen in pic, the color swatch images actually cover up add to cart? Can anyone please tell me how to fix this or why its happening? Is this a known bug? (I am running 2.1.4 PRO) Can’t believe this hasn’t come up as I have standard template for product no mods have been done except the Facebook add on.



Please help if you can, thanks



http://www.in-homeautomation.com/store/wireless-dimmer-white.html



2

The standard icon size for option is smaller than your images. You'll have to adjust the CSS to utilize those images. It is meant to be under the selector, by your page has a -120 left margin for the div.

3

[quote name='tbirnseth' timestamp='1308888743' post='115655']

The standard icon size for option is smaller than your images. You'll have to adjust the CSS to utilize those images. It is meant to be under the selector, by your page has a -120 left margin for the div.

[/quote]



Tony,



So if I shrink the option image it will fix this?



CS-Cart made the thumbnail image that size, you are correct my image was much larger it shrunk it down to that thumbnail. So I need to make the color image smaller than the thumbnail now?

4

I wouldn't do it that way. Just get rid of the -120px left margin for the class descriptor 'product-variant-image' in styles.base.css. It will then align nicely with the left edge of the selector.



The preferred method would be to have your own 'local_styles.css' that is included but either way you want something that looks like:


.product-variant-image {
padding-top: 5px;
margin-left: 0px;
}


Ideally they would have had it replace the main image when a different option was selected, but they didn't implement it that way.

5

[quote name='tbirnseth' timestamp='1308890292' post='115658']

I wouldn't do it that way. Just get rid of the -120px left margin for the class descriptor 'product-variant-image' in styles.base.css. It will then align nicely with the left edge of the selector.



The preferred method would be to have your own 'local_styles.css' that is included but either way you want something that looks like:


.product-variant-image {
padding-top: 5px;
margin-left: 0px;
}


Ideally they would have had it replace the main image when a different option was selected, but they didn't implement it that way.

[/quote]



Tony, that did the trick thanks very much!!

Will there be any conflicts with anything else having set it this way or I should be good?

6

Don't know for sure, but would assume it only applies to that page/div.