logo
Shopify Builds>Integrations>Swiper

Swiper

Swiper is an open-source JavaScript slider library. It handles touch gestures, breakpoints, pagination and looping for horizontal rails, and it runs standalone with no framework behind it. Shopify themes commonly enqueue one copy of it globally and let individual sections initialize their own instances against that copy rather than bundling their own.

Documented at https://swiperjs.com/.

How We've Used It

It is the carousel our sections lean on most, and the pattern is one global copy, many local instances: a section finds the enqueued library instead of shipping a second one, then initializes only what it needs. Two habits recur. Rails defer initialization until the carousel is near the viewport, so a page carrying several of them doesn't build all of them at first paint. And the markup is authored to be laid out correctly before the library touches it, so a row doesn't reflow when its instance mounts. Where a section has to be a grid above a breakpoint and a rail below it, the instance is constructed and destroyed on the breakpoint rather than left running.

Builds Using It

19 further gated builds use it; their pages follow.

Related Entities

Our Role

Integration. We initialize and configure the library inside our own sections; the library itself is open source and stays as published.

Builds

Rotating announcement carousel above the header, with pause control

An auto-rotating promo bar rendered by the layout above the header: a looped Swiper of up to ten text blocks that reserves its height before any script runs, waits for the carousel library on a bounded retry, and gives the shopper a real pause control whose label always says what it will do next.

Nudestix

'Bundle and save' PDP block driven by a product-list metafield

One product-list metafield, one card per product, and on every card a working add-to-cart form of its own — a merchandiser-curated set sold on the product page where the shopper already is, with a carousel that only appears when there is more than one thing to scroll.

LUS Brands

Cart page rebuilt around loyalty points, protected gifts and a dark order summary

Dawn's single-table cart section rewritten as a two-column page: per-line loyalty points computed in Liquid, gift lines a shopper can't edit away, bundle lines that link back to the builder that made them, and a summary panel that survives every re-render.

Nudestix

Merchandisable homepage product carousel with a tag-driven badge engine and inline add-to-bag

A two-column row — optional linked lifestyle image, Swiper rail — where every label, color, badge and product is a theme-editor setting, and each card can add to bag without leaving the page.

LUS Brands

Shop-by-category carousel with collection-aware card fallbacks

A homepage category rail where adding a category is one action — pick the collection. The image, the link and the label all resolve from the collection record unless a merchandiser deliberately overrides them.

LUS Brands

Homepage exclusive-offers rail with caption heights equalized in idle time

A merchandiser-built row of promotional tiles for the Nudestix homepage — grid or swipe rail, chosen separately for desktop and mobile — whose uneven caption blocks are measured in idle time and equalized through a single `--content-height` custom property.

Nudestix

Before/after customer results carousel with an attached product card

One slide per customer result: two labeled photos, a quote with its attribution, and the product that was used — rendered as the storefront's own product card, with the live price and a working add-to-bag, on a page template where Shopify hands the theme no product at all.

Nudestix

Homepage hero carousel v2 - video and split-image slides with per-slide typography control

The live homepage hero: two independent carousels over one authored slide list, video slides and split-image slides, typography controlled per slide, and promotion events fired from the slide's own copy.

Nudestix

Kids featured collection: a custom element that builds its Swiper on approach and wraps the theme's own product cards

A `<kids-featured-collection>` element leaves its slides as static markup until an IntersectionObserver fires, initializes Swiper then, and tears everything down when the section is removed — around Dawn's `card-product`, not a card of its own.

LUS Brands

Accessible play/pause web component for autoplaying hero video

A `<play-pause>` custom element that gives a muted, autoplaying hero video a real keyboard-reachable control — self-wiring from a selector in its own markup, so Swiper can clone and reorder slides without any script knowing how many there are.

Nudestix