Slider Not Working in Preview/Customization Mode in Shopify Theme Development

[bhautik_kareliya]

I’m developing a new theme in Shopify, but I’m encountering an issue where the slider (like Swiper.js, Slick Slider, or Spide Slider etc…) is not functioning in preview mode or customization mode. Has anyone experienced this problem before? What steps can I take to troubleshoot or resolve this issue?

[RobDukarski]

I would check to see if there are any sort of JS errors causing the carousel code to not function. Usually that’s what the issue is when I start debugging problems like that.

[efe]

You should probably need to use the theme editor events to retrigger the slider initiations. Documented here. Something like this, assuming you have ‘slider’ in your section name:

document.addEventListener('shopify:section:load', e => {
  if (!e.detail.sectionId.includes('slider')) return;
   initSwiper()
})

[bhautik_kareliya]

Thanks for the advice! I’ll definitely check for any JS errors in the carousel code, as that’s often where the problem lies. If I find anything, I’ll let you know, and please do the same if you discover anything on your end. I appreciate your insights!

[bhautik_kareliya]

@efe

You should probably need to use the theme editor events to retrigger the slider initiations. Documented here . Something like this, assuming you have ‘slider’ in your section name:

document.addEventListener('shopify:section:load', e => {
  if (!e.detail.sectionId.includes('slider')) return;
   initSwiper()
})

Thanks for the tip! Using the theme editor events to retrigger the slider initiations sounds like a solid approach. I’ll implement that and check for the section name as you suggested. If I encounter any issues or find any results, I’ll be sure to share. Appreciate your help!