Adding banner images

Banner images display near the top of the page, adding a visual element that can set the tone for your site. Many templates create banner images automatically from page thumbnails, but how they display and their style options vary by template.

This guide walks you through the steps for adding, formatting, and styling a banner image.

Tip: As an alternative to our built-in banner options, you can add an Image Block to the top of a Layout Page on any template.

These steps are for version 7.0. If your site is on version 7.1, visit Version 7.1 style and design options.

Watch a video

Image formatting tips

We recommend uploading images that are at least 1500 pixels wide.
We don't recommend using an image that has text within the actual image file. Instead, most templates support a text overlay.
You can use .jpg, .png, and .gif images. For more image requirements, visit formatting images for the web.
For help choosing an image that will look great in all browsers, review our responsive design tips.
If your banner doesn't look right, visit our cropping troubleshooting tips.
To display a custom message at the top of your site, add an Announcement Bar.

Types of banners

How you add your banner image depends on what types of banners your template supports:

Page banner - Displays at the top of individual pages. Added as the page thumbnail.
Video banner - Can replace the page banner in some templates. Added as the page thumbnail.
Collection item banners - Displays above individual blog posts, products, and events. Added as the item's thumbnail.
Site-wide banners - Can display on every page. Added in Site Styles.

See a comparison table of banner options by template.

Add a page banner

To add a page banner:

Open the page and click the Settings annotation in the site preview.
In the Media tab, click Add Image to upload an image from your computer, or click Search For Images to reuse an image or add a stock image.
Click and drag the focal point to set the center point of the image. This helps with cropping in most templates.
Click Save to publish your changes.
Use Site Styles to style your banner.

To edit an existing banner, click the Banner annotation, or reopen Page Settings.

To learn more about which templates support page banners, see Banner options by template.

Tip: Some templates also support video banners.

Add a collection item banner

Collection item banners display above individual blog posts, products, and events.

To add a collection item banner, open the editor for that item, then add a thumbnail image in the Options tab. For detailed steps, visit Adding thumbnail images.

Here's how the blog post banner looks in Skye:

Tip: Some collection item banners support overlay text.

Supported templates

Collection item banners are supported in these template families. Some collection items display page banners; for example, a blog post might display the Blog Page banner.

Adirondack - Blog posts, events, and products display collection item thumbnails.
Bedford - Blog posts, and events display collection item thumbnails.
Farro - Blog posts display collection item thumbnails.
Five - Blog posts, events, products display page banners.
Montauk - Blog posts, events display page banners.
Skye - Blog posts display collection item thumbnails.
Supply - Blog posts and events display collection item thumbnails.

Add a site-wide banner

Site wide banners are available in the Five template and some discontinued templates. They display on any pages that don't have a page banner.

To add a site-wide banner, click its tweak in Site Styles. In Five, the tweak is Header Background Image. In discontinued templates, the tweak may have a different name.

After you've added the image, style it with the options that appear.

Note: Site-wide banners should never be larger than 2500 pixels, as this can cause issues on mobile.

Add a text overlay

Use the options built into your template to create an overlay of text that displays in front of the image. To learn more, visit Adding text to banners.

Note: We don't recommend uploading an image that has text or words in it. Text within an image file can cut off when the image crops and isn't indexed by search engines.

Here's an example of overlay text in the Pacific template:

Add content as an overlay

In some templates, you can add content blocks over a banner. For example, you could add a Video Block over a banner image, as shown in the screenshot below.

You can add content blocks over a banner image or video in these template families:

Brine - Add blocks to intro areas on page banners and content sections in an Index.
Pacific - Add bocks to content sections in an Index.

Style the banner

Learn about the style options for these template families:

Change the banner height

To set the height for banners in these template families:

Template family	How to change the height
Adirondack	Height tweak
Bedford	Page and video banners - Add line breaks to the page description. Learn more. Slideshow banners, Blog slideshow banners, and Collection item banners - Fixed height
Brine	Add line breaks to the intro area. Index banners have separate height options.
Farro	Use the Header tweak in the Blog: Item section to adjust the banner size.
Five	Use the Banner Area Height or Banner Area Spacing tweaks. (Banner Area Height doesn't affect mobile.)
Montauk	Fixed height, set by the original image. Page banners always display at the width of the site content. They don't crop vertically.
Pacific	Add line breaks to the page description or use the Padding tweak. Learn more. Index banners have separate height options.
Skye	Use the Banner Image Width tweak to adjust the banner width. The height is set by the original image, proportional to the width.
Supply	Page width is fixed, so the banner fills the remaining width of the browser.
Tremont	Page Banner Image Height tweak
York	Height tweak

Banners on mobile

Banner images will always experience some cropping on mobile devices.
Video banners sometimes won't display on mobile, depending on the visitor's connection speed and browser version. Set a mobile fallback image to appear when the video banner can't load.
Banner height settings don't always apply to mobile.
Parallax scrolling works on mobile in most instances.
For site-wide banners, the Fix Position setting won't appear on some mobile devices, including iOS.
Site-wide banners should never be larger than 2500 pixels, as this can cause issues on mobile.

What happens when you switch templates

Page thumbnails, collection item thumbnails, and video thumbnails carry over when you switch templates. If you switch from one template that supports any of these banners to another, the same banner image displays in the new template.

Banners that display behind the header

Banner images and video banners can display behind the site header in these template families (click the links to learn more):

Tip: Banners in Five display below the header, but the site title, logo, and tag line can display over the banner.

Stacking banners

Some templates support an Index Page that displays multiple banners stacked vertically on one page, creating a long scrolling effect. You can stack banners in an Index in these template families (click the links to learn more):

Note: Banners in an Index typically have their own style settings.

Banners that don't crop

Most banner images experience some cropping, especially as they adjust to different screen sizes. This helps your images look their best within your site's layout and in different browser sizes.

You can create banners that won't crop in these template families:

Montauk - Banners don't crop vertically. They always display at the width of the site content. Tall, skinny banners may pixelate as they stretch to fill the width.
Pacific - Create a banner image that doesn't crop by adding a Gallery Page to an Index Page.

Tip: Changing the focal point of the thumbnail might help with cropping in page and collection item banners. For more help with cropping, visit our troubleshooting tips.

Slideshow banners

You can create slideshow banners in these template families:

Brine - Create an Index Page with a slideshow as its top section.
Bedford - Create a slideshow banner on Layout Pages with a promoted Gallery Block, or a Blog Page slideshow banner from Featured Posts.
Pacific - Create an Index Page with a slideshow gallery as its top section.

Tip: In other templates, add a Slideshow Gallery Block at the top of a Layout Page for a similar effect.

Creating banners in other templates

Create the effect of a banner in any template by adding an Image Block at the top of a Layout Page.
Each layout has its own text overlay options.

Image Blocks display within the padding of the main content area. They don't have built-in full bleed options.

Tip: Some templates have page header areas that support blocks, including Image, Text, and Video Blocks.

Transparent images

If you use a .png file with a transparent background, the following tweaks adjust the color that displays behind the banner in these template families:

Adirondack - Content Background Color
Bedford - Banner Overlay Color
Brine - Overlay Color in the Main: Overlay section
Farro - Post Background Color. The Overlay Color also affects the color.
Five - Header Background
Montauk - Canvas Background
Pacific - Overlay Color
Skye - Site Background
Supply - Page Color
Tremont - Site Background Color
York - Background Color in the Banner section

Tip: In most cases, the color displays at 100% opacity. If you're having trouble getting the color you want, change the transparency.

Banner options by template

These template families support one or more banner types:

Template family	Page banners: supported pages	Video banners	Collection item banners: supported items	Other options
Adirondack	Layout Blog Events Products	Yes	Blog posts Events Products	Fade effect on scroll (desktop view)
Bedford	Layout Album Blog Events Products	Yes	Blog posts Events	Slideshow banners Blog Page slideshow banners
Brine	Layout Album Blog Events Gallery Products	Yes		Parallax scrolling
Farro			Blog posts
Five	Layout Album Blog Events Gallery Products	Yes	Page banners display on blog posts, events, products	Site-wide banners
Montauk	Layout Blog Events Index	Yes	Page banners display on blog posts, events
Pacific	Layout Album Blog Events Gallery Products	Yes
Skye			Blog posts
Supply	Layout Blog Album Events		Blog posts Events	Banner displays on the right, except on mobile.
Tremont	Layout Album Blog Events Gallery Products	Yes		Page overlay
York	Layout Album Blog Events Gallery Project Products Index			Fade-in effect

Remove a banner image

To remove a banner image, open the specific banner area and delete the image.

Page banners - In the Media tab of the page's settings, click Remove Image.
Video banners - In the Media tab of the page's settings, click Video, the delete the video URL.
Collection item banners - Open the individual item (blog post, product, or event), click the Options tab, then click the trash can icon.
Site-wide banners - Open the specific tweak in Site Styles and click Remove.