Collection banner

Configure the collection title, breadcrumbs, hero media, and transparent Header.

Collection banner is the first section of the current Collection template. It owns the collection title and breadcrumbs, plus an optional image-led hero. The product grid, filters, sorting, and promotional blocks belong to the separate Collection section that follows it.

Current structure.

The current saved Collection template places Collection banner before Collection. The labels and dependencies below match the current section schema; final responsive and transparent-Header screenshots still require the accepted storefront snapshot.

Open Online Store > Themes > Customize.
Use the page selector to open a collection template.
Select Collection banner, above the Collection section.
Preview a collection with and without a hero image before publishing.

Content

Setting	What it controls	Default
Show breadcrumbs	Shows the path back to the collections index. A hidden visual breadcrumb does not remove the collection heading.	On
Show title	Shows the collection title in the banner. When off, Strata keeps a visually hidden page heading for document structure.	On

Use the title unless the page has another clear, accessible collection heading. Breadcrumbs are most useful when shoppers regularly move between the collections index and individual collections.

Media

Desktop image

Adds the image-led hero. When it is blank, Collection banner uses a plain text presentation and hides the image-only controls below.

Mobile image

Provides an optional mobile-specific composition. When blank, Strata reuses Desktop image.

Desktop image ratio

Choose Natural, 21:9, or 32:9. The default is 32:9.

Mobile image ratio

Choose Square or 4:3 portrait. The default is Square.

The ratio changes the visible frame rather than editing the source file. Use a mobile-specific image when the desktop subject or text-safe area cannot survive the narrower crop.

Motion and controls

Enable parallax for this section

The default is On. Parallax runs only when all of these conditions are true:

Desktop image is present;
this section setting is on;
global Theme settings > Animation > Enable parallax effects is on;
the visitor has not requested reduced motion.

The banner remains fully visible without the effect.

Colors

The following settings appear when Desktop image is present:

Setting	What it controls	Default
Overlay color	Color layered over the hero image.	Global brand color
Overlay opacity	Strength of the overlay, from 0–80% in 5% steps.	20%
Text color	Collection title and breadcrumb color over the image.	Global background color

Check the title, breadcrumb links, Header controls, and focus states against both the image and overlay.

Enable transparent header

The default is On and the setting appears only when Desktop image is present. When the Collection banner is the first normal template section and Header transparent mode is also enabled, the Header can overlay the hero.

This setting does not replace Header > Enable transparent header. Both controls must permit the overlay. If the image is removed, the banner returns to the plain presentation and the transparent hero state is unavailable.

Desktop and mobile behavior

Desktop and mobile can use different source images and ratios.
The mobile image inherits the desktop image's focal point when it has no separate focal point.
The hero is loaded as opening-page media; keep the file efficient and the first view readable before any motion runs.
Without an image, the title and breadcrumbs use the plain collection-banner layout.

Common issues

The hero controls are missing: add Desktop image first; the mobile image, ratios, overlay, text color, and transparent-Header control depend on it.
The mobile image is ignored: confirm Desktop image is also present. Mobile image is an alternate source for the image-led banner, not a standalone hero.
The Header stays solid: enable transparent mode in both Header and Collection banner, keep the banner first, and confirm an image is present.
Parallax does not run: check the local and global parallax switches plus reduced-motion preferences. A static image is the expected fallback.
The collection grid settings are missing: open the separate Collection section below the banner.

Evidence boundary

This page records the current schema and source dependencies. Add a privacy-cropped desktop/mobile storefront pair only after the current Collection banner, product grid, and transparent-Header behavior are accepted together.