How to properly update JS after editing a section in Customizer

Retired Boards Appdev Store Design
, , ,

Topic summary

A developer is implementing a SplideJS slider in a Shopify section and encountering issues with proper updates in the Customizer.

Original Problem:

  • The slider wasn’t updating correctly when editing the section in Shopify’s Customizer
  • The developer found a working solution but had to duplicate code to handle both initial page load (DOMContentLoaded) and Customizer updates (shopify:section:load)

Solution Provided:
Another user suggested refactoring the duplicated code into a reusable function:

  • Create an initSplide() function containing the slider initialization logic
  • Call this function on both DOMContentLoaded and shopify:section:load events
  • This eliminates code duplication while maintaining proper functionality in both contexts

Status: The issue appears resolved with the function-based approach, which is a standard pattern for handling Shopify theme section updates.

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

I have a Shopify section with a SplideJS slider. The problem was a buggy update of the slider in the customizer. I found a way to update correctly in the customizer and the method works. But the problem is that I am duplicating the code for this. Is there any other way to avoid this? Maybe I’m doing it wrong

document.addEventListener('DOMContentLoaded', () => {
    const rlHotspotSlider = new Splide('.rl-hotspot-slider', {
      pagination: false,
      gap: 1,
      drag: false,
      perPage: 6,
      perMove: 1,
    });
    rlHotspotSlider.mount();

    if (Shopify.designMode) {
      document.addEventListener('shopify:section:load', function(event) {
        const rlHotspotSlider = new Splide('.rl-hotspot-slider', {
          pagination: false,
          gap: 1,
          drag: false,
          perPage: 6,
          perMove: 1,
        });
        rlHotspotSlider.mount();
      });
    }
  });
2

@Rostislav333 Thanks for this solution, I was having the same issue. Regarding your question I just created a function out of it:

document.addEventListener( 'DOMContentLoaded', function() {
    initSplide();

    if (Shopify.designMode) {
      document.addEventListener('shopify:section:load', function(event) {
        initSplide();
      });
    }
});

function initSplide() {
  const splides = document.querySelectorAll('.splide');
  // do your initialisation here
}