Skip to main content
Common settings control the width, vertical spacing, borders, and colors of a section. They appear at the bottom of the settings panel on nearly every Olympus section, always with the same labels and the same options. Once you understand them, you can build a page from many different sections and keep the rhythm, alignment, and color consistent without editing theme code.

​
What these settings control

  • How wide a section’s content is, from a narrow reading column to edge-to-edge
  • The space above and below a section, in five steps that scale down on mobile
  • Whether a hairline border separates the section from its neighbors
  • Which of the six color schemes the section uses for its background, text, buttons, and borders
  • How each section relates to the global page width and page margin set in Theme settings

​
How to access

1

Open the Theme Customizer

From your Shopify admin, open Online Store, then Themes, and click Customize on Olympus.
2

Select a section

Click any section in the left sidebar, or click it directly in the preview.
3

Scroll to Common settings

The Width, Top spacing, Bottom spacing, Section border, and Color scheme controls sit together near the end of the section’s settings.

​
Width

Width sets how much of the screen a section’s content occupies. All widths are measured against the Page width and Page margin you choose in Theme settings, so changing those two values resizes every section at once.
Content sits inside the central page column defined by Page width in Theme settings. This is the default for most sections and keeps text, grids, and cards aligned from one section to the next.
A reading column roughly seven tenths of the page width. Works well for long text, FAQs, and forms where shorter lines are easier to read. Because it is a fraction of the page width, it grows and shrinks with it.
A compact column just under half the page width. Best for a single centered message, a newsletter form, or a short list where a wide layout would feel empty.
Content stretches across the full browser width but keeps the Page margin as a gutter on each side. Use it for image grids and tile layouts that should feel large without touching the screen edge.
Content runs edge to edge with no gutter. Best for hero banners, marquees, and background images. Text inside a full-width section is usually still inset by the section’s own layout, so headings do not touch the screen edge.
The Header exposes only Page, Fluid, and Full width, and only when Bar style is set to Full width. A floating header bar keeps its own inset instead.

​
Top spacing and Bottom spacing

Top spacing and Bottom spacing add space above and below a section’s content. Both use the same five steps: None, Small, Medium, Large, and Extra large. Each step automatically becomes smaller on mobile, so a layout that breathes on desktop does not push content off the first screen on a phone.
  • None: no extra space. Use it when two sections share a background color and should read as one block, or when a full-width image should sit flush against the section above.
  • Small and Medium: the everyday values for content sections. Medium is the default on most sections.
  • Large and Extra large: separate a section clearly from its neighbors, for example before a testimonials block or after a hero.
Spacing is applied inside the section, so it takes on the section’s color scheme background. To create space that shows the page background instead, add spacing to the neighboring section rather than this one.
Pick one spacing value for most of a page and change it only where you want a deliberate pause. Alternating Small and Extra large from section to section makes a page feel uneven.
A few sections, including Footer, Featured product, Blog, and Logo list, add an Extra small step between None and Small for tighter layouts.

​
Section border

Section border draws a one-pixel line along the top edge, the bottom edge, or both. The line uses the Border color of the section’s color scheme, so it stays visible on light and dark backgrounds alike.
  • None: no border. Default.
  • Top: a line above the section. Useful when the section above shares the same background color.
  • Bottom: a line below the section.
  • Top and bottom: lines on both edges, framing the section.
When two neighboring sections both draw a border on the shared edge, you get a heavier double line. Set one of them to None.

​
Color scheme

Color scheme picks one of the six schemes defined under Theme settings, then Colors. A scheme supplies the section’s Background, Background gradient, Text, Button, Button label, Secondary button label, and Border colors together, so every element inside the section stays legible against its background.
  • Blocks inside a section inherit the section’s scheme unless the block has its own Color scheme setting, for example Group blocks with a Card background or Collection cards.
  • Some sections offer more than one scheme, such as the Header’s schemes for dropdowns and drawers, or the Footer’s Newsletter block with separate input and button schemes.
  • Changing a scheme in Theme settings updates every section that uses it. Editing colors there is faster than changing sections one by one.

​
How these settings work with Theme settings

Common settings are relative to two global values under Theme settings, then Layout:
  • Page width: Narrow or Wide. Page, Narrow, and Narrower widths are all measured against this value, so switching from Narrow to Wide widens every page-width section and its narrow variants proportionally. Fluid and Full width are unaffected because they already span the browser.
  • Page margin: the minimum space between content and the screen edge, from 10 to 100 pixels. It becomes the gutter for Fluid sections and protects Page-width content on screens narrower than the page width. On mobile the margin is fixed to a smaller value so content does not become cramped.
Colors come from Theme settings, then Colors, where you edit the six schemes and choose the Default color scheme applied to the page body.

​
Best practices

  • Stick to Page width for text: keep headings, paragraphs, and product grids on Page so they align from section to section, and reserve Fluid and Full width for media.
  • Use one spacing rhythm: choose Medium (or Small) as your baseline and only change it to mark a real transition between page areas.
  • Pair None with shared backgrounds: when two adjacent sections use the same color scheme, set the shared edge to None spacing so they read as one surface.
  • Avoid double borders: give a border to only one of two touching sections.
  • Change schemes, not sections: if a color feels off across the store, adjust the scheme under Theme settings instead of re-picking schemes on each section.
  • Check mobile after changing width: Narrow and Narrower collapse to the full mobile width, so a design that relies on a narrow column on desktop should still look intentional on a phone.