Section only updating after saving customizer

Store Design

Topic summary

A developer is implementing a Splide.js slider in a Shopify theme with a customizer checkbox to toggle loop functionality. The core issue: changes to the loop setting only appear after saving the customizer, not in real-time preview.

Current implementation:

  • Splide initialization uses Liquid templating to set the type parameter based on section.settings.loop
  • The script includes event listeners for Shopify’s section events (shopify:section:load)
  • Splide files are uploaded to assets folder and linked in theme.liquid
  • Console correctly logs “loaded” when settings are checked

The problem: The customizer preview doesn’t reflect changes until saved, despite proper event listener setup and console logging. The developer has attempted multiple event listeners and debugging approaches but the live preview remains unresponsive to the loop toggle.

This appears to be a Shopify theme customizer live preview synchronization issue where Liquid variables aren’t re-evaluating dynamically.

Summarized with AI on November 9. AI used: claude-sonnet-4-5-20250929.
1

im using splide js library for sliders. its currently functioning but one thing thats bugging me is i have a checkbox allowing users to enable loop which works BUT only updates once customizer is saved. i want to show these changes in live time. script and part of schema is below.

the script below is inside the same file as the liquid.

<script>
document.addEventListener('DOMContentLoaded', function() {
    let splide;

    function initializeSplide() {
        let typeSetting = {% if section.settings.loop %}'loop'{% else %}'slide'{% endif %};
        splide = new Splide('.splide', {
            type   : typeSetting,
            padding: '5rem',
            gap: '20px'
        }).mount();
        console.log("Splide initialized");
    }

    function reinitializeSplide() {
        if (splide) {
            splide.destroy();
            console.log("Splide destroyed");
        }
        initializeSplide();
    }

    initializeSplide();

    if (Shopify.designMode) {
        document.addEventListener('shopify:section:load', () => {
            console.log("loaded");
            reinitializeSplide();
        });
    }
});
</script>

portion of schema

        {
            "type": "checkbox",
            "id": "autoplay",
            "label": "Autoplay",
            "default": false
        },

the console correctly logs “loaded” anytime something is checked yet customizer is not reflecting these changes.

for context, the splide min files are uploaded in assets folder and linked in theme.liquid file.

tried multiple event listeners, console logging to debug.