Custom collection slider for Shopify
Product Collection Slider — Installation Guide
A self-contained, animated product collection slider compatible with any Shopify theme
(Dawn, Debut, Sense, Craft, Crave, Brooklyn, Minimal, and all custom themes).
What's included
File
Location in your theme
product-collection-slider.liquid
sections/
pcs-card.liquid
snippets/
Step 1 — Upload the files
Option A: Shopify Admin (recommended for beginners)
Go to Online Store → Themes in your Shopify admin.
Next to your active theme click ⋯ → Edit code.
Upload sections/product-collection-slider.liquid:
In the left panel, click the Sections folder.
Click Add a new section (or the + button).
Name it product-collection-slider, click Done.
Delete the placeholder content and paste the full contents of product-collection-slider.liquid.
Click Save.
Upload snippets/pcs-card.liquid:
Click the Snippets folder.
Click Add a new snippet.
Name it pcs-card, click Done.
Paste the full contents of pcs-card.liquid.
Click Save.
Option B: Shopify CLI (for developers)
Step 3 — Configure in the Theme Editor
Open the section settings panel to customise:
Setting
Description
Collection
Which Shopify collection to display
Max products
How many products to pull (4–24)
Cards visible
Slides shown at once (2–6)
Image ratio
Square / Portrait / Landscape / Wide
Show vendor
Display brand name above title
Show compare price
Cross-out original price for sale items
Show Quick Add
Hover button that adds to cart via AJAX
Show Sale badge
"Sale" / "Sold out" label on image
Card corner radius
0 px (sharp) → 24 px (very rounded)
Autoplay
Auto-advance slides
Autoplay speed
2–10 seconds
Dot indicators
Navigation dots below the slider
Progress bar
Thin bar showing scroll position
Full width
Edge-to-edge layout
Section padding
Top / bottom spacing
Colors
Background, accent, text
Colour Swatches (optional)
Swatches appear automatically when your products have a variant option named Color or
Colour. The swatch colour is derived from the option value name (e.g. "Red" → CSS
background-color: red).
For custom colours (e.g. "Dusty Rose"), add a CSS rule to your theme's base stylesheet:
Css
Responsive behaviour
Screen width
Cards shown
≥ 1024 px
As configured in Theme Editor
601–1023 px
2 cards
≤ 600 px
Native scroll-snap (no JS required)
Troubleshooting
Cards not showing / "Collection not found"
Make sure you selected a collection in the Theme Editor settings panel.
The slider shows 6 placeholder cards in the editor when no collection is assigned — this is expected.
Quick Add button not working
The AJAX endpoint (/cart/add.js) is standard Shopify and works on all themes.
If your theme uses a custom cart drawer, dispatch a cart:updated event — the snippet already fires it.
For themes using AlpineJS or Stimulus, listen for the cart-update custom event.
Slider width is wrong after install
Clear your browser cache and reload the Theme Editor.
Some themes wrap sections in extra padding containers; use the Full Width toggle to compensate.
Conflict with jQuery-based themes (older themes)
The slider uses vanilla JS and has no jQuery dependency. No conflicts expected.
Uninstalling
In the Theme Editor, remove the section from all pages.
In the code editor:
Delete sections/product-collection-slider.liquid
Delete snippets/pcs-card.liquid
No other files are modified — the install is completely self-contained.
Changelog
Version
Notes
1.0
Initial release — drag/touch/keyboard, autoplay, dots, progress bar, Quick Add, swatches
What's included
File
Where it goes
product-collection-slider.liquid
sections/ folder
pcs-card.liquid
snippets/ folder
INSTALL.md
Your reference guide
Quick Install (3 steps)
1. Upload files via Shopify Admin
Go to Online Store → Themes → ⋯ → Edit code
In Sections folder → Add new section → name it product-collection-slider → paste the file contents → Save
In Snippets folder → Add new snippet → name it pcs-card → paste the file contents → Save
2. Add to your page
Go to Customize in the Theme Editor
Click Add section → find Product Collection Slider
Pick your collection in the settings panel → Save
3. Configure everything visually — no further code needed.
Features built in
Smooth slide animation with CSS cubic-bezier easing
Drag & touch support — swipe on mobile, drag on desktop
Keyboard navigation — left/right arrow keys
Autoplay with pause-on-hover
Dot indicators + progress bar
Entrance animations — cards fade up as they enter the viewport
Quick Add to Cart via AJAX (fires cart:updated event for cart drawers)
Sale / Sold Out badges, compare-at price, color swatches
Edge-fade mask on the track for a polished look
Full-width mode toggle
Fully responsive — scroll-snap on mobile, no JS required
Works in Theme Editor with placeholder cards when no collection is selected
Tested on Dawn, Debut, Sense, Craft, Brooklyn, Minimal