Design
Layout and spacing
Set the page width, page margins, grid gap and section padding in Vellora, and keep spacing consistent across your store.
Vellora's layout is set in two places: three global settings under Theme settings → Layout, and top and bottom padding on each section.
Global layout settings
| Setting | Range | Default | What it does |
|---|---|---|---|
| Page width | 1000–1800 px | 1400 px | The widest your content gets on large screens. Wider screens show empty space on both sides. |
| Page margin | 12–48 px | 40 px | The space between content and the edge of the screen on tablets and desktops. On phones the margin is always 20 px. |
| Grid gap | 0–40 px | 24 px | The space between columns in product grids, collection lists, promotion cards and other grids. |
The presets use different values: Vellora and Sorrel keep the defaults, while Graphite uses a 1600 px page width, 24 px margins and a 12 px grid gap for a denser, more editorial grid.
Screen sizes
The theme switches layout at two widths:
- Phones: under 750 px wide.
- Tablets: from 750 px.
- Desktops: from 990 px. The desktop menu, filter sidebars and most multi-column layouts start here.
Settings named "on desktop", such as Columns on desktop, apply from 990 px. Settings named "on mobile" apply under 750 px.
Section padding
Most sections have Top padding and Bottom padding settings, from 0 to 160 px in steps of 4. On phones, the theme uses 75% of the value you set, so a section with 80 px of padding has 60 px on a phone.
Full-bleed sections such as Image banner, Slideshow, Split hero and Scrolling text have no padding settings. They run edge to edge by design.
Keep the rhythm consistent
- Pick two or three padding values and reuse them. For example, 48 px for compact sections and 80 px for feature sections.
- Watch neighbors that share a scheme. When two sections in a row use the same color scheme, the bottom padding of the first and the top padding of the second add up. Lower one of them so the gap doesn't look doubled.
- Let color changes do some of the work. When the scheme changes between two sections, the change in background already separates them, so you can use less padding.
- Use 0 padding on purpose. Setting top padding to 0 lets a section sit right against the one above it, so two sections that share a scheme read as one block.
Width and columns in sections
Several sections let you change their width or column count:
- Columns on desktop and Columns on mobile in product and collection grids.
- Make section full width in Collection list removes the page width limit.
- Stretch media to the screen edge in Product information lets the product gallery reach the edge of the screen.
- Image width in Image with text switches between a half and a wide image.
- Content width in Rich text sets how wide the text column is, from 480 to 1000 px. Narrow columns are easier to read.
On collection and search pages, Let customers change the number of columns adds a toggle so shoppers can switch between a denser and a roomier grid.
Image ratios
Image shapes are set per area, so your grids stay even:
- Product cards: Theme settings → Product cards → Image ratio. See Buttons and cards.
- Sections: settings such as Image ratio in Collection list, Image with text and Shoppable image.
When photos come in many shapes, choose a fixed ratio rather than Adapt to image so rows line up. Vellora crops images around the focal point you set in Shopify admin, so the important part of the photo stays in view.