Stop Confusing Your Customers When Promoting Products With Variations

When discounting products with variations such as color, size, fabric, etc. it becomes easy to frustrate your customers. How? By not linking directly to the product variation that is discounted. For example, you might send an email that promotes pants at a special, low price. Your customers click on the offer, reach the product page and have no idea which options to pick in order to activate that price. To find that out they have to try all the options and waste time on your site before giving up and shopping somewhere else. It doesn't have to be that way, especially if you are running on Bigcommerce.

The script below allows you to link directly to a product variation. So if you want to discount red pants, then you can create a link that will take customers directly to the product page and automatically select the color red for them. Sounds good? Sure it does. Now let's see how to do it.

Instructions

1. Login to your control panel and navigate to Design -> Theme Files/Edit HTML & CSS and open the product.html file.

2. Add the following code to the bottom of the file, right before the </body> tag:

   
   $(document).ready(function(){
   
   function getQueryVariable(parameter) {
       var searchString = window.location.search.substring(1);
       var params = searchString.split('&');
       for (var i = 0; i < params.length; i++) {
           var pair = params[i].split('=');
           if (decodeURIComponent(pair[0]) == parameter) {
               return decodeURIComponent(pair[1]);
           }
       }
   }
   
   var keyword = getQueryVariable('k');
   
   if(keyword) {
       $(".productOptionViewSelect select option:contains("+keyword+")").attr('selected', true).trigger('click');
   }
   
   });
   
   

How It Works

The code looks for a parameter named k in the URL. If the parameter exists it performs a case-sensitive search in the drop down options based on the parameter's value. When a match is found the option is selected and then a click event is triggered. If you want to choose the "Red" option for a certain product, then this should be the link: www.your-store.com/path-to-product/?k=Red. When a customer clicks on that link they will be taken to the product page and the "Red" option will be automatically chosen from the color drop down.

Troubleshooting

If the option is not automatically chosen... then make sure the value of the k parameter is an exact match with the value in the drop down. The match is case sensitive, so "red" will match "red" but not "Red".

If you have multiple options such as color, size, fabric, etc ... then you will need to contact us. The code only works for one option.