Skip to main content
The Banner section lets you control the content, layout, and presentation of this part of the Everest storefront. Most changes happen directly in the Theme Customizer, so you can adjust structure first and then refine styling, spacing, and supporting blocks with confidence. Banner overview

​
What this section controls

  • Images, videos, and other media presentation options
  • Layout structure, width, alignment, and spacing
  • Calls to action, links, and navigation behavior
  • Color schemes, contrast, and shared visual styling
  • Block types such as Slide

​
Getting started

1

Open the Theme Customizer

In Shopify admin, go to Online Store -> Themes -> Customize.
2

Add or open Banner

Add the Banner section to a compatible template or select the existing section from the left sidebar.
3

Adjust the main settings first

Start with the structural settings such as layout, width, color scheme, spacing, or content source before refining smaller details.
4

Review blocks and supporting content

Add, remove, or reorder blocks after the main layout feels right so content hierarchy stays easier to manage.
Banner location in Theme Customizer

​
Section settings

​
Settings

Banner Settings settings
Choose how Section height behaves in the section.It has the strongest effect on layout balance and visual hierarchy.Available options: Ratio, Custom.Default: ratio
Adjust Custom height with a slider-based control.It has the strongest effect on layout balance and visual hierarchy.Range: 0 to 100 Default: 60This setting only appears when its related parent option is enabled.
Choose how Aspect ratio behaves in the section.It has the strongest effect on layout balance and visual hierarchy.Available options: Auto, 1:1, 4:3, 3:4, 3:2, 2:3, 5:4, 4:5, 16:9, 9:16, 2:1, 4:1, 1:2.Default: autoThis setting only appears when its related parent option is enabled.

​
Slideshow

Banner Slideshow settings
Adjust Autoplay with a slider-based control.Range: 0 to 10 Default: 5Set to 0 to disable autoplay.
Select the color scheme used for color scheme.Use this to keep contrast and branding consistent with the rest of the store.Default: scheme-1This setting only appears when its related parent option is enabled.

​
Mobile settings

Banner Mobile settings
Enable or disable Enable mobile specific settings.Default: disabled
Choose how Section width behaves in the section.This setting shapes the section container and how it sits against surrounding content.Available options: Page, Full.Default: fullThis setting only appears when its related parent option is enabled.
Choose how Section height behaves in the section.It has the strongest effect on layout balance and visual hierarchy.Available options: Ratio, Custom.Default: ratioThis setting only appears when its related parent option is enabled.
Adjust Custom height with a slider-based control.It has the strongest effect on layout balance and visual hierarchy.Range: 0 to 100 Default: 60This setting only appears when its related parent option is enabled.
Choose how Aspect ratio behaves in the section.It has the strongest effect on layout balance and visual hierarchy.Available options: Auto, 1:1, 4:3, 3:4, 3:2, 2:3, 5:4, 4:5, 16:9, 9:16, 2:1, 4:1, 8:1, 1:2.Default: autoThis setting only appears when its related parent option is enabled.

​
Common settings

Banner Common settings
Choose how Section width behaves in the section.This setting shapes the section container and how it sits against surrounding content.Available options: Page, Fluid, Full.Default: full
Select the color scheme used for color scheme.Use this to keep contrast and branding consistent with the rest of the store.Default: scheme-1
Choose how Top spacing behaves in the section.This setting shapes the section container and how it sits against surrounding content.Available options: No, S, M, L, XL.Default: 2
Choose how Bottom spacing behaves in the section.This setting shapes the section container and how it sits against surrounding content.Available options: No, S, M, L, XL.Default: 2
Choose how Section border behaves in the section.This setting shapes the section container and how it sits against surrounding content.Available options: None, Top, Bottom, Both.Default: none

​
Block settings

​
Slide

Banner Slide settings This block controls the slide content used inside the Banner section.

​
Settings

Banner Settings settings
Choose how Slide layout behaves in the section.It has the strongest effect on layout balance and visual hierarchy.Available options: Full, Side by side, Split.Default: 1
Choose how Media width behaves in the section.It has the strongest effect on layout balance and visual hierarchy.Available options: S, M, L.Default: mdThis setting only appears when its related parent option is enabled.It will be optimized for mobile.
Choose how Media order behaves in the section.Review the result on both desktop and mobile when media changes are involved.Available options: First, Last.Default: firstThis setting only appears when its related parent option is enabled.
Enable or disable Reverse layout on mobile.It has the strongest effect on layout balance and visual hierarchy.Default: disabledThis setting only appears when its related parent option is enabled.Media will be displayed above content on mobile.
Select the color scheme used for color scheme.Use this to keep contrast and branding consistent with the rest of the store.Default: scheme-2

​
Content

Banner Content settings
Choose how Container behaves in the section.Available options: Box, No.Default: none
Select the color scheme used for color for box.Use this to keep contrast and branding consistent with the rest of the store.Default: scheme-1This setting only appears when its related parent option is enabled.
Choose how Content width behaves in the section.It has the strongest effect on layout balance and visual hierarchy.Available options: Small, Medium, Large, Page.Default: pageThis setting only appears when its related parent option is enabled.
Choose how Vertical alignment behaves in the section.It has the strongest effect on layout balance and visual hierarchy.Available options: ⤒, Center, ⤓.Default: centerVertical alignment automatically optimized for mobile.
Choose how Horizontal alignment behaves in the section.It has the strongest effect on layout balance and visual hierarchy.Available options: ⇤, Center, ⇥.Default: center
Choose how Content alignment behaves in the section.It has the strongest effect on layout balance and visual hierarchy.Available options: ⇤, Center, ⇥.Default: centerThis setting only appears when its related parent option is enabled.
Enable or disable Show slide media.Review the result on both desktop and mobile when media changes are involved.Default: enabled

​
Media

Banner Media settings
Choose how Show on behaves in the section.Review the result on both desktop and mobile when media changes are involved.Available options: Desktop, Mobile, Both.Default: bothThis setting only appears when its related parent option is enabled.
Upload or choose an image for image.Review the result on both desktop and mobile when media changes are involved.This setting only appears when its related parent option is enabled.
Choose a hosted video for video.Review the result on both desktop and mobile when media changes are involved.This setting only appears when its related parent option is enabled.Overwrites the image.
Paste an external video URL for external video.Review the result on both desktop and mobile when media changes are involved.This setting only appears when its related parent option is enabled.Overwrites the image and video. We recommend above video option for better performance, external videos can cause performance issues. Use a YouTube or Vimeo URL.
Adjust Media overlay with a slider-based control.Review the result on both desktop and mobile when media changes are involved.Range: 0 to 100 Default: 30%This setting only appears when its related parent option is enabled.
Enable or disable Enable mobile specific media.Review the result on both desktop and mobile when media changes are involved.Default: disabledThis setting only appears when its related parent option is enabled.Displays mobile-specific alternative media. Add a media before setting a mobile alternative.

​
Media for mobile

Banner Media for mobile settings
Upload or choose an image for image.Review the result on both desktop and mobile when media changes are involved.This setting only appears when its related parent option is enabled.
Choose a hosted video for video.Review the result on both desktop and mobile when media changes are involved.This setting only appears when its related parent option is enabled.Overwrites the image.
Paste an external video URL for external video.Review the result on both desktop and mobile when media changes are involved.This setting only appears when its related parent option is enabled.Overwrites the image and video. We recommend above video option for better performance, external videos can cause performance issues. Use a YouTube or Vimeo URL.

​
Secondary media

Banner Secondary media settings
Choose how Show on behaves in the section.Available options: Desktop, Mobile, Both.Default: bothThis setting only appears when its related parent option is enabled.
Upload or choose an image for image.Review the result on both desktop and mobile when media changes are involved.This setting only appears when its related parent option is enabled.
Choose a hosted video for video.Review the result on both desktop and mobile when media changes are involved.This setting only appears when its related parent option is enabled.Overwrites the image.
Paste an external video URL for external video.Review the result on both desktop and mobile when media changes are involved.This setting only appears when its related parent option is enabled.Overwrites the image and video. We recommend above video option for better performance, external videos can cause performance issues. Use a YouTube or Vimeo URL.
Enable or disable Enable mobile specific media.Review the result on both desktop and mobile when media changes are involved.Default: disabledThis setting only appears when its related parent option is enabled.Displays mobile-specific alternative media. Add a media before setting a mobile alternative.

​
Media for mobile

Banner Media for mobile settings
Upload or choose an image for image.Review the result on both desktop and mobile when media changes are involved.This setting only appears when its related parent option is enabled.
Choose a hosted video for video.Review the result on both desktop and mobile when media changes are involved.This setting only appears when its related parent option is enabled.Overwrites the image.
Paste an external video URL for external video.Review the result on both desktop and mobile when media changes are involved.This setting only appears when its related parent option is enabled.Overwrites the image and video. We recommend above video option for better performance, external videos can cause performance issues. Use a YouTube or Vimeo URL.

​
Product

Banner Product settings
Choose the product source used by product.
Supports nested blocks:
  • Heading for more granular content inside this block.
  • Text for more granular content inside this block.
  • Description for more granular content inside this block.
  • Button Group for more granular content inside this block.
  • Newsletter for more granular content inside this block.

​
Best practices

  • Check contrast after changing color schemes so text and controls remain easy to read.
  • Keep labels short and scannable, especially in tighter layouts or utility areas.
  • Adjust layout changes alongside neighboring sections so page rhythm stays consistent.
  • Start with the structural settings first, then refine decorative styling after the layout feels settled.
  • Preview the section with realistic content length to catch spacing and wrapping issues early.