Page headers for collections, blogs, and pages
Open the page header
Section titled “Open the page header”In the theme editor, select the required Collection, Blog, or Page template. Open its main section, then Page header. This is a fixed block; you do not add another section. The resource title remains the main heading.
Settings are shared by resources using the same template. Collection pages can use each collection’s own image automatically. For different blog or page artwork, use an appropriate dynamic source where available or assign different templates.
Settings
Section titled “Settings”| Setting | Default | Choices and effect |
|---|---|---|
| Header layout | Image with text overlay | Text only / Image with text overlay / Image and text. Without an image, the header falls back to Text only. |
| Header image | Not selected | Main image; on Collection, falls back to the current collection image. Recommended: 2400 × 800 px. |
| Mobile image | Not selected | Optional mobile artwork; falls back to the main image. Recommended: 900 × 600 px. A mobile-only image can supply the missing main image. |
| Short introduction | Empty | Optional formatted introduction, ideally one or two sentences. |
| Image height | Medium | Small / Medium / Large. Minimum desktop heights 240/300/380 px, mobile 160/200/260 px; long content can grow. |
| Text alignment | Center | Left / Center / Right. |
| Image position in Image and text | Right | Left / Right on desktop; mobile keeps image above text. |
| Image overlay opacity | 55% | 0–80%, step 5; applies to Image with text overlay. Check white text against your actual photo. |
| Show breadcrumbs | On | Show Home and the current resource title. |
| Text and split header background | None | None, Cream, Lilac, Mint, Apricot; applies to text and split content panels. |
Images and descriptions
Section titled “Images and descriptions”The image order is Header image → current collection image, if supplied by the page → Mobile image → Text only. Mobile image overrides the main image on small screens. Product images and body images are not automatic fallbacks.
When enabled by the parent Collection or Blog section, the full description appears once: in a text-only header when no short introduction is present, otherwise below the header. Short introduction does not delete the full description. Page body content stays in the main page body.
Examples
Section titled “Examples”Collection photo: leave Header image empty, set the collection’s native image in Shopify, choose Image with text overlay, and check the image focal point and text contrast.
Policy or care guide: choose Text only, keep a concise introduction, and let the page body carry the detail.
Verification and limitations
Section titled “Verification and limitations”Check 375 px and desktop, long titles, missing images, a mobile-only image, and two resources sharing one template. These headers render without JavaScript. Hiding the fixed block in the editor can also hide the resource’s main heading; keep it visible unless your template provides a suitable replacement.
Common questions
Section titled “Common questions”Why did another collection change? The hand-picked image and introduction belong to the shared template. Use each collection’s native image or a suitable dynamic source for per-resource content.
Can every photo use a zero overlay? Readability depends on the photo. Increase opacity or choose a different layout when needed.