Note: While our most popular guides have been translated into Spanish, some guides are only available in English.
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.

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.
  • In all templates, you can add an Image Block to the top of a Layout Page to create the look of a banner.

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:

  1. Open the page and click the Settings annotation in the site preview. You can also open Page Settings.
  2. In the Media tab, click Add an image.
  3. Click Image to add an image from your computer, or click Search For Image to reuse an image or add a stock image.
  4. Click and drag the focal point to set the center point of the image. This helps with cropping in most templates.
  5. Click Save to publish your changes.
  6. Use Site Styles to style your banner.

To edit an existing banner, click the Banner annotation, or re-open Page Settings.

Tip: Some templates also support video banners.

Page_Banner.png

Supported templates

Page banners are supported in these template families:

Template family Supported pages

Adirondack

Layout, Blog, Events, and Products Pages

Bedford

Layout, Album, Blog, Events, and Products Pages

Brine

Layout, Album, Blog, Events, Gallery, and Products Pages

Five

Layout, Album, Blog, Events, Gallery, and Products Pages

Montauk

Layout, Blog, Events, and the Main Index Page

Pacific

Layout, Album, Blog, Events, Gallery, and Products Pages

Supply

Layout, Blog, Album, and Events Pages

Tremont

Layout, Album, Blog, Events, Gallery, and Products Pages

York

Layout, Album, Blog, Events, Gallery, Project, Products, and the main Index Page

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.

skye-blog-post-header.png

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, follow the steps in Five banners. If you're using a discontinued template, the same steps apply, but the banner image tweak may have a different name.

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:

pacific-page-banner.png

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:

video-block-on-background-image.png

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 areaIndex 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 moreIndex 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.

bedford-transparent-header.png

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:

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.

image-block-as-a-banner.png

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
Main Index

   

Fade-in effect

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.

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 Image, then click the trash can icon.
  • 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.
Was this article helpful?
26 out of 128 found this helpful