Problems initializing SwiperJS on Shopify

Technical Q&A

Topic summary

Core Issue:
A developer is struggling to initialize SwiperJS in a Shopify Narrative theme. The library files (swiper-bundle.min.js and swiper-bundle.min.css) are loaded in the assets folder, but standard JavaScript import/require methods don’t work in Shopify’s environment.

Attempted Solutions:

  • Loading the script via <script> tags with Shopify’s asset_url filter works for including the library
  • However, initializing a Swiper instance with configuration (autoplay, navigation, pagination, breakpoints) fails
  • Navigation and pagination modules don’t seem to load properly

Key Responses:

  • One user suggested loading from CDN (unpkg.com) or using Shopify’s asset_url filter
  • Another user reported the same “Swiper is not defined” console error despite correct file inclusion
  • A proposed workaround: wrap Swiper initialization in a window ‘load’ event listener to ensure it runs after Liquid template rendering completes

Status:
The discussion remains open with no confirmed resolution. The timing issue between Liquid rendering and JavaScript execution appears to be the main obstacle.

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

Hi everyone

I’ve successfully added the Swiper JS Library and CSS to our theme (Narrative).
It’s currently sat in in the assets folder as swiper-bundle.min.js and swiper-bundle.min.css

I’ve been attempting to initialise it but due to the lack of ability to do anything like

import Swiper from 'swiper-bundle.min.js'

or

var swiper = require('swiper-bundle.min.js')

I don’t know how I’ll be able to get my initializing custom.js to run this code.

const swiper = new Swiper('.swiper', {
  loop: true,
  observer: true,
  autoplay: {
   delay: 5000,
 },
  direction: 'horizontal',
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
  scrollbar: {
    el: '.swiper-scrollbar',
  },
  slidesPerView: 1,
  spaceBetween: 10,
  breakpoints: {
    320: {
      slidesPerView: 2,
      spaceBetween: 20
    },
    480: {
      slidesPerView: 3,
      spaceBetween: 30
    },
    640: {
      slidesPerView: 4,
      spaceBetween: 40
    }
  }
});

Any ideas about how to do this on Shopify would be welcome.

Thanks!

2

Use

or

3

Hi Guleria,

Thanks, but I had got the script loading already using

However, it’s the initializing of the instance of Swiper that I’m trying to do. As the autoplay isn’t working and the navigation isn’t working, I think I have to bring in the Navigation and Pagination modules into the js file.. but Shopify doesn’t seem to be straightforward with that..

4

Hi Peterpeter,

have found a solutions for integrating swiper js in your shopify store? My console always gets an error “Swiper is not defined” eventho i included everything correctly. I use the swiper init in the newly created liquid code but it doesnt work.

5

The thing is that swiper does not render after the liquid gets rendered :neutral_face: So you should add an event listener as ‘load’ and initialize it in there as this:

window.addEventListener("load", function(){
const swiper = new Swiper('.your_swiper_class', {});
})