Shopify: How to create colour swatches that use links, not variants.

Step 1: Create your swatch snippet

Create a snippet and name it “Swatch.liquid”. Insert the code below and replace the href link with your product handle. You can locate your product handle by going to your product dashboard and examining the SEO url on the bottom of the page. The class (tooltiptext) allows users to hover over the swatches to reveal the color titles.

<label class=”variant__label” >
Available in
<div class=”swatch-container”>
<div class=”tooltip”>
<span class=”tooltiptext”>Transparent Yellow</span>
<a href=”/products/athletic-tank-top-transparent-yellow”>
<div class=”swatch transparent-yellow” data-color=”yellow-shirt”>
</div>
</a>
</div>
<div class=”tooltip”>
<span class=”tooltiptext”>Optic White</span>
<a href=”/products/athletic-tank-top-optic-white”>
<div class=”swatch optic-white” data-color=”white-shirt”>
</div>
</a>
</div>
<div class=”tooltip”>
<span class=”tooltiptext”>Black</span>
<a href=”/products/athletic-tank-top-black”>
<div class=”swatch black” data-color=”black-shirt”>
</div>
</a>
</div>
</div>
</label>

Step 2: Insert CSS

Locate your css file. Usually it is named as theme.scss or theme.css in your theme code. Insert the following code.

.swatch{
width:50px;
height:50px;
border:1px solid white;
padding: 7px 15px 7px;
margin: 15px 8px 12px 0;
display: inline-block;
}
.swatch:hover {
cursor: pointer;
border: 1px solid #f8f0c8;
}

//color swatch colors
.maroon {
background-color: #5A202F;
}

.denim-blue {
background-color: #ACCFE7;
}

.smoke-grey {
background-color: #5C5F66;
}

.black {
background-color: black;
}

.olive-green {
background-color: #3F362C;
}

.navy {
background-color: #38445D;
}

.transparent-yellow {
background-color: #FCFCF1;

}

.optic-white {
background-color: white;
}

.artic-blue {
background-color: #3A5A83;
}

.tooltip {
position: relative;
display: inline-block;

}

.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-transform: capitalize;
text-align: center;
padding: 5px 0;
border-radius: 6px;

position: absolute;
z-index: 1;
}

.tooltip:hover .tooltiptext {
visibility: visible;
}

Step 3: Integrate it into the product page

Locate your product.liquid and insert your swatch.liquid snippet by using {% include ‘swatch’ %}. Click save and you should be done!