Layout system

The layout system controls how sections are positioned on the page — outer margins, content width, vertical spacing, and how all of this responds to mobile viewports. Most layout settings live in theme settings (Layout tab); a few are per-section overrides.

3.1 The page grid

Hyprism uses a 3-column CSS grid at the page level. Every section sits in this grid:

| margin (1fr) | content (max content_width) | margin (1fr) |

• Margin columns flex to fill remaining viewport width.
• Content column holds your sections up to the configured max width.
• A section with full-width = on spans grid-column: 1 / -1 and ignores the content column.

Settings (theme settings → Layout)

Setting	What it does
🔧 Page width	Maximum content width — a select with preset rem values: 80rem (~1280px), 90rem (~1440px), 110rem (~1760px), 130rem (~2080px), or Custom. ✅ Default 90rem.
🔧 Custom page width	The exact pixel value to use when Page width is set to Custom. Range 800–2800px, step 20px. ✅ Default 1440px. Has no visible_if gate in the current schema, so it appears in the panel even when a preset is selected — but the value is only read when the preset is Custom.
🔧 Policy content width	Max width of the text column on the shop-policy pages (privacy, refund, terms of service, shipping). Range 600–1400px, step 20px. ✅ Default 820px. Shop policies render through Shopify’s built-in .shopify-policy__container markup — the theme can’t supply a custom template for them, so this CSS-driven width is the one place their column width can be set. Applies only to the /policies/* pages.
🔧 Page margin	Minimum side margin on the page — the gap between viewport edge and the content column when the viewport is narrow enough that margins compress. Range 0–80px, step 2. ✅ Default 20px.
🔧 Section inner padding X	Horizontal padding inside the section content area. Applies to every section unless overridden. Range 0–200px, step 4. ✅ Default 20px.

💡 Common page-width choices:

• 80rem (~1280px): tight, more whitespace, content reads “designer-y”
• 90rem (~1440px): balanced, default sweet spot — keeps a 1080-wide hero image with breathing room on both sides
• 110rem / 130rem: wide, less whitespace, more “magazine-y”
• Custom: pick any pixel value 800–2800 — useful for exact-grid layouts

3.2 Section spacing

Vertical gap between sections is controlled at three theme-wide settings plus per-section padding.

Theme-wide settings (theme settings → Layout)

Setting	What it does
🔧 Section spacing	Vertical gap between adjacent sections by default. Range 0–120px, step 4. ✅ Default 40px. Applied to every section that doesn’t add internal padding override.
🔧 Gap between header and first section	Vertical gap between the header bottom edge and the first section’s top edge. Range 0–200px, step 4. ✅ Default 40px. Independent of Section spacing because the header-to-content gap often wants different breathing room than the content-to-content gap.
🔧 Add spacing below footer	When on, adds a margin below the footer so the page doesn’t end flush against the viewport. ✅ Default off. Useful when the footer has glow or shadow effects that need room to breathe.

Per-section override

Every section has these settings (covered in detail in each section’s chapter):

Setting	What it does
🔧 Section padding top	Internal padding above section content
🔧 Section padding bottom	Internal padding below section content
Merge top / Merge bottom	Removed in v0.7 — sections no longer merge into adjacent ones via these toggles (avoided invisible-gap bugs).

The space between two adjacent sections is previous_section.padding_bottom + next_section.padding_top + theme_section_spacing. Set the theme spacing to 0 if you want padding-driven spacing only.

3.3 Full-width sections

Setting	What it does
🔧 Full width	When on, the section spans the entire viewport (edge-to-edge), ignoring the page-grid content column. The section content is still constrained to the inner padding.

Common full-width sections: hero, slideshow, image-with-text, multicolumn marketing rows. Sections that should respect the content column (typical articles, search results, customer-account templates) leave full-width off.

Inner padding for full-width sections

When full-width is on, the section still has horizontal padding so content doesn’t touch the viewport edges:

Setting	What it does
🔧 Section inner padding X	Horizontal padding inside the section content area

✅ For edge-to-edge media (a hero image), set inner padding to 0. For full-width sections with text content (a marketing band), set inner padding to your page margin so text aligns with content-column sections above and below.

3.4 Corner radius

The Global corner radius lives in theme settings → Layout. The Input corner radius lives in Buttons & Inputs → Inputs (next to Input shape) — see §2.4.

Theme-wide settings

Setting	What it does
🔧 Global corner radius (Layout)	Default radius applied to sections, cards, surfaces. Range 0–32px, step 2. ✅ Default 12px. Sections opt into this via their per-section “Use global radius” toggle.
🔧 Input corner radius (Buttons & Inputs)	Radius applied specifically to form inputs (text fields, dropdowns, textareas). Range 0–24px, step 1. ✅ Default 8px. Visible only when Input shape = Button. Separate from Global corner radius so inputs can stay subtly rounded even when surfaces are sharp-edged (or vice versa).

Per-section override

Setting	What it does
🔧 Use global radius	When on (✅ default), uses theme-wide Global corner radius. When off, the section has its own pixel radius.
🔧 Section corner radius	(When Use global radius is off) Custom radius in pixels for this section’s corners

⚠️ Full-width sections force radius=0 (rounded corners + edge-to-edge would look strange). When full_width is on, the radius setting is ignored.

3.5 Section visibility

Setting	What it does
🔧 Hide on desktop	Section is invisible on viewports ≥750px
🔧 Hide on mobile	Section is invisible on viewports <750px
🔧 Hide section	Section is invisible everywhere (use to keep configured but disabled)

Useful for setting up section variants — a desktop-only version with a full layout, and a mobile-only version with a simpler stacked layout.

3.6 Mobile-layout overrides

Theme settings → Layout → Mobile subheader.

When you want different page margins, inner padding, or section spacing on mobile compared to desktop:

Setting	What it does
🔧 Enable mobile layout overrides	Master toggle. Off by default. When off, desktop values apply on every viewport.
🔧 Mobile page margin	(When master toggle is on) Side margin on mobile, typically 4–16px (much smaller than desktop)
🔧 Mobile section inner padding X	Horizontal padding inside sections, on mobile
🔧 Mobile section spacing	Vertical gap between sections, on mobile

💡 Mobile values are typically smaller than desktop (mobile viewport is much narrower; wasted margin steals content space). Common defaults:

• Mobile page margin: 6–12px
• Mobile section inner padding: 4–16px
• Mobile section spacing: 24–48px

Per-section full_width_mobile

In addition to the theme-wide override, individual sections can flip to full-width on mobile only:

Setting	What it does
🔧 Full width on mobile	The section spans edge-to-edge on viewports <750px, regardless of the desktop full-width setting

This is useful for sections like hero or slideshow where desktop has page margins but mobile should be edge-to-edge for impact.

3.7 Touch hint (mobile carousels)

Setting	What it does
🔧 Enable mobile touch hint	When on, mobile carousels get pulsing chevron-arrows at their edges, indicating to visitors that they can swipe horizontally

The chevrons are real DOM elements (not CSS pseudo-elements) so they don’t interfere with native browser touch-gesture delegation — visitors can tap a chevron to navigate, or swipe across the carousel naturally.

3.8 Header layout interaction with sections

The header occupies the top of the page above all sections. Four settings affect how content sections relate to the header:

Setting	Location	What it does
🔧 Header layout	Header settings	Determines if the header is top (full-width above content), floating (above first section, content slides under), or sidebar (left or right column). See chapter 4.
🔧 Header applies page width	Theme settings → Layout	✅ Default off. When on, header content is constrained to the same content-width as sections. When off, header can be edge-to-edge while sections are content-width.
🔧 Header applies page margin	Theme settings → Layout	✅ Default off. When on, the header respects the same side margins as the page grid (so the header’s left/right edges align with section content edges). When off, header edges sit flush against the viewport.
🔧 First section behind header	Per-section in chapter 6 sections	When on, the first hero/storytelling section extends behind a transparent header. Useful for image-led heroes.

3.9 Common patterns

”Designer minimalist” pattern

• Content width: 1080
• Page margin: 32
• Section spacing default: 64
• Inner padding X: 32

Wide whitespace, tight content. Good for boutique stores with few SKUs and strong photography.

”Modern e-commerce” pattern

• Content width: 1280–1440
• Page margin: 16
• Section spacing default: 48
• Inner padding X: 24

Balanced. Good for most stores.

”Wide editorial” pattern

• Content width: 1600
• Page margin: 8
• Section spacing default: 32
• Inner padding X: 16
• Many sections full-width = on

High-density layout. Good for marketplaces, magazine-style content, large catalogs.

”Linux-rice” pattern (the Hyprism default vibe)

• Content width: 1280
• Page margin: 24
• Section spacing default: 56
• Inner padding X: 24
• Background image: dark abstract with 60% overlay
• Frame: Area, with edge glow on
• Effects: glow 100%, shadow 100%, glass blur 14, glass opacity 8, glass saturate 140

Floating content over a moody backdrop. The frame, glow, and glass effects shine here.

3.10 Per-template page background (page-background section)

The theme has a single global background image + color set in theme settings → Background (covered in chapter 2 — Foundation). For most stores this is enough — one background everywhere. But if you want a different background on one or more specific templates (e.g., a dark product page on an otherwise light store, or a custom illustration only on the About page), use the page-background section.

Add it to any template that should override the global background. It’s available in the customizer under “Layout” category. Available everywhere except the password page.

Settings

Setting	What it does
🔧 Override background	Master toggle — when off, the template uses the global background; when on, the settings below kick in.
🔧 Use global color scheme	When on, the background colors come from the theme’s pair_1 (when DL toggle is on) or the global color scheme. Turn off to pick custom schemes just for this template’s background.
🔧 Color scheme	Single custom scheme picker — only visible when Use global color scheme is off AND the theme dark/light toggle is OFF.
🔧 Dark mode scheme (color_scheme_dark)	Scheme used in primary (dark) mode — only visible when Use global color scheme is off AND the theme dark/light toggle is ON.
🔧 Light mode scheme (color_scheme_light)	Scheme used in alternate (light) mode — only visible when Use global color scheme is off AND the theme dark/light toggle is ON.
🔧 Background image	Image upload for this template only. Painted via CSS background-image on the global background layer — works whether or not the theme has its own global background image set.
🔧 Image overlay opacity	0–100% scheme-color overlay over the image for text readability and scheme tinting (visible when image is set). ✅ Default 40%. At 0% the image shows without tint; at 100% the scheme color hides the image entirely.

When to use

• ✅ A dramatic dark-mood product page on an otherwise bright store
• ✅ A custom illustrated background on the About page only
• ✅ A photo backdrop on the Contact page that wouldn’t fit elsewhere
• ⚠️ Don’t override every template — at that point, just change the theme-global background and save the per-template overrides for the exceptional ones.

💡 Combine with the dark/light pair (see chapter 2): with the theme dark/light toggle enabled, the section exposes a full Dark + Light scheme pair. The body’s color-{scheme} class swaps automatically on mode toggle and the bg paint follows via CSS cascade — no manual sync needed.

💡 To see the scheme color visually on top of the image, raise Image overlay opacity above 0. With the image set + opacity 0, only the image is visible and toggling between modes won’t show a bg-color change (other scheme-driven elements like text/accents still cascade).

Next

Chapter 4 — Header — wire up navigation, logo, action buttons, and the header’s many layout modes.