How to Add a Permalink to the Selected Variant on Your Shopify Product Pages April 03 2016

If you're reading this post then chances are you have an ecommerce web site that's hosted on Shopify, so you're probably already familiar with the concepts of Products and Variants.

But just in case you need a quick refresher, in Shopify (and in many other ecommerce platforms), a Product can have several Variants that might vary by attributes like Size, Material, Color, etc. A Product is like a parent, and its Variants are like its children. What's important to understand is that the Variants are the things that you actually sell, not the Products. So there are many situations where you need a URL that points directly to a particular Variant.

When you browse to one of your Product pages, the URL that appears in your browser's address bar is the URL of the Product, not the URL of the currently selected Variant. What's more, the URL in the browser's address bar does not change when you select different Variants. Feel free to verify this with our Clos des Oliviers Amande Striped Rectangular French Tablecloth product.

So, what if you want to email one of your customers a link to a particular Variant? How can you capture the URL that points to exactly the Variant that you want? 

The answer is: add a dynamic "permalink" to your Product page that always points to the currently selected Variant. And in this post we're going to tell you how to do it!

Most modern Shopify themes have a Javascript function that "fires" (runs)  every time the user selects a different Variant on a Product page. We're going to use this function and some jQuery magic to make sure the permalink always contains the URL of the currently selected Variant.

Before we dive in, keep in mind that Shopify themes are not all the same, so the way you would actually implement this in your theme may not be exactly as described here, but the general principles should be the same.

This little gem uses the jQuery Javascript library, so the first thing we need to do is make sure that your Shopify theme contains a link to jQuery. You should have something like the following in your theme.liquid file:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>

If not, make it so.

The next thing we need to do is add a link named "variant_permalink" to your Product pages. Add the following HTML code to your product.liquid template file (add it wherever you want the permalink to appear on your Product pages):

<div>
<a id='variant_permalink' href=''>permalink to selected product variant</a>
</div>

Yes, the "href" attribute in the above anchor tag is empty. But don't worry - we shall remedy that shortly.

The next thing we need to do is find the function that fires every time a Variant gets selected. It's usually called "selectCallback" and it's typically defined in your theme.liquid layout file, your product.liquid template file, or perhaps in an asset file that's included in one of these files. The declaration should look something like this:

var selectCallback = function(variant, selector) {

// code that gets executed whenever a new variant gets selected...

};

We need to add some code to this function that updates the URL the permalink points to every time the user selects a new Variant. Add the jQuery call below to the selectCallback function:

var selectCallback = function(variant, selector) {

// code that gets executed whenever a new variant gets selected...

//add the following line of code
jQuery('#variant_permalink').attr('href','{{ shop.url }}/products/{{ product.handle }}?variant=' + variant.id);

};

Note: The code that causes the "selectCallback" function to be called every time a Variant gets selected is typically located in a jQuery function that runs whenever one of your Product pages loads. It's normally referenced as a parameter in the constructor of an object called "Shopify.ObjectSelectors". It should look something like this:

jQuery(document).ready(function($){

new Shopify.OptionSelectors("product-select", { product: {{ product | json }}, onVariantSelected: selectCallback });

});

You don't need to make any changes to the above code. Just note that it causes the selectCallback function to update the variant permalink's URL when the Product page first loads and every time a user selects a Variant.

The end result is that the variant permalink always points to the currently selected Variant. So just select the Variant you want, copy the URL from the permalink, and paste it into an email to direct your customer to exactly the Variant that you want her to see! 

If you think this post is useful and/or interesting, please link to it from your web site!

 

Wonky Legal Disclaimer: It should be obvious, but the information in this post is offered "as is" and the owners and operators of this web site expressly disclaim all warranties of any kind or nature, whether express, implied or statutory, and expressly disclaim any liability arising from or related to your the use of the information.