Tech Blog

How to Add a Permalink to the Selected Variant on Your Shopify Product Pages April 3, 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.

 


Multi-Channel Selling October 27, 2015

We sell our products on our own web site and also on Amazon.

In the ecommerce world this is called “multi-channel” selling.


How to Use Bing Universal Event Tracking (UET) with Shopify May 3, 2015

If you found this blog post you probably know that Microsoft recently implemented a new way to do tracking and analytics on Bing Ads. It's called Universal Event Tracking (UET).  In this post we're going to show you how to use Bing UET to track events (like Add-to-Cart events) on your Shopify-based ecommerce site. In the next post we'll show you how to use UET to track sales conversions (completed purchases).

So, the first thing you have to do is set up a Goal on Bing Ads. To do this:

  • log into your account on Bing Ads
  • click on Campaigns
  • click on Conversion Tracking
  • click on Conversion goals
  • click on Create conversion goal
  • set the Goal Name to "Add to Cart"
  • select Goal Type "Event"
  • fill in the Category, Action, Label, and Value fields as shown in the screenshot image below

When you're done with the above the top of your screen should look something like this:

 

If this is the first Goal you've created, set the Tag Name to "Bing UET Tag" and set the Tag Description to "Bing Universal Event Tag" as shown below. (If you've already created a Bing UET tag, just select it from the "Select a tag" drop-down menu).

When you click on the Save button the system will create your Goal and your UET tag.  

The next thing you need to do is copy and paste your Bing UET script tag into the <head> section of your Shopify theme.liquid file so that it appears on every page of your web site (except your Checkout pages, which we will talk about in the next blog post). You'll most likely do that using the Shopify theme editor. To do this:

Go to the Campaigns... Conversion Tracking... UET tags page. You should see a Tag called "bing uet site tag". Click on the "View tag" link in the Action column.

  • Copy your Bing UET script tag
  • open a new browser tab and login you your Shopify Admin account
  • open your theme.liquid file in the Shopify theme editor
  • paste your UET tag into the <head> section of your theme.liquid file
  • save your theme.liquid file

When you're done pasting away (on the thin ice of the new day) your theme.liquid file should look vaguely like the below (note: the Bing UET tag is one big long line of javascript code, so if you don't break it into separate lines by hand or run it through a javascript beautifier it will extend way off to the right side of the screen as shown in the picture).

Now that you've got your UET tag comfortably settled into (almost) all of your web site's pages, the next thing you need to do is attach your Bing Goal's event code to the Add-to-Cart button on your web site's Product pages. Here's how to do dat:

  • open up your product.liquid template in the Shopify theme editor
  • look through the HTML until you find the HTML <input> element that corresponds to your "Add to Cart" button. It should look something like:
    <input type="submit" id="add-to-cart" class="btn" name="add" value="Add to cart" />
  • add an "onclick" attribute to that <input> element so that it looks like this: 
    <input type="submit" id="add-to-cart" class="btn" name="add" value="Add to cart" 
    onclick="window.uetq = window.uetq || []; 
    window.uetq.push({ 'ec':'button', 'ea':'click', 'el':'add to cart', 'ev':'1' });" />
  • save your product.liquid file

Once you've done the above the add-to-cart element in your product.liquid file should look something like the following (note: I've added a few line breaks to make the image more readable).

 

At this point your Bing "Add to Cart" Goal should fire every time someone clicks on your web site's Add-to-Cart button, and your Bing Ads Reports should reflect how many times someone who clicked on one of your Bing Ads actually reached your Add-to-Cart Goal.  To check on this:

  • login to your Bing Ads account
  • click on the "Reports" button
  • select "Goals" in the "Report type" pulldown menu
  • click on the "Run" button

Once your Goal starts accumulating attainments your Goals Report should start looking something like the below. Note that the "Conversions" column shows the number of times that your goal was achieved and via which Account, Campaign an Ad Group.

 

That's pretty much it for the first installment. Stay tuned for the next post, which will show you how to track Shopify sales conversions (completed purchases) using Bing Universal Event Tracking.

If you found this blog post useful, please consider buying one of our beautiful tablecloths!

 

 

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.