Adding Functional Swatches to Home & Product Page

This guide will go over how to add swatches to the home page and product page that will actually change both the product thumbnail and the variant (variant changes only for product page). This guide assumes you have already have the swatch.liquid file set up, and have included the swatches on your product/home page.

This jQuery below can go in the bottom of your theme.liquid file wrapped in a script tag. This bit of code does essentially all of the work. The comments help explain what's happening in each step.

//swatch click change
$(document).click(function(event) {

//if user is on home page
//just change the product thumbnail
{% if template == 'index' %}

//grab the img src of the swatch clicked
var event_target = $(event.target);
console.log(event_target);

//if the swatch clicked has a class of swatch_callback
if(event_target.context.className=="swatch_callback"){

//grab it's value
var swatch_src = $(event.target).val();

//prepend the default url
var url = "//cdn.shopify.com/s/files/1/1940/9023/";

//prepend default url with callback value
var newUrl = url + swatch_src;

//search swatch for product id in for attribute
var swatch_for = event_target.context.attributes.for.value;//$(this).attr("for");

//look for img with that same exact product id
var product_id = $("img[for="+swatch_for+"]");

// give main large thumbnail new source
$(product_id).attr('src', newUrl);

}

//otherwise they are on product page
// change the actual variant id
{% else %}

//grab the img src of the swatch clicked
var event_target = $(event.target);
// console.log(event_target);

if(event_target.context.className=="swatch_callback"){

var swatch_src = $(event.target).val();

//changes url based on grabbed title attribute from swatch page
var url = $(event_target).attr('title');
console.log(url);

window.location = "https://justice-eu.myshopify.com" + url;
}

{% endif %}
});

The first part of the jQuery is wrapped in a liquid if statement - if the user is on the home page, we only need to change the product's thumbnail, not it's variant number. That only matters for the product page when adding to cart.

We then check to make sure the right thing was clicked. The function searches for the class "swatch_callback", which should be placed on this input element in the swatch.liquid file.

If that checks out, and the swatch with that class is clicked on, we then grab it's value, which you can see above, is equal to the variant's image source. The next step is to prepend your store's default URL (this will be different for each store). Combine the image source and the URL together to form the new thumbnail URL that we need to display.

Next, the jQuery looks for the right product thumbnail to change. It makes sure the product's id matches the swatch clicked.

In the homepage_featured-list-collection.liquid file or similar, make sure the thumbnail has a "for" attribute with that product's ID so it can be matched properly. Once the match is found, the URL is replaced with the new one that we created earlier. And now your thumbnail has changed!

But, for the product page, we need the variant to change as well. That way, when the customer adds to cart, the right variant is added. That's where the last bit of the jQuery comes in.

//otherwise they are on product page
// change the actual variant id
{% else %}

//grab the img src of the swatch clicked
var event_target = $(event.target);
// console.log(event_target);

if(event_target.context.className=="swatch_callback"){

var swatch_src = $(event.target).val();

//changes url based on grabbed title attribute from swatch page
var url = $(event_target).attr('title');
console.log(url);

window.location = "https://justice-eu.myshopify.com" + url;
}

{% endif %}

If the user is NOT on the homepage, we still grab the image source of the swatch clicked, as well as the variant URL this time as well. The variant URL is inserted into the "title" attribute of the swatch input element for us.

Once that's grabbed, we change the variant on the end of the URL with the new one, and bam, you're done!

Hopefully this can help somebody in the future. The code used was from the Justice Shopify store builds.