Page content

Featured links

1. Shopify documentation on sections and blocks
2. Company XYZ documentation on section padding settings
3. Company XYZ documentation on section backgrounds settings
4. Company XYZ documentation on separators settings
5. Company XYZ documentation on layout widths settings

Helpful videos

Shopify Academy video: Customizing your store

Shopify Academy video: Customizing your store

Use this section to display the main body content of a page and control how it appears within the layout. It works best for text-heavy pages where readability, spacing, and visual hierarchy matter.

Core settings

The main choice is whether to show the page title inside this section. For a broader overview of how page content fits into a theme layout, see Shopify documentation on sections and blocks. Leaving it enabled keeps the page heading simple and consistent, while turning it off gives you more freedom to introduce the page with another section or a custom heading layout.

If you turn off Show title, add an H1 heading elsewhere on the page so the content still has a clear top-level heading.

This section is best used to present well-structured page content, not to replace content formatting. Clean headings, paragraphs, and lists in the page body will make the section easier to read regardless of the layout settings you choose.

Color settings

Use these settings to override the default text color for this section only. This is most useful when the page content sits on a custom background or when you need stronger contrast than the global theme colors provide.

Before publishing, check long paragraphs, links, and headings together. A text color that looks fine on short content can feel low-contrast or tiring to read on longer pages.

Standard section settings

Padding settings

Use the shared Padding settings to control the space above and below the content. Separate desktop and mobile values make it easier to keep the section spacious on larger screens without making smaller screens feel too loose.

For long-form content, moderate spacing usually feels best. Increase padding when this section needs to stand apart from the sections around it, and reduce it when the page should read as a more continuous flow.

Section background settings

Use the shared Section background settings to add a color, gradient, image, or video behind the content. These settings can give a plain page a more branded or editorial look, but they also have the strongest effect on readability.

Gradient settings override flat color settings, and overlay gradients override overlay colors. You can also provide mobile-specific background media when the desktop version does not crop well on smaller screens.

Caution

Decorative backgrounds can make page text harder to read. Always review body text, headings, and links against the final background and overlay combination.

Separator settings

Use the shared Separator settings to add a line above or below the section. This is a simple way to separate page content from neighboring sections without relying on large spacing changes or a full background treatment.

If you leave the separator color transparent, the section uses the theme’s border color. That is usually the easiest choice when you want a subtle divider that stays visually consistent across the page.

Width settings

Use the shared Width settings to control the content width and the outer section width. For this section, content width usually matters most because it directly affects line length and reading comfort.

Narrower content widths often work better for policy pages, story pages, and other text-heavy layouts. Section width becomes more noticeable when you add a background, since it changes how far that background extends beyond the text column.

Note

Width changes can look different in the editor than on the live page, so check the frontend before finalizing your layout.

Usage notes

1. Keep the page heading clear. Use the built-in title unless another section is already providing a clear H1.
2. Optimize for reading. Choose a content width and text color that keep long paragraphs comfortable to scan.
3. Use backgrounds selectively. Add background media only when it supports the page without competing with the content.
4. Match spacing to page purpose. Give editorial pages more breathing room and keep utility pages tighter for faster scanning.
5. Check mobile presentation. Review spacing, width, and background behavior on smaller screens before publishing.
6. Compare both viewports. Desktop and mobile settings can produce different alignment, visibility, and media behavior, so review the section in both sizes before you finalize it.
7. Treat overrides intentionally. Blank or transparent values usually keep the theme’s fallback styling, while explicit colors, gradients, or media choices make this section more self-contained.
8. Review configured media carefully. When desktop and mobile media are set separately, confirm that cropping, loading, fallback behavior, and text readability still work well in both versions.