Page Header
Display a breadcrumb trail, page title, and short description at the top of any page, with an optional divider line.
The Page Header section displays a breadcrumb trail and page title with an optional short description, typically used at the top of pages such as collections, blogs, or custom pages. A configurable divider line can be displayed below the content to visually separate the header from the rest of the page. The spacing between the breadcrumb and title is adjustable to fine-tune the layout.
How to Edit the Page Header Section
- From your Shopify admin, go to Online Store → Themes.
- Click Customize on the active theme.
- Select the Page Header section from the left sidebar.
- Adjust the settings according to your preferences.
- Click Save to apply your changes.
Section Settings
General
- Color Scheme: Select a color scheme applied to the section.
- Padding Top: Controls the top padding of the section. Scales automatically across desktop, laptop, tablet, and mobile.
- Padding Bottom: Controls the bottom padding of the section. Scales automatically across desktop, laptop, tablet, and mobile.
- Margin Top: Controls the spacing above the section. Scales automatically across desktop, laptop, tablet, and mobile.
- Margin Bottom: Controls the spacing below the section. Scales automatically across desktop, laptop, tablet, and mobile.
Content
- Gap: Controls the vertical spacing between the breadcrumb and the page title. Range: 0–60px.
- Show Breadcrumb: Enable or disable the breadcrumb navigation trail.
- Show Title: Enable or disable the page title and short description. When disabled, the Heading and Short Description fields are hidden.
- Heading: Enter the page title text. Only available when Show Title is enabled.
- Short Description: Add an optional description displayed below the page title. Only available when Show Title is enabled.
- Show Divider: Enable or disable a divider line displayed below the header content.
- Divider Height: Controls the thickness of the divider line. Range: 0–10px. Only available when Show Divider is enabled.
- Divider Margin Top: Controls the spacing above the divider line. Only available when Show Divider is enabled.
- Divider Margin Bottom: Controls the spacing below the divider line. Only available when Show Divider is enabled.
Best Practices
Do
- Enable the breadcrumb on deeper pages to help customers understand their location in the site structure.
- Keep the short description concise and relevant to the page content.
- Use the divider to create clear visual separation on content-heavy pages.
- Adjust the gap setting to maintain consistent spacing across different page types.
Don't
- Disable the title when the page heading is necessary for customer orientation.
- Use an overly long short description that overwhelms the page header.
- Set the divider height too thick, as it may visually overpower the page header.
- Leave the heading blank when Show Title is enabled, as this leaves the header area empty.