Color Attribute Mouse Hover Capability

[Psyrix]

Hi all. This is my first post and I've only been using PrestaShop for a few days.

 

We are setting up a site that involves wigs and hair care products. Obviously, normal RGB colors will not work for the wigs so I've uploaded texture files to replace the color choice availability. Unfortunately, when looking at the color options on the website, they are simply too small to make a proper choice for potential customers.

 

Is there a way, without needing to learn code, to have the color swatch (texture swatch in this case) increase the size of the picture upon mouse hover or clicking the color choice so the selection can be seen in a larger window? If code is required for this to work, can someone point me to the correct file where this code would need to be entered? We feel that the color choices for the wigs aren't clear enough for their purpose on such a small thumbnail size choice. I've attached a location URL. Thanks.

 

http://naamagroup.com/ps/index.php?id_product=9&controller=product#/6-color-8/25-length-8_

Edited August 22, 2016 by Psyrix (see edit history)

[rocky]

You can do this by changing the following in themes/default-bootstrap/product.tpl at about line 360:

						{if $img_color_exists}
							<img src="{$img_col_dir}{$id_attribute|intval}.jpg" alt="{$colors.$id_attribute.name|escape:'html':'UTF-8'}" title="{$colors.$id_attribute.name|escape:'html':'UTF-8'}" width="20" height="20" />
						{/if}

to:

						{if $img_color_exists}
							<img src="{$img_col_dir}{$id_attribute|intval}.jpg" alt="{$colors.$id_attribute.name|escape:'html':'UTF-8'}" title="{$colors.$id_attribute.name|escape:'html':'UTF-8'}" width="20" height="20" />
							<span><img src="{$img_col_dir}{$id_attribute|intval}.jpg" alt="{$colors.$id_attribute.name|escape:'html':'UTF-8'}" title="{$colors.$id_attribute.name|escape:'html':'UTF-8'}" width="150" height="120" /></span>
						{/if}

Then adding the following to themes/default-bootstrap/css/product.css:

#attributes .attribute_list #color_to_pick_list li a.color_pick {
    position: relative;   
}
#attributes .attribute_list #color_to_pick_list li a.color_pick span img {
    width: 150px;
    height: 120px;
    display: none;
}
#attributes .attribute_list #color_to_pick_list li a.color_pick:hover span img {
    display: block!important;
    background: #fff;
    padding: 2px;
    border: 1px solid #d6d4d4;
    position: absolute;
    left: 0;
    top: -122px;
}

This will display a 150 x 120 pixel preview of the texture when hovering over the smaller image.