the Shopify collection buy button creates products that have pull-down menus for choosing options like color. when you change a color, the product image changes.

example collection page

i want to trigger those product image changes with javascript. relevant html looks like this:

<div class="shopify-buy__option-select-wrapper" data-element="option.wrapper">
    <select id="Option-999-0" class="shopify-buy__option-select__select" name="Color" data-element="option.select">
          <option selected="" value="Silver">Silver</option>
          <option value="Gold">Gold</option>
          <option value="Rainbow">Rainbow</option>
          <option value="Blue">Blue</option>
    </select>
</div>

some things i have tried:

// get the <select> element (this part works)
let selectElement = document.getElementById('Option-999-0')
//select a new value
selectElement.value = 'Blue'
let changeEvent = new Event('change');
selectElement.dispatchEvent(changeEvent)

I've also tried click() -ing on various things like:

selectElement.options[3].click()

but the javascript from shopify never seems to "hear" my actions unless i literally click my mouse on the select menu. thats the only way i can get the image to change. what am i doing wrong?

this is the javascript from shopify: https://sdks.shopifycdn.com/buy-button/latest/buy-button-storefront.min.js ...i searched it for "isTrusted" and no results fwiw.

i have tried creating the buy button with and without the iframe. i seem to be able to select the elements just fine either way (using contentDocument property of iframe), but my javascript never triggers the image change response from the shopify code, and i cant figure out what action shopify is actually listening for?

what i am trying to achieve is to replace the pulldowns with regular text in little boxes that you can click on to change the image. if this can be done through the shopify buy button options that would be fine also.

any clues appreciated!