Need a page refresh everytime a variant changes to get the correct code to load

Store Design

Topic summary

Core Issue:
A Shopify store owner needs a quantity box to appear when selecting a specific product variant (custom donation amount), but it only works after manually refreshing the page.

Solution Provided:
A jQuery script was shared that automatically reloads the page when variant selection changes:

  • Monitors .single-option-selector for changes
  • Triggers page reload if selected variant ID differs from current
  • Should be placed in custom.js file under Assets (or theme.js if custom.js doesn’t exist)

Implementation Challenges:

  • Multiple users struggled with placement (custom.js vs theme.js location)
  • Different themes use different selectors (radio buttons vs dropdowns)
  • Some needed theme-specific adaptations (Brooklyn, Simple, Craft, Prestige themes mentioned)
  • Concerns raised about reload speed and whether refreshing is optimal solution

Key Variations:

  • For specific products only: wrap script in {% if product.title == 'Product Name' %}
  • For radio buttons: replace .single-option-selector with appropriate class name
  • Craft theme users successfully implemented by assigning custom classes to option buttons

Status:
Solution works for many users but requires theme-specific customization. Some participants acknowledge page refresh isn’t ideal but serves as functional workaround when theme’s existing JS functions are insufficient.

Summarized with AI on November 11. AI used: claude-sonnet-4-5-20250929.
15 
jQuery(function() {
    $('.single-option-selector').on('change', function(){
        setTimeout(function(){ 
          if($('[name="id"]').val() != "{{ product.selected_or_first_available_variant.id }}"){
            location.reload();
          }
        }, 1);
    });
  });

Hi Guleria,

This code refresh really too slow. Is there any way to refresh the page as fast as we select the variant product?

Regards