Lupe Camacho

If you’ve landed on this article, you probably found a Shopify tutorial asking you to add some code to the selectCallback function in your theme.

Like me, you may be scratching your head wondering what and where the selectCallback function is.

Here’s where you can find it.

A Tiny Rant 🔥

Shopify has stated in multiple issues on GitHub that there are no plans to update the existing theme customization tutorials for Slate.

This is a major pain in the butt because it seems like all the official Shopify tutorials reference functions that are out-of-date and irrelevant for developers using Shopify’s own recommended workflows.

But I digress. 🤷🏽 Here’s the info you need.

What is the selectCallback

The selectCallback is a function that’s called whenever the product variant is are changed via the <select> element on the product detail page.

For example, say I’m on a product detail page for a t-shirt. You may see the following <select> element.

Choose an option:
Small – Black Medium – Black Large – Black Small – Red Medium – Red Large – Red

Every time you choose a new option from the dropdown, a new variant is selected. As a result, the selectCallback is called.

Where to Find It in the Slate Starter Theme

So now we just need to find an equivalent function in the Shopify Slate Starter Theme.

All the JavaScript for handling changes on the PDP can be found in src/sections/product.js.

The most appropriate place here seems to be the onFormOptionChange function. You can see that it’s called in response to a select change event, and it gives you access to the variant object.

onFormOptionChange(event) {
    const variant = event.dataset.variant;

    this.renderImages(variant);
    this.renderPrice(variant);
    this.renderComparePrice(variant);
    this.renderSubmitButton(variant);

    this.updateBrowserHistory(variant);
}

That makes it perfect for placing the code that you may have been instructed to put in the selectCallback. Things like showing variant SKUs, selecting option swatches based on the currently selected variant, etc.

Have an older version?

If you’re working with an older version of the Starter Theme (pre-October 2018), you’ll need to find the updateAddToCartState function instead.

Conclusion

Because Slate is no longer in active development, I doubt we’ll see a change in the Starter Theme product scripts anytime soon.

But if this does change down the line and onFormOptionChange is no longer a thing, shoot me a line and I’ll update this article to match!

Happy coding! ⌨️🤓