Variant Thumbnail Sizes

So how do you change the size of the variant thumbnails?

By “variant” I mean the different product options.

Say you have a product with different colors.

You create a “color” option.

For each variant you assign an image.

I want to just have a tiny color swatch (red.gif, blue.gif, etc…) but by default CS Cart creates a big fat 50 x 50px thumbnail.

It looks like the code might be coming from: common_templates/image.tpl but I’ll eat my hat if I can find anything that’s going to let me change the size of those thumbnails from there.

These guys pulled it off, changing the thumbnail size to 30x30px:


The fact that their thumbnails are being pulled from a folder named:


whereas mine are coming from:


leads me to believe that it’s controlled from the admin panel is some obscure way.

I think,

local_styles.css, .product-variant-image-unselected, #thumbs_frame img {

border: 1px solid #E2E2E2;

height: 25px;

margin: 0px;

width: 25px;


What this does is shows it as whatever size you want and then when clicked, it goes back to the larger size.

better to change in addons/my changes


Thanks for the reply, but I finally found the template:


Changed line 101:

{include file="common_templates/image.tpl" class="hand $_class object-image" show_thumbnail="Y" images=$var.image_pair object_type="product_option" image_width="50" image_height="50" obj_id="variant_image_`$obj_prefix``$id`_`$po.option_id`_`$var.variant_id`" image_onclick="fn_set_option_value('`$obj_prefix``$id`', '`$po.option_id`', '`$var.variant_id`'); void(0);"}

Just change “image_width” and “image_height” to whatever you want.

Still haven’t figured out the ridiculously circuitous hooks system yet, so hopefully I’ll be working for another company by the time they want to upgrade. (I’m just kidding! I’ll figure it out before building the live site.)

Takes forever to find this stuff, but feels good when you finally get it.

You know about the design mode?

Go to admin - design - design mode - enable customization mode.

View the store in customization mode and you can see exactly which tpl file to edit.

About the hooks - it’s really not that hard!

Thanks, Flow. Yeah, I know about design mode. Doesn’t always make it clear what .tpl files are what though!