Re: Problems initializing SwiperJS on Shopify

Problems initializing SwiperJS on Shopify

3 0 2

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'




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.



Replies 4 (4)

Shopify Partner
3204 623 899

<script src=""></script>
<script src="{{ 'swiper-bundle.min.js' | asset_url }}" defer="defer"></script>

- If helpful then please Like and Accept Solution.
- Want to modify or custom changes or bug fix on store Hire me. - Email: - Skype: navrocks1 ,
- Try GEMPAGES a great page builder
- Support me PayPal
3 0 2

Hi Guleria, 

Thanks, but I had got the script loading already using

<script src="{{ 'swiper-bundle.min.js' | asset_url }}" defer="defer"></script>

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..

3 1 0

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. 

Shopify Partner
1 0 0

The thing is that swiper does not render after the liquid gets rendered 😐 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', {});