How to connect a script through the Сustomizer when choosing a setting

Technical Q&A
,

Topic summary

A developer is working with a Shopify theme schema checkbox that should conditionally load a JavaScript file (component-countdown.js) when enabled.

Current Implementation:

  • Using Liquid conditional logic to check section.blocks.first.settings.enable_countdown_timer
  • Script tag includes defer attribute and loads via asset_url filter

The Problem:

  • The script only loads after clicking “Save” in the Customizer
  • Checking the checkbox alone doesn’t trigger the script to load immediately

Question:

  • Seeking advice on whether this behavior can be fixed or if there’s a better approach to load the script dynamically when the checkbox state changes in real-time
Summarized with AI on November 6. AI used: claude-sonnet-4-5-20250929.
1

I have a schema checkbox and I need to make sure that if it is checked, then I load the script

{%- if section.blocks.first.settings.enable_countdown_timer -%}
  <script src="{{ 'component-countdown.js' | asset_url }}" defer="defer"></script>
{% endif %}

The problem is that if you check the checkbox, it does not load, but only if you click “Save”. Can this be fixed or is it better to load it right away?