No. 09 · Section · v1.0.0
Défilé
A hero that takes its time.
Slow-zoom slides, a blur cross-fade, progress dots and a pause control.
Code complete · live Shopify store test pendingPreview shown with demonstration products and imagery from a fictional store, to show how the section can look once installed and configured. Included files and features are detailed below. The demo bag doesn't touch your Maisonblock bag.
What it does
Défilé is a hero slideshow with a slow zoom, a blur cross-fade and copy that rises in a short stagger. Frosted dots fill as each slide plays, and a small pill gives previous, pause and next. Swipe and arrow keys work too.
Features
- Slow zoom and blur cross-fade
- Staggered copy
- Progress dots
- Previous, pause and next; swipe and keys
- Separate phone image per slide
- Pauses on hover, focus and for reduced motion
You'll need
- Wide images (2400 px is plenty); optional phone images
Configuration options
Every setting this piece adds to the theme editor, read straight from its code; up to 6 blocks.
| Theme-editor setting | Type | Default |
|---|---|---|
| Name for screen readers | text | Featured collections |
| Time per slide | range | 5 |
| Height (desktop) | range | 80 |
| Height (phone) | range | 70 |
| Shade behind text | range | 35 |
| Text colour | color | #ffffff |
| Each “Slide” block | ||
| Image | image picker | — |
| Phone image (optional) | image picker | — |
| Small heading | text | New season |
| Heading | text | Quiet layers, made to last |
| Button label | text | Discover the edit |
| Button link | url | — |
Screens
On desktop and phone
Every image is a capture of the live demo above, unedited. Demo store, products and photography are examples (photos: Unsplash and Pexels).
Questions about Défilé
How many slides?
Up to six. Three or four read best.
More from the house
