Layout & Spacing

Layout settings control the overall structure of your store: the maximum content width, the percentage of screen used, and the side margins. These settings affect all pages and all sections of your theme (except those that force their own width).

Page width

Page width defines the maximum width in pixels that your content can occupy. It acts as an upper limit: content will never exceed this width, even on ultra-wide screens.

1000px: Compact and centered

with page width set to 1000px. The content is narrow and well-centered, with lots of white space on the sides on a wide screen. The look is very focused and easy to scan visually.)

When to use it:

• Stores focused on text and editorial content (blog, storytelling)
• Stores with few products where each listing is detailed
• Magazine or editorial style
• If your content is primarily text, a narrow width improves readability (60-80 characters per line is optimal)

1200px: The standard (default)

When to use it:

• The majority of stores
• Good balance between content density and readability
• Works equally well for product grids and text content

1400px: Wide

When to use it:

• Stores with lots of visual content (fashion, home decor, art)
• Large catalogs with 4+ column grids
• When your product images are high quality and deserve space

1600px: Very wide

When to use it:

• Highly visual stores where images are the focal point
• Portfolios, lookbooks, galleries
• Stores targeting users with large screens (design, photography)

Comparison on the same content

Width percentage (page width %)

The width percentage defines what proportion of the browser window is used for content. This setting works in combination with the pixel-based page width.

How the two settings interact

The effective content width is calculated as follows:

Effective width = min(page_width_px, viewport_width x page_width_percentage)

Concrete examples with default values (1200px / 85%):

With a width of 1600px / 85%:

70%: Generous side spacing

When to use it: Ultra-clean design, luxury, when white space is an intentional design element.

85%: The standard (default)

When to use it: Most use cases, a good balance between content and visual breathing room.

95%: Nearly full width

When to use it: Dense catalogs, stores that want to maximize screen usage, product grids with many items.

Side padding (margins)

Side padding is the spacing between the screen edge and the content. It is configured separately for mobile and desktop.

Mobile padding: comparison

of a product page with 0px side padding. The content touches the screen edges, no margin. Full-screen look but can feel "cramped" with some content.)

Desktop padding: comparison

Containers in sections

Independently from the global settings, each section can choose its own container type via the "Width" setting in its parameters. This lets you mix sections of different widths on the same page.

Narrow container (~800px)

in a Narrow container about 800px wide, centered on the page. The text is comfortable to read at ~60-70 characters per line.)

When to use it:

• Text sections: about us, policies, blog
• Contact or newsletter forms
• Content that requires focused reading
• FAQ and accordions

Normal container (= page width)

. This is the default container used by the majority of sections.)

When to use it:

• The majority of sections
• Product grids, features, reviews
• Mixed content (images + text)

Full Padded container (100% with padding)

When to use it:

• Banners and hero sections
• Full-width image sections with text
• When you want impact but keep a minimum margin

Full container (100% without padding)

When to use it:

• Full-width images and videos
• Immersive sliders and carousels
• Visual separators between sections

Comparison of the 4 containers on the same section

in all 4 container types: Narrow at top (narrow and centered cards), Normal (standard-sized cards), Full Padded (wider cards), Full (cards spanning the full screen) at bottom.)

Impact on different elements

Product grids

Page width has a direct impact on product card size in grids:

and on the right with 1600px (wide cards, large detailed images).)

Header and navigation

and on the right with 1600px (spacious navigation with plenty of room).)

Footer

and on the right with 1600px (wide columns, airy text).)

Recommended configurations by store type

Minimalist / editorial store

Standard e-commerce store

Fashion / lifestyle store

Large catalog store

Settings summary

Next steps

• Colors -- Palettes and color schemes
• Typography -- Fonts and text sizes
• Initial setup -- Complete configuration guide
• Animations -- Visual effects and transitions