issue with variant selector in Debut theme

Shopify Partner
45 0 9


i sent email to support@shopify but i assume they will just tell me to post in the forums so i'll do it right now.


Our app have an issue with the variant selection of the Debut, our app is hiding the default variant selector and show swatches, while in any other theme the way we do it is working, its not in debut and i just couldn't figure our why.


When our swatch is clicked we change the default dropdown to the value that is clicked, so if any other app or anything else want to attach an event on the change of the dropdown it won't be lost because of using our app.

So in Debut its the same, when you click on the swatch we change the dropdown value, but it doesn't change the selected variant.


When our swatch is clicked, the dropdown is changed to the clicked value, but it doesn't change the selected variant (you can see by the url), but when you change dropdown it self its working and its changing the selected variant.

Our app is triggering the change event of the select, this is why the select dropdown is changing, but i don't know why it don't change the variant as it should, you can see the issue in our test store, you can try to click on the swatches (below the default dropdown) and see the dropdown changes but the variant isn't chnaging, while when selecting a color from the dropdown does change the variant.


We tried to trigger click/change on the option, or setting the selected prop on the right option but nothing works, any help from you guys about this issue?

Shopify Expert
10007 116 1816

You might be changing the value shown but that's doesn't mean you're triggering the change event. What's the JS code that adjusts the <select> menu? I could look but since it's your app I'd assume you'll be faster at finding it.

★ Winning Partner of the Build a Business competition. ★
Shopify Partner
45 0 9

Adjusting the select? 


This is my code that trigger the select change (which doesn't trigger it of course):


I also tried this:

$(varWrapper[0][optionIndex]).find('option[value="' + swatchName + '"]').trigger("change");


The jquery selector is the select box, i know for a fact the select box have a onchange event, and its this function :

     * Event handler for when a variant input changes.
    _onSelectChange: function() {
      var variant = this._getVariantFromOptions();

        type: 'variantChange',
        variant: variant

      if (!variant) {

      this.currentVariant = variant;

      if (this.enableHistoryState) {


The variant variable is not null or undefined (_getVariantFromOption is getting the variant from the selected values in the selects).


Any ideas? i will test later on if maybe the variant variable is the old one and its getting the values somehow differently.


Note: the last function is the function of the theme and not mine.

Shopify Expert
2684 67 841

Hi Panda, 

I noticed that when you click swatches the selector is changing, but the theme's  _onSelectChange function is not fired. 

However, if after clicking the swatch I then run $('.single-option-selector').trigger('change') manually, the _onSelectChange  is called and variant selection goes as expected.

Could there be some timing issue?

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
45 0 9

This is intresting info tim, thanks for pointing this out, it is actually working if i trigger the change in the console, but when i do the same from my code, it don't fire the change event, its if my code don't see that the select have a change event.

This is also have nothing to do with timing, i setInterval for that trigger and it never fired.

If i create new event listener of change to that select, and then i trigger the event it works.  


This is the full code of the function after you click on swatch: 

This is how we load our JS (maybe the issue is there because we upload new jquery ?

Any idea to why my code don't see the change event? 


Shopify Partner
45 0 9

OK so i have figured out the issue, for some reason jquery couldn't see that that element have a change event listener, so i ended up using the no-jquery version of trigger:


function triggerEvent(el, type){
       if ('createEvent' in document) {
            // modern browsers, IE9+
            var e = document.createEvent('HTMLEvents');
            e.initEvent(type, false, true);
        } else {
            // IE 8
            var e = document.createEventObject();
            e.eventType = type;
            el.fireEvent('on'+e.eventType, e);

triggerEvent(elem, "change");


New Member
3 0 0

Hi Seller, could you please, give me all your javascript part about this swatch new trigger event ?