Layout controls
The Layout tab governs structure — how wide your content runs, how much space sits between sections, and the overall rhythm of the page. These are the settings that make a store feel airy or dense.
Layout reference
| Group | Control | Options | What it does |
|---|---|---|---|
| Transition Speed | enum: snappy(150ms) | default(250ms) | gentle(400ms) | How fast things move. Fast feels responsive; slow feels laboured, especially on repeat visits. | |
| Scroll Animation | enum: none | fade-up | slide-in | scale-up | Whether sections animate in as you scroll to them. Effective once, tiring on a long page. | |
| Motion Preset | Animation Style | 6 preset cards: subtle_elegant | energetic_bold | gentle_organic | snappy_modern | playful_bounce | dramatic_reveal | A preset that sets all motion at once. Subtle is right for most stores; anything stronger draws attention away from the products. |
| Motion Preset | (preset writes) Motion Duration | string ms — from preset.entrance_duration_ms | Set for you by the animation preset above. Change the preset rather than this value unless you need something specific. |
| Motion Preset | (preset writes) Motion Easing | string easing — from preset.entrance_easing | Set for you by the animation preset above. Change the preset rather than this value unless you need something specific. |
| Motion Preset | (preset writes) Hover Scale | number — from preset.hover_scale | Set for you by the animation preset above. Change the preset rather than this value unless you need something specific. |
| Motion Preset | (preset writes) Hover Duration | string ms — from preset.hover_duration_ms | Set for you by the animation preset above. Change the preset rather than this value unless you need something specific. |
| Motion Preset | (preset writes) Stagger Delay | string ms — from preset.stagger_delay_ms | Set for you by the animation preset above. Change the preset rather than this value unless you need something specific. |
| Motion Preset | (preset writes) Entrance Distance | string px — from preset.entrance_distance_px | Set for you by the animation preset above. Change the preset rather than this value unless you need something specific. |
| Motion Preset | (preset writes) Parallax Intensity | number — from preset.parallax_intensity | Set for you by the animation preset above. Change the preset rather than this value unless you need something specific. |
| Density | Page Density | compact | The overall breathing room. Comfortable gives everything space; compact fits more above the fold — useful for a large catalogue, tiring for a landing page. |
| Density | Page Density | default | The overall breathing room. Comfortable gives everything space; compact fits more above the fold — useful for a large catalogue, tiring for a landing page. |
| Density | Page Density | spacious | The overall breathing room. Comfortable gives everything space; compact fits more above the fold — useful for a large catalogue, tiring for a landing page. |
| Corner Roundness | Border Radius (global) | none | How rounded corners are, everywhere at once. Sharp corners read technical and serious; heavy rounding reads friendly and consumer. |
| Corner Roundness | Border Radius (global) | sm | How rounded corners are, everywhere at once. Sharp corners read technical and serious; heavy rounding reads friendly and consumer. |
| Corner Roundness | Border Radius (global) | md | How rounded corners are, everywhere at once. Sharp corners read technical and serious; heavy rounding reads friendly and consumer. |
| Corner Roundness | Border Radius (global) | lg | How rounded corners are, everywhere at once. Sharp corners read technical and serious; heavy rounding reads friendly and consumer. |
| Corner Roundness | Border Radius (global) | full | How rounded corners are, everywhere at once. Sharp corners read technical and serious; heavy rounding reads friendly and consumer. |
| Section Spacing | Section Spacing | tight | The gap between one section and the next. This is what makes a page feel considered rather than crammed. |
| Section Spacing | Section Spacing | default | The gap between one section and the next. This is what makes a page feel considered rather than crammed. |
| Section Spacing | Section Spacing | loose | The gap between one section and the next. This is what makes a page feel considered rather than crammed. |
| Page Width | Page Width | narrow | How wide your content runs. Narrow keeps lines short and readable for text-led stores; full-width suits image-heavy catalogues but makes paragraphs hard to track. |
| Page Width | Page Width | boxed | How wide your content runs. Narrow keeps lines short and readable for text-led stores; full-width suits image-heavy catalogues but makes paragraphs hard to track. |
| Page Width | Page Width | wide | How wide your content runs. Narrow keeps lines short and readable for text-led stores; full-width suits image-heavy catalogues but makes paragraphs hard to track. |
| Page Width | Page Width | extra | How wide your content runs. Narrow keeps lines short and readable for text-led stores; full-width suits image-heavy catalogues but makes paragraphs hard to track. |
| Page Width | Page Width | full | How wide your content runs. Narrow keeps lines short and readable for text-led stores; full-width suits image-heavy catalogues but makes paragraphs hard to track. |
| Cards | Card Padding | Slider 8–48 px, step 4, default 24 | Space inside a card, between its border and its contents. Too little and the card feels cramped whatever else you fix. |
| Cards | Card Gap | Slider 8–40 px, step 4, default 20 | The gap between cards in a grid. Wider gaps make each card read as its own thing; tighter gaps make them read as one block. |
| Custom CSS | Custom CSS | Textarea, sliced to 10000 chars | An escape hatch for anything the controls don't cover. It applies after everything else, so it can override the theme — and can break your storefront if the selectors are wrong. Reach for it last. |
29 controls in this group. Generated from the live theme-control matrix.
What happens — and what doesn't
- Layout settings apply store-wide, setting the baseline spacing and width every page inherits.
- Individual blocks can still override spacing from the inspector; the theme sets the default.
- Motion controls govern animation across the store — how sections enter and transition.
Does the theme's layout override a block's own spacing?
The theme sets the default. Individual blocks can override their spacing from the inspector, so the theme is the baseline, not a hard rule.
What do the Motion controls do?
They govern animation across the storefront — how sections appear and transition as a visitor scrolls.