Fires when a product customizer option with a cost attached is changed. Useful for displaying customization total or recalculating the product price.

Origin element (target)


Handler arguments

optionsCost The summed cost of all product customizer options selected by user.

Usage examples

Change the main product's price when an option with cost changes. Example code would be added within theme.liquid or product template.

/* Single-variant products have their main price html element updated directly.
   Products with multiple variants call shopifyOptionSelectors.updateSelectors, assuming that the
   selectCallback has been monkey-patched to take the options cost into account.
$('.product-customizer-options[data-product-id="##{{ }}"]').on(
  function(event, optionsCost) {
    if (typeof(shopifyOptionSelectors) !== 'undefined') {
         shopifyOptionSelectors.updateSelectors(0, {});
    } else {
          ##{{ product.price }} + optionsCost,

Did this answer your question?