Tweak Library
Note: We have updated our folder structure in Neto 6 and this has not been updated on all tweaks yet. More info.

Colour Variation Swatches

Colour variations in the form of coloured square swatches, giving people a visual breakdown of the hues on offer.

Wireframe

Colour Swatches

Coding Instructions

Step 1. Update the specific display style

1) In the cPanel, go to Products > Product Specifics and click on "Colour".

2) Change the "Display Style" selection to "Text Only". Even though "Text Only" is selected, the code that will be implemented 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 2. Edit the variations code

Open /products/template.html, and replace the entire [%param *variation_body%] body param section with the below:

[%param *variation_body%]
    <a class="_itmspec_lnk [%if [@selected@]%]_itmspec_selected [%/if%] thumbnail nColourSwatch" href="javascript:void(0);" ref="[@specific_id@]_[@value_id@]">
        <div class="_itmspec_listitm" ref="[@specific_id@]_[@value_id@]" >
            [%if [@value_image@]%]
                <img class="nSwatchProduct" src="[@value_image@]" alt="[@value_name@]" />
            [%else%]
                <div class="nSwatchProduct" style="background-color:[@value_swatch@];"></div>
            [%/if%]
        </div>
    </a>
[%/param%]

Step 3. Add the CSS

Add the below CSS to the appropriate stylesheet:

.nSwatchProduct {
    height:40px; width:40px; display:block;
}
.nColourSwatch._itmspec_lnk {
    display:inline-block;
    margin-right:5px;
}
.nColourSwatch._itmspec_lnk._itmspec_selected {
    padding:4px;
}
.nColourSwatch._itmspec_lnk._itmspec_selected::before {
    display:block;
    height:40px;
    width:40px;
    text-align: center;
    color:#333;
    position:absolute;
    content: "\f00c";
    font:normal normal normal 26px/1 FontAwesome;
    line-height: 40px;
    z-index: 10;
}
.nColourSwatch._itmspec_lnk._itmspec_selected .nSwatchProduct {
    opacity: .5;
}
.nColourSwatch ._itmspec_listitm {
    margin:0;
}

Final Result

Download Files

Download Files