Editorial Grid
A magazine-style collection layout inspired by luxury brands. Combine product cards with editorial content blocks for visually dynamic layouts that tell a story while selling products.
Overview
Unlike standard product grids, the Editorial Grid creates engaging, editorial-style layouts with advanced features.
Mixed Content
Hero Moments
Repeat Patterns
Rich Animations
Quick Setup
Add the Section
Add section → Editorial Grid
Add Products
Add a 📦 Product grid block to display products from your collection
Create Hero Layouts (Optional)
Add Product placements or Repeat patterns for hero tile layouts
Layout Patterns
The Editorial Grid supports various layout patterns to create visual interest. Try the interactive demo below to see how different settings affect the grid:
🎨Interactive Grid Layout Demo
Adjust settings to see how the grid changes
Pattern Descriptions
Standard Grid
Equal-sized product cards in a uniform grid. Clean and predictable.
Hero Left/Right
One large 2x2 hero tile with smaller cards beside it. Great for featured products.
Alternating Heroes
Hero tiles alternate sides to create visual flow as users scroll.
Grid Layout Settings
Column Configuration
| Setting | Type | Default | Description |
|---|---|---|---|
| Columns (desktop) | range | 4 | Number of columns on large screens. Range: 2–5. |
| Columns (tablet) | range | 3 | Number of columns on medium screens. Range: 2–4. |
| Columns (mobile) | select | 2 columns | Mobile layout: 1 or 2 columns. |
| Gap between tiles | range | 0px | Space between grid items. Range: 0–48px. Set to 0 for seamless editorial look. |
| Edge-to-edge layout | checkbox | true | Extend grid to viewport edges for luxury editorial style. |
| Content alignment | select | Left | Card content alignment: Left, Center, or Right. |
Row Height (Desktop)
| Setting | Type | Default | Description |
|---|---|---|---|
| Height mode | select | Auto (match first image) | How row heights are calculated. |
| Custom height | range | 420px | Fixed pixel height when using Custom mode. Range: 240–900px. |
Height Mode Options:
⚡ Auto
Matches first image
Square (1:1)
Equal width/height
Portrait (4:5)
Slightly taller
Portrait (3:4)
Classic portrait
Portrait (2:3)
Tall portrait format
Tall (9:16)
Social story style
Custom (px)
Fixed pixel height
Mobile Layout
| Setting | Type | Default | Description |
|---|---|---|---|
| Mobile height mode | select | Custom (px) | How mobile row heights are calculated. |
| Mobile custom height | range | 350px | Fixed height for mobile when using Custom mode. Range: 200–600px. |
Product Display Settings
Loading & Pagination
| Setting | Type | Default | Description |
|---|---|---|---|
| Load more | select | Infinite scroll | How additional products load: 'View more' button or automatic infinite scroll. |
Card Options
| Setting | Type | Default | Description |
|---|---|---|---|
| Color swatches | select | Below card (always visible) | Display mode: Always visible below card, or Overlay on hover. |
| Image position | select | Top center | Focal point for card images: Top, Center, or Top center. |
Card Gallery
Enable a swipeable image gallery on product cards.
| Setting | Type | Default | Description |
|---|---|---|---|
| Card gallery | select | Use global setting | Enable inline image galleries on product cards. |
| Max gallery images | range | 4 | Maximum images in card gallery. Range: 2–8. |
| Gallery navigation | select | Arrows | Navigation controls: Arrows, Lines, Arrows + Lines, or None. |
Animation
| Setting | Type | Default | Description |
|---|---|---|---|
| Image animation | select | None | Scroll-based animation: None, Reveal on scroll, or Zoom on scroll. |
Extra Features
| Setting | Type | Default | Description |
|---|---|---|---|
| Show filter bar | checkbox | false | Display facet filters and breadcrumbs above the grid. |
| Hide text on first hero | checkbox | false | If the first tile is a hero (2×2), show image only without title/price. |
| Show grid index numbers | checkbox | false | Debug tool: displays tile positions to help set up placements. |
| Filter alignment | select | Left | Position of filter bar: Left, Center, or Right. |
Block Types Overview
The Editorial Grid supports 8 block types to create rich, editorial layouts:
📦 Product Grid
Main product display from collection
📍 Product Placement
Override size of specific products
🏷️ Featured Product
Insert specific product with sizing
🖼️ Hero Composition
3-panel editorial tile
👗 Look Tile
Styled look with related products
📢 Promo Tile
Text-based promotional content
🔄 Repeat Pattern
Automatic hero placement
➖ Spacer
Add vertical spacing
Block: 📦 Product Grid
The main product display block. Add this to show products from a collection.
| Setting | Type | Default | Description |
|---|---|---|---|
| Product source | select | From collection | Where products come from: Collection, Manual selection, or By rule (tags). |
| Products (for manual) | product_list | - | Manually selected products when using Manual source. |
| Include tags | text | - | Only show products with these tags (comma-separated). |
| Exclude tags | text | - | Hide products with these tags (comma-separated). |
| Maximum products | number | 24 | Limit how many products to display. |
Card Display Options
Block: 📍 Product Placement
Override the size of specific products in the grid to create hero moments.
| Setting | Type | Default | Description |
|---|---|---|---|
| Product position | number | 1 | Which product to style (1 = first, 2 = second, etc.). |
| Width (columns) | range | 1 | Columns to span. Range: 1–4. |
| Height (rows) | range | 1 | Rows to span. Range: 1–3. |
To make the first product a 2×2 hero, add a Product Placement block with Position = 1, Width = 2, Height = 2.
Block: 🔄 Repeat Pattern
Create automatic repeating hero layouts without manual placement.
| Setting | Type | Default | Description |
|---|---|---|---|
| Pattern | select | Left side of row | How heroes are positioned: Left, Right, Alternating, Center, or Custom. |
| Tile size | select | 2×1 (tall) | Hero dimensions: 1×1, 2×1 (tall), 1×2 (wide), or 2×2 (hero). |
| Start at row | range | 3 | First row to apply the pattern. Range: 1–20. |
| Repeat every N rows | range | 3 | How often to repeat (0 = once only). Range: 0–10. |
| Position in row | select | Leftmost | Where in the row: Leftmost, Rightmost, Center, or Specific column. |
| Max times to apply | range | 20 | Maximum occurrences of this pattern. Range: 1–20. |
| If space is taken | select | Skip | Conflict handling: Skip, Push right, or Replace. |
| On mobile | select | Shrink to 1×1 | Mobile behavior: Keep size, Shrink to 1×1, Full width, or Hide. |
Block: 🖼️ Hero Composition
A complex editorial tile with 3 image panels for maximum visual impact.
| Setting | Type | Default | Description |
|---|---|---|---|
| Left panel (large) | image + link + caption | - | Main hero image with optional link and caption. |
| Right top | image + link + caption | - | Top right image panel. |
| Right bottom | image + link + caption | - | Bottom right image panel. |
Block: 👗 Look Tile
Showcase a styled look with related products.
| Setting | Type | Default | Description |
|---|---|---|---|
| Image | image | - | Main look/outfit image. |
| Heading | text | - | Look title. |
| Description | richtext | - | Look description text. |
| Link | url | - | Destination link. |
| Related products | product_list | - | Products featured in this look. |
| Width (columns) | range | 2 | Columns to span. Range: 1–4. |
Block: 📢 Promo Tile
Text-based promotional tile for sales, announcements, or CTAs.
| Setting | Type | Default | Description |
|---|---|---|---|
| Title | text | - | Promo heading. |
| Text | textarea | - | Promo body text. |
| Link | url | - | Destination URL. |
| Style | select | Neutral (subtle) | Background style: Neutral or Accent (bold). |
Creating Hero Layouts
Option 1: Product Placement (Manual Control)
Add a Product Placement block
Click "Add block" and select 📍 Product Placement
Set the product position
Enter the product number (1 = first product, 2 = second, etc.)
Set dimensions
Choose Width (columns) and Height (rows) - e.g., 2×2 for a full hero
Option 2: Repeat Pattern (Automatic)
Add a Repeat Pattern block
Click "Add block" and select 🔄 Repeat Pattern
Choose tile size
Select 2×2 for heroes, 2×1 for tall, 1×2 for wide
Configure frequency
Set Start at row and Repeat every N rows
Common Hero Layouts
Use Cases
Collection Pages
Automatic collection source, infinite scroll, repeat patterns for visual rhythm
Curated Collection
Manual product selection, strategic featured products, look tiles and promos
Lookbook / Campaign
Hero compositions, look tiles with products, 0px gap, edge-to-edge layout
Sale Page
Promo tiles with sale messaging, hero products, quick add buttons
Best Practices
Visual Hierarchy
Performance
Mobile Optimization
Troubleshooting
⚠️Products not showing
- Verify a 📦 Product grid block is added to the section
- Check product source setting (collection vs manual)
- Ensure the collection exists and has products
- Review include/exclude tags if using tag filtering
📍Hero placement wrong
- Enable Show grid index numbers to see positions
- Remember: Product position is 1-indexed (1 = first product)
- Check for conflicting repeat patterns
- Verify column count matches your expected layout
📐Grid looks uneven
- Check if all products have similar image aspect ratios
- Use a specific aspect ratio instead of Auto
- Verify gap setting is consistent
🎨Swatches not showing
- Enable Show color swatches in the Product grid block
- Ensure products have color variants configured
- Check global swatch settings in Theme Settings
📱Mobile layout issues
- Check mobile columns setting (1 or 2)
- Review repeat pattern mobile behavior setting
- Test with an actual mobile device, not just browser resize