New Releases
Showcase your newest products in a horizontal slider with momentum scrolling.
Quick Setup
- Add section → New releases
- Select a collection — products are sorted by newest first automatically
- Configure slider columns and card options
Section Settings
Content
| Setting | Type | Default | Description |
|---|---|---|---|
| Heading | text | NEW RELEASES | Section title. |
| Subheading | text | Explore our latest products | Optional subtitle below the heading. |
| Button | text | Shop all | Label for the 'View all' button. |
Animation
| Setting | Type | Default | Description |
|---|---|---|---|
| Image effect | radio | None | Animation applied to product images. Options: None, Reveal (curtain effect), Zoom (Ken Burns). |
Source
| Setting | Type | Default | Description |
|---|---|---|---|
| Mode | select | Collection | 'Collection' auto-populates from a collection. 'Manual' lets you select individual products. |
| Collection | collection | - | Select a collection. Products are automatically sorted by newest first. |
| Products | range | 12 | Maximum number of products to display. Range: 4–24. |
| Skip products without images | checkbox | true | Hide products that don't have a featured image. |
Slider
| Setting | Type | Default | Description |
|---|---|---|---|
| Arrows on desktop | checkbox | true | Show prev/next arrow buttons on desktop. |
| Snap to card | checkbox | false | Snap to the nearest card when scrolling stops. |
| Desktop columns | range | 4 | Number of visible cards on desktop. Range: 2–6. |
| Tablet columns | range | 3 | Number of visible cards on tablet. Range: 1–4. |
| Mobile columns | range | 1 | Number of visible cards on mobile. Range: 1–3. |
| Gap | range | 16px | Space between product cards. Range: 8–28px. |
Layout
| Setting | Type | Default | Description |
|---|---|---|---|
| Gutters | select | Match header | How section aligns with page. Options: Inherit, Match header, Edge-to-edge. |
Swatches
| Setting | Type | Default | Description |
|---|---|---|---|
| Display | select | Below card | 'Below card' shows swatches always visible. 'Hover overlay' shows them on hover. |
| Show count until hover | checkbox | true | Show '+X more colors' text until user hovers to see all swatches. |
Card Options
| Setting | Type | Default | Description |
|---|---|---|---|
| Alignment | select | Left | Text alignment for product titles and prices. |
| Image ratio | select | Portrait 3:4 | Aspect ratio for product images. Options: Portrait 3:4, Square 1:1, Landscape 4:3. |
| Image position | select | Top center | How images are cropped within the card. |
| Click behavior | select | Link to product | 'Link to product' navigates to the PDP. 'Quick add' opens the add-to-cart modal. |
Card Features
| Setting | Type | Default | Description |
|---|---|---|---|
| Color swatches | checkbox | true | Show color variant swatches on cards. |
| Max swatches | range | 5 | Maximum number of visible swatches. Range: 3–8. |
| Quick add | checkbox | true | Show quick add to cart button on hover. |
| Hover preview | checkbox | true | Show second product image on hover. |
| Favorites | checkbox | true | Show wishlist/favorites button on cards. |
| NEW badges | checkbox | true | Display 'NEW' badge on recently added products. |
Block Types
Product Block (Manual Mode)
When using Manual mode, add these blocks to select specific products:
| Setting | Type | Default | Description |
|---|---|---|---|
| Product | product | - | Select the product to include in the slider. |
Interaction Features
Desktop
- Drag with momentum — Click and drag to scroll; release to continue with physics-based momentum
- Arrow navigation — Click prev/next buttons to move one card at a time
- Keyboard support — Use left/right arrow keys when focused
- Hover effects — Secondary image preview, quick add, favorites
Mobile
- Native touch scrolling — Smooth swipe gestures with native inertia
- Peek preview — Shows a hint of the next card (78% width per card)
- Custom scrollbar — Minimal scrollbar appears during interaction
Best Practices
Content Strategy
- Keep it fresh — Update frequently to maintain the "new" factor
- Use with the right collection — Create a "New Arrivals" collection that auto-updates
- 12 products maximum — More than this feels less "curated"
- Consider timing — "New" should mean within the last 30-60 days
Design Recommendations
Desktop columns
4 (shows products + peek)
Gap
16px (balanced spacing)
Image ratio
Portrait 3:4 (fashion) or Square 1:1 (products)
Snap to card
Off (smoother browsing)
Performance
- Skip products without images — Avoids broken cards
- Limit to 12 products — Reduces initial load
- Disable hover preview — If performance is a concern
Troubleshooting
Products not showing
- Verify a collection is selected (Collection mode)
- Check that products exist and are published
- Try toggling "Skip products without images" off
Slider not scrolling
- Ensure there are more products than visible columns
- Check for JavaScript errors in browser console
Cards look different than expected
- Verify image ratio and position settings
- Check card feature toggles (swatches, quick add, etc.)
- Ensure product images are high enough quality
"Shop all" button not working
- Button only appears when a collection is selected
- In Manual mode, there's no automatic shop all link