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 on the page)
  • Color scheme selection for individual sections
  • Vertical spacing (margin above and below sections)
  • Section borders for visual separation
These settings are “common” because they appear in nearly every section throughout your theme, from homepage sections to product pages and blog articles.

​
Where to find common settings

Common settings typically appear at the bottom of section settings panels in the Theme Customizer, under a header labeled “Common settings”.
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 to find the “Common settings” group.
3

Adjust settings

Modify width, color scheme, or spacing to change the section’s appearance.
4

Save changes

Click Save to apply your changes across the store.
Common settings location in section panel

​
Settings

​
Section width

Controls how wide the section content appears on the page. Width options help you create visual hierarchy and match content type to layout.
Content width matches the global Page width setting defined in Layout settings.Typical width: 1200-1600px (varies based on theme settings)When to use:
  • Standard sections with text and images
  • Product grids and collection displays
  • Most homepage sections
  • Default choice for balanced, aligned layouts
  • When you want sections to align vertically with other page content
Use Page width as your default for most sections to maintain consistent alignment across your store.
Content extends to fill the browser viewport with minimal or no side padding.When to use:
  • Large hero images or videos that should bleed to edges
  • Full-width galleries and carousels
  • Immersive visual sections
  • Background images or color blocks spanning entire screen
  • When you want maximum visual impact
Full width sections on ultra-wide monitors (>2000px) can create very stretched layouts. Test on large screens or consider using Page width for text-heavy sections.
Content width is moderately reduced to approximately 80-85% of page width.When to use:
  • Content that needs more focus than page width but isn’t purely text
  • Newsletter signup sections
  • Featured announcements or callouts
  • Sections with mixed content (text + images) that benefit from some narrowing
  • Creating subtle visual variation from standard page width
Seminarrow width example
Content width is significantly reduced to approximately 60-70% of page width.When to use:
  • Text-heavy sections for improved readability (optimal line length)
  • Blog posts and article content
  • Forms and contact sections
  • Single-column layouts
  • Testimonials or quotes
  • When you want to draw attention to specific centered content
Narrow width improves text readability by keeping line length between 60-80 characters, which is ideal for comfortable reading.
Not all sections include section width controls. Some sections have fixed widths or alternative width customization options based on their specific design requirements.

​
Color scheme

Choose which color scheme applies to the section. Color schemes control the background color, text color, button colors, and accent colors throughout the section. Available options: Scheme 1, Scheme 2, Scheme 3, Scheme 4, Inverse Default: Scheme 1 Color schemes are defined in Colors settings and provide coordinated color palettes for different sections. When to use each scheme:
  • Scheme 1: Primary brand colors, use for most sections and main content areas
  • Scheme 2: Secondary colors, use to alternate with Scheme 1 for visual variety
  • Scheme 3: Accent or tertiary colors, use sparingly for highlighted sections
  • Scheme 4: Additional variation (if defined in your theme)
  • Inverse: High-contrast scheme (often dark background with light text), use for dramatic emphasis or footer areas
Alternating color schemes between adjacent sections creates natural visual breaks and improves page scannability. For example, use Scheme 1 for your hero, Scheme 2 for features, Scheme 1 for products, and Scheme 2 for testimonials.
Color scheme selection and preview

​
Custom background color

Some sections allow you to override the selected color scheme’s background with a custom color or gradient. Label: “Custom background color”
Effect: Overwrites the color scheme’s background while keeping text and button colors from the selected scheme When to use:
  • Creating unique visual moments with specific brand colors
  • Seasonal promotions with special background colors
  • Matching specific brand guidelines not covered by standard schemes
  • Creating gradient backgrounds for visual impact
When using custom background colors, ensure sufficient contrast with the text color from your selected scheme. Test readability across devices before publishing.

​
Spacing

Spacing controls the vertical margin (space) above and below the section. Consistent spacing creates visual rhythm and helps establish hierarchy on your pages.

​
Top spacing

Controls the padding/margin above the section.Options:
  • No (0): Removes all top spacing. Section sits directly against content above.
  • S (1): Small spacing, approximately 20-30px
  • M (2): Medium spacing, approximately 40-60px (recommended default)
  • L (4): Large spacing, approximately 60-80px
  • XL (6): Extra large spacing, approximately 80-100px or more
Default: M (Medium)When to use:
  • No spacing: Sections that should visually connect with content above, full-width sections that blend together
  • S: Related sections that should feel connected, dense mobile layouts
  • M: Default for most sections, balanced spacing
  • L: Premium layouts, creating clear separation, emphasizing important content
  • XL: Maximum separation, editorial layouts, dramatic visual breaks
Top spacing size comparison

​
Section border

Add visual separation by displaying border lines on the top, bottom, or both edges of a section. Options:
  • None: No borders (default for seamless integration)
  • Top: Border line above the section
  • Bottom: Border line below the section
  • Both: Border lines on both top and bottom
Default: None
Use cases:
  • Section is first element on page
  • Creating separation from header or announcement bar
  • Defining the start of main content area
  • When background colors alone don’t provide enough separation
Use cases:
  • Separating from footer or content below
  • Defining the end of a content block
  • Creating visual bookends for grouped content
  • Adding structure to minimal designs
Use cases:
  • Maximum visual distinction for special sections
  • Containing promotional or announcement content
  • Creating “boxed” appearance for featured sections
  • Emphasizing important content areas
Use cases:
  • Clean, minimal appearance (recommended default)
  • Sections with contrasting color schemes (borders not needed)
  • Full-width visual sections
  • Modern, flowing layouts
Section border options comparison
Section borders use your theme’s border color defined in Colors settings. Use borders sparingly—alternating color schemes often provides better visual separation than borders.

​
Best practices

  • Establish a width pattern - Use Page width for most sections, Narrow width for text-heavy content, and Full width for hero images and visual impact sections
  • Alternate color schemes - Change schemes between adjacent sections to create natural visual breaks and improve page scannability
  • Maintain spacing consistency - Use M (Medium) spacing as your baseline and deviate only with clear purpose to create hierarchy
  • Consider mobile experience - Preview your spacing and width choices on actual mobile devices, as automatic adjustments may need fine-tuning
  • Create visual hierarchy - Combine larger spacing (L or XL) with contrasting color schemes to emphasize important sections
  • Use borders strategically - Reserve borders for sections that need extra separation when color scheme changes alone aren’t sufficient
  • Test width combinations - Preview how different widths flow together—alternating between Page and Narrow can create engaging rhythm
  • Match content to width - Text-heavy sections benefit from Narrow width (60-80 character lines), while images shine at Full width
  • Maintain symmetrical spacing - Use matching top and bottom spacing for most sections unless creating intentional asymmetry
  • Start simple - Use Page width and M spacing for all sections initially, then adjust specific sections for variety and emphasis
Sections set to “No spacing” with the same color scheme will appear as one continuous section. This can be effective for creating seamless experiences but may confuse visitors if unintentional.

​
Common patterns

​
Standard homepage layout

Create balanced, professional homepage sections:
  • Hero section: Full width, Scheme 1, No top spacing, M bottom spacing
  • Features: Page width, Scheme 2, L spacing top and bottom
  • Featured products: Page width, Scheme 1, M spacing top and bottom
  • Testimonials: Narrow width, Scheme 2, L spacing top and bottom
  • Newsletter: Seminarrow width, Scheme 1, L spacing top and bottom

​
Text-focused pages (blog, articles)

Optimize readability for content-heavy pages:
  • Article banner: Page width, Scheme 1, M spacing top and bottom
  • Article content: Narrow width, Scheme 1, M spacing top and bottom
  • Pull quotes: Narrow width, Scheme 2, L spacing top and bottom
  • Related articles: Page width, Scheme 2, L spacing top, M bottom

​
Visual-heavy layouts (lookbooks, portfolios)

Create immersive visual experiences:
  • All sections: Full width, alternating schemes (1, 2, 1, 2), No or S spacing
  • Effect: Continuous visual flow with color changes providing structure

​
E-commerce product pages

Balance product displays with supporting content:
  • Product images: Full width, Scheme 1, No top spacing
  • Product details: Page width, Scheme 1, M spacing
  • Recommendations: Page width, Scheme 2, L spacing top and bottom
  • Reviews: Narrow width, Scheme 1, M spacing
Common spacing and width patterns examples
  • Layout - Configure global page width and spacing multipliers
  • Colors - Define color schemes applied to sections
  • Typography - Set fonts and text sizes that work with your layouts