Skip to main content
The Page banner section opens a standard page with an image and a short introduction. It sits above the Page Template (main-page) by default, so a policy page, an “About us” page or a lookbook page gets a clear visual start instead of a bare title. The heading and text are blocks, so you decide what appears and in what order, while the section itself controls the image, its position and the space the banner takes up. Because the banner is built from the same blocks and color schemes used elsewhere in Olympus, it stays consistent with the rest of the store no matter which page you place it on. Page banner section shown at the top of a store page

​
What this section controls

  • A desktop image and an optional mobile image
  • Whether the image fills the background or sits beside the text
  • An overlay that darkens the image so text stays readable
  • The banner’s minimum height and where the content sits inside it
  • A Home breadcrumb on phones
  • Separate color schemes for the banner background and the content card
  • Heading and Text blocks for the copy

​
Getting started

1

Open Theme Customizer

From Shopify admin, open the Theme Customizer and choose the page you want to edit from the page selector. The default Page template already includes a Page banner.
2

Add or select Page banner

Select the existing Page banner in the left sidebar, or choose Add section and pick Page banner.
3

Add an image

Upload an Image and, if the crop needs to differ on phones, a Mobile image.
4

Write the copy

Edit the Heading and Text blocks, then adjust the position and color settings.
Page banner section selected in the Theme Customizer sidebar

​
Section settings

​
Media

Media settings define the image and how it relates to the copy.
Image is the main banner picture. Mobile image is shown on phones instead and falls back to the main image when left empty. Use it when the desktop crop cuts off the subject on a narrow screen.
Decides how the image and the copy share the banner.
  • Full background (default): the image fills the whole banner and the content sits on top of it.
  • Beside the text: the banner splits into two halves, one for the image and one for the copy.
Puts the image on the Left or the Right half. Default: Right. Applies to the Beside the text layout only.
Darkens the image from 0% to 80% in steps of 5. Default: 0. Raise it when a light or busy photo makes the heading hard to read.

​
Layout

Layout settings size the banner and place the content inside it.
Shows a Home link inside the banner on phones. The page section below hides its own breadcrumb trail on small screens, so this keeps a way back without taking extra vertical space. Enabled by default.
The banner is never shorter than this value, from 200px to 720px in steps of 20. Default: 400px. A taller banner gives an image more room; a shorter one brings the page content closer to the top.
Aligns the content to the Start, Center or End of the banner on desktop. Default: Center. Horizontal position (mobile) sets the same alignment for phones independently, which is useful when a left-aligned desktop layout reads better centered on a narrow screen.
Places the content at the Top, Center or Bottom of the banner. Default: Center. Bottom works well with tall images where the upper part is the subject.

​
Colors

Background color scheme: paints the area behind the image, visible when the image does not cover the full banner or while it loads. Default: Scheme 1. Card color scheme: colors the content card that holds the heading and text. Default: Scheme 1. Choose a scheme with a strong background when the copy sits over a photo.

​
Common settings

Page, Narrow, Narrower, Fluid or Full width. Default: Page. Full width lets the image run edge to edge.
None, Small, Medium, Large or Extra large. Both default to None so the banner meets the header directly.
None, Top, Bottom or Top and bottom. Default: None.
All common settings are described in detail on the Common settings page.

​
Blocks

The Page banner accepts two shared blocks. Their full settings are documented in the Theme blocks reference.

​
Heading

The page title or a short statement. The preset adds an empty heading at Heading 3 size, centered. Pick the semantic heading level separately from the visual size.

​
Text

A one or two sentence introduction under the heading. The preset uses Body size, centered.
Both blocks respect the Horizontal position settings of the section, and each block also has its own Alignment. Keep the two consistent so the copy lines up as expected on desktop and mobile.

​
Best practices

Keep the heading short

One line at Heading 3 or Heading 2 reads well over an image. Long titles wrap and push the text block down on phones.

Use the overlay sparingly

Start at 20-30% and increase only until the text is comfortably readable. Heavy overlays flatten the photo.

Provide a mobile image

Wide desktop photos lose their subject on a phone. A portrait crop keeps the focus where you want it.

Match the minimum height to the content

A banner with only a heading rarely needs more than 400px. Reserve taller values for pages where the image is the point.

Keep breadcrumbs on mobile

The Home link costs almost no space and helps visitors who land on a deep page from search.

Test both color schemes together

The background scheme and the card scheme are independent. Preview with the image removed to make sure the fallback still looks intentional.

Page Template (main-page)

Configure the page body that sits under the banner

Page header

The collection-oriented alternative with subcategory links and breadcrumbs

Theme blocks reference

Full settings for the Heading and Text blocks