Colour Swatch

In the product gallery view, add colour variations in the form of coloured square swatches, giving people a visual breakdown of the hues on offer.

Wireframe

Preparation Checklist

Before you start this tweak, it's a good idea to run through our preparation checklist below:

• Read through the Getting Started to get a better sense of how the control panel, Database and Front End store interact.
• Learn our recommended Simple Workflow. This makes the implementation process as easy as possible.
• Create a new Staging Theme for this tweak. This allows you to preview any changes before they are visible to live customers.

Coding Instructions

Step 1: Open the thumbnail templates

• The gallery thumbnail template can be found here /httpdocs/assets/themes/[THEME-NAME]/templates/thumbs/product/template.html.
• The list thumbnail template can be found here /httpdocs/assets/themes/[THEME-NAME]/templates/thumbs/product/list.template.html.

Step 2: Add the colour swatch code to the thumbnails

Paste the following code into the template where you would like the element to appear. This is most commonly placed below the product name:

<div class="nColourList">
    [%if [@has_child@]%]
        [%list_item_variations id:'[@sku@]'%]
            [%param *variation_body%]
                [%if [@specific_name@] eq 'Colour'%]
                    [%if [@value_image@]%]
                        <div class="nSwatch" style="background-image:url([@value_image@])"></div>
                    [%else%]
                        <div class="nSwatch" style="background-color:[@value_swatch@];"></div>
                    [%/if%]
                [%/if%]
            [%/param%]
        [%/list_item_variations%]
    [%/if%]
</div>

Notes On The Above Code

This code outputs the "Colour" specific values for every child variation of the product. In order for the above to work, the specific name itself must be set to "Colour".

Firstly, the code tests to see whether an image exists for that particular specific value, and displays it if so. In the absence of an image, it displays the "swatch" value for the specific instead.

Step 3. Add the CSS

Add the below CSS to the appropriate stylesheet:

.nSwatch {
    margin: 0;
    border-radius: 100%;
    box-shadow: inset 0px 0px 1px 0px rgba(0, 0, 0, 1);
    height: 20px;
    width: 20px;
    display: inline-block;
}
.nColourList {
    margin: 0 0 10px;
    min-height: 25px;
}

Final Result

Adding support for image swapping on hover

This feature generates a list of variations, then changes the loaded image on the thumbnail to reflect the image that belongs to this variation during a hover state. Typically, you'll see this used for something like a product colour, where, for example, hovering over the colour specific, "Green" will load the "Green" primary image of the product.

Coding instructions

On your thumbnail template, you'll need

[%list_item_variations id:'[@sku@]'%]
    [%param *variation_body%]
        <a href="#" data-variation-image="[%asset_url type:'product' thumb:'thumb' id:'[@variation_sku@]'/%]" class="thumbnailVariation" >
            [%if [@value_image@]%]
                <img src="[@value_image@]" alt="[@value_name@]" />
            [%else%]
                <div style="background-color:[@value_swatch@];">[@value_name@]</div>
            [%/if%]
        </a>
    [%/param%]
[%/list_item_variations%]

Then you'll want to load this Javascript globally (As thumbnails appear in most places in your website). The footer is ideal.

[%site_value id:'footer_javascript'%]
    <script>
        $('.thumbnailVariation').hover(function(){
            var newSource = $(this).attr('data-variation-image');
            $(this).siblings('.thumbnail-image').children('img').attr('src', newSource);
        });
    </script>
[%/site_value%]