Skip to main content
Common settings appear in most sections and control fundamental aspects of layout and appearance. Once you understand these settings, you can customize any section consistently without needing to learn section-specific configuration.

​
What these settings control

  • Section width (how wide content appears)
  • Color scheme selection for individual sections
  • Vertical spacing (margin above and below sections)
These settings are “common” because they appear in nearly every section throughout your theme, from homepage sections to product pages.

​
Where to find common settings

Common settings appear at the bottom of most section settings panels in the Theme Customizer.
1

Select any section

Click on a section in the Theme Customizer to open its settings panel.
2

Scroll to common settings

Scroll to the bottom of the section settings panel.
3

Adjust width, scheme, or spacing

Modify common settings to change section appearance.
4

Save changes

Click Save to apply your changes.

​
Settings

​
Section width

Controls how wide the section content appears on the page. Options:

​
Page

Content width matches the global Page width setting defined in Layout settings (typically 1200-1600px). When to use:
  • Standard sections with text and images
  • Product grids and collection displays
  • Most homepage sections
  • Default choice for balanced layouts

​
Narrow

Content width is reduced to approximately 75-80% of the page width. When to use:
  • Text-heavy sections for improved readability
  • Blog posts and articles
  • Forms and contact sections
  • When you want to draw attention to specific content

​
Narrower

Content width is significantly reduced to approximately 50-60% of the page width. When to use:
  • Single-column text content
  • Newsletter signup forms
  • Quotes or testimonials
  • Minimal, focused content that benefits from tight framing

​
Fluid

Content extends to fill the browser viewport with minimal side padding. When to use:
  • Large hero images or videos
  • Full-width galleries
  • Immersive visual sections
  • When you want content to feel expansive

​
Full

Content extends completely to the screen edges with no padding. When to use:
  • Edge-to-edge images or videos
  • Sections that should bleed to screen edges
  • Maximum visual impact
  • Background images or color blocks
Start with “Page” width for most sections. Use “Narrow” or “Narrower” for text-heavy content, and “Fluid” or “Full” for visual impact sections.

​
Color scheme

Choose which color scheme applies to the section. Options include:
  • Scheme 1: Your primary color scheme
  • Scheme 2: Alternative scheme for contrast
  • Scheme 3: Additional variation
  • Inverse: High-contrast scheme (often dark)
Color schemes are defined in Colors settings and control:
  • Background colors
  • Text colors
  • Button colors
  • Accent colors
We recommend alternating color schemes between adjacent sections to create visual separation and rhythm on the page.
When you change a section’s color scheme, all colors (background, text, buttons) update automatically based on the scheme definition.

​
Spacing

Controls the vertical margin (space) above and below the section. Options:

​
No spacing

Removes all vertical spacing. The section sits directly against adjacent content. When to use:
  • Sections that should visually connect
  • Full-width sections that bleed together
  • When creating seamless visual flows

​
S (Small)

Minimal spacing, approximately 20-30px. When to use:
  • Related sections that should feel connected
  • Dense layouts where space is limited
  • Mobile-optimized layouts

​
M (Medium)

Standard spacing, approximately 40-60px. When to use:
  • Default choice for most sections
  • Balanced layouts with good separation
  • Standard page construction

​
L (Large)

Generous spacing, approximately 60-80px. When to use:
  • Premium, spacious layouts
  • Creating clear section separation
  • Highlighting important content
  • Luxury or high-end brand aesthetics

​
XL (Extra Large)

Maximum spacing, approximately 80-100px or more. When to use:
  • Maximum section separation
  • Editorial or storytelling layouts
  • Dramatic visual breaks
  • Specific design requirements
We recommend using M (Medium) as your default and adjusting up to L or XL for sections you want to emphasize, or down to S or No spacing when sections should feel connected.
Consistent spacing creates visual rhythm. Use the same spacing value for similar sections, and vary it intentionally to create hierarchy.

​
Best practices

  • Establish a width pattern: Use “Page” width for most sections, “Narrow” for text, and “Fluid/Full” for hero images
  • Alternate color schemes: Change schemes between sections to create natural visual breaks
  • Maintain spacing consistency: Use Medium spacing as your baseline and deviate only with purpose
  • Consider mobile: Width and spacing automatically adjust for mobile devices, but preview to ensure good appearance
  • Create visual hierarchy: Combine larger spacing with contrasting color schemes to emphasize important sections
  • Test combinations: Preview how different width, scheme, and spacing combinations work together before committing
Sections set to “No spacing” with the same color scheme will appear as one continuous section, which may be confusing to visitors if not intentional.

​
Common patterns

​
Standard homepage

  • Hero section: Fluid width, Scheme 1, No spacing
  • Features: Page width, Scheme 2, L spacing
  • Products: Page width, Scheme 1, M spacing
  • Testimonials: Narrow width, Scheme 2, L spacing

​
Text-focused page

  • All sections: Narrow width, Scheme 1, M spacing
  • Pull quotes: Narrower width, Scheme 2, L spacing

​
Visual-heavy layout

  • All sections: Fluid or Full width, alternating schemes, No or S spacing
  • Layout - Configure global page width and spacing
  • Colors - Define color schemes applied to sections
  • Homepage sections - Learn about specific section types