trigger function on a variant selection change

Shopify Partner
13 0 0



I am trying to follow the following instructions to trigger some function when the user changes variant on the product page.


I have put on top of "product.template.liquid" the following code:


// <![CDATA[
var selectCallback = function(variant, selector) {
// initialize multi selector for product
jQuery(function($) {
new Shopify.OptionSelectors("product-select", { product: , onVariantSelected: selectCallback });
// ]]>


I'm not sure what should be in front of "product:". If I put nothing (as in the tutorial), I have a "syntax error", and if I put the liquid tag "{{product}}" I have the error "productDrop" is not defined. I have no idea why it does not work, I thought I had followed the instructions correctly.


Anyone sees the problem?

Shopify Expert
2684 67 814

What theme you're using (and/or shop url)?


Most recent themes have the variant selection code in their theme javascript files. Shopify-built themes usually use slate.Variants, however, say, Boundless still uses option_selection.js library, but the code which replaced selectCallback is in it's theme.js.liquid asset under Product.prototype.

Other themes may use different code.


Most older themes  already has option_selection.js and only the ancient ones do not have any variant selection code, but in this case it's definitely better to upgrade to a newer theme.

Want to hire me to tweak a theme? Mail me at!
My post solved your problem? Like it!
I am away till Feb-15.
Shopify Partner
31 0 3

Hi there, Not sure if it matters now to you, but may be help others who are looking for similar issue.

below line should replace product parameter:

product: {{ product | json }}

So the full line would look like this 

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


Hope this helps someone.