Heading

Featured links

1. Company XYZ documentation on headers settings
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 visibility settings
6. Company XYZ documentation on layout widths settings
7. Shopify documentation on sections and blocks
8. Shopify documentation on the theme editor

Helpful videos

Shopify Academy video: Customizing your store

Shopify Academy video: Customizing your store

Use this section to add a styled heading anywhere you need a clearer content break, a stronger introduction, or a simple call to action. It is especially useful on landing pages and long-form layouts where heading structure helps visitors scan the page. For a broader overview of how sections are built, see Shopify documentation on sections and blocks

Use only one H1 on a page. If the page already has a main title, choose H2 or lower here.

Color settings

These settings override the usual theme colors for this heading area only. They are most useful when the section sits on a custom background or needs stronger contrast than the surrounding page.

Adjust the icon, heading text, and subheading colors together so the section feels intentional. If you use lighter or muted colors, preview them on mobile as well as desktop to make sure the text still reads comfortably.

Standard section settings

Header settings

Header settings control the content and layout of this section, including alignment, icon, caption, heading, subheading, and the optional button. Use them to build anything from a simple section title to a more promotional intro block. For setup details in the editor, see Shopify documentation on the theme editor

Choose the heading type based on page structure, not just appearance. Use the caption for short context, the subheading for brief supporting copy, and the button only when there is a clear next step for the visitor.

If you add a button, pay attention to its position on desktop and mobile. Moving it below the text can create a cleaner reading flow, while a full-width mobile button can make the action easier to tap.

Padding settings

Padding settings control the space above and below the heading. Use more padding when the heading needs to stand on its own, and less when it should stay visually attached to nearby content.

Different desktop and mobile spacing can help the section feel balanced across devices. If the heading includes a subheading or button, leave enough room so the content does not feel cramped.

Section background settings

Section background settings let you place the heading on a color, gradient, image, or video background. This can turn a simple heading into a stronger visual divider or banner-style intro.

Overlays are useful when text sits on media and needs better contrast. Because backgrounds can change how spacing and width feel, preview the section on multiple screen sizes before publishing.

Caution

Busy images or video backgrounds can make headings hard to read. If clarity drops, use an overlay or switch to a simpler background.

Separator settings

Separator settings add a line above or below the section. They work well when you want a cleaner content boundary without adding more text or extra spacing.

A simple separator is usually enough for headings. If the page already has strong visual divisions, use separators sparingly to avoid clutter.

Visibility settings

Visibility settings control whether this heading appears on desktop, mobile, or both. This is helpful when you want different heading treatments for different device sizes.

If you hide the section on one device, make sure visitors still see a clear heading and any essential context there. Avoid using visibility changes in ways that break the page’s content hierarchy.

Width settings

Width settings control the maximum width of the content and the width of the section itself. Narrower content widths often improve readability, while wider section widths are most noticeable when you use a background.

Use content width to keep heading and subheading lines comfortable to read. Use section width when you want the background treatment to stay contained or stretch farther across the page.

Note

Width changes can look different in the editor than on the live page. Check the page preview before finalizing them.

Usage notes

1. Keep heading levels logical. Use H1 only for the main page title and use lower levels to preserve a clear content hierarchy.
2. Separate message from detail. Put the main point in the heading, use the caption for light context, and keep the subheading brief and supportive.
3. Use buttons with intent. Add a button only when the heading should lead to a clear next action, and review its mobile position before publishing.
4. Design for readability first. When using custom colors or media backgrounds, check contrast carefully so the heading stays easy to read.
5. Balance spacing and width together. Adjust padding and width as a pair so the section feels neither cramped nor disconnected from the content around it.
6. Review both device views. Desktop and mobile controls can affect alignment, visibility, and media behavior differently, so check the section in both viewports before publishing.
7. Treat overrides as a stronger commitment. Blank or default-style values usually keep the surrounding styling, while explicit colors, gradients, or media choices make the heading area feel more independent.
8. Check media legibility. If you use different media for desktop and mobile, review cropping, loading, fallback, and text readability on each screen size.