> ## Documentation Index
> Fetch the complete documentation index at: https://docs.digifist.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Callout Banner

> Configure Everest's callout banner section and its main settings, content structure, and styling controls.

The Callout 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.

<img src="https://mintcdn.com/digifist/_wn1CbolPmz0UAhs/images/theme/everest/sections/callout-banner/callout-banner-overview.png?fit=max&auto=format&n=_wn1CbolPmz0UAhs&q=85&s=3e52db6b548794e60bfc3b8a0bc9bb60" alt="Callout Banner overview" width="3280" height="2186" data-path="images/theme/everest/sections/callout-banner/callout-banner-overview.png" />

## What this section controls

* Headings, text content, and on-page messaging
* 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

## Getting started

<Steps>
  <Step title="Open the Theme Customizer">
    In Shopify admin, go to **Online Store** -> **Themes** -> **Customize**.
  </Step>

  <Step title="Add or open Callout Banner">
    Add the **Callout Banner** section to a compatible template or select the existing section from the left sidebar.
  </Step>

  <Step title="Adjust the main settings first">
    Start with the structural settings such as layout, width, color scheme, spacing, or content source before refining smaller details.
  </Step>
</Steps>

<img src="https://mintcdn.com/digifist/_wn1CbolPmz0UAhs/images/theme/everest/sections/callout-banner/callout-banner-location.png?fit=max&auto=format&n=_wn1CbolPmz0UAhs&q=85&s=ecaa636600498e2be6810efb68c8e680" alt="Callout Banner location in Theme Customizer" width="3280" height="2186" data-path="images/theme/everest/sections/callout-banner/callout-banner-location.png" />

## Section settings

### Settings

<img src="https://mintcdn.com/digifist/Ysia45hB9fuhRb46/images/theme/everest/sections/callout-banner/callout-banner-settings.png?fit=max&auto=format&n=Ysia45hB9fuhRb46&q=85&s=f00c7838412b716cfb68be2231b4779b" alt="Callout Banner Settings settings" width="3280" height="2186" data-path="images/theme/everest/sections/callout-banner/callout-banner-settings.png" />

<AccordionGroup>
  <Accordion title="Layout" icon="grid">
    Choose how **Layout** behaves in the section.

    It has the strongest effect on layout balance and visual hierarchy.

    **Available options:** Boxed, Minimal, Inline.

    **Default:** `1`
  </Accordion>

  <Accordion title="Spacing" icon="grid">
    Choose how **Spacing** behaves in the section.

    It has the strongest effect on layout balance and visual hierarchy.

    **Available options:** Standard, Compact.

    **Default:** `standard`

    This setting only appears when its related parent option is enabled.
  </Accordion>
</AccordionGroup>

### Content

<img src="https://mintcdn.com/digifist/Ysia45hB9fuhRb46/images/theme/everest/sections/callout-banner/callout-banner-content.png?fit=max&auto=format&n=Ysia45hB9fuhRb46&q=85&s=ee6b14580cfd96955f24412cdc8673e8" alt="Callout Banner Content settings" width="3280" height="2186" data-path="images/theme/everest/sections/callout-banner/callout-banner-content.png" />

<AccordionGroup>
  <Accordion title="Heading" icon="text-size">
    Enter the content used for **heading**.

    **Default:** `Callout heading`
  </Accordion>

  <Accordion title="Heading size" icon="text-size">
    Choose how **Heading size** behaves in the section.

    **Available options:** S, M, L, XL.

    **Default:** `h2`

    This setting only appears when its related parent option is enabled.
  </Accordion>

  <Accordion title="Text" icon="text-size">
    Enter the content used for **text**.

    This setting only appears when its related parent option is enabled.
  </Accordion>

  <Accordion title="Action preference" icon="sparkles">
    Choose how **Action preference** behaves in the section.

    **Available options:** Button, Newsletter.

    **Default:** `button`

    This setting only appears when its related parent option is enabled.
  </Accordion>

  <Accordion title="Button label" icon="text-size">
    Enter the content used for **button label**.

    Keep action labels short so they remain readable across devices.

    This setting only appears when its related parent option is enabled.

    Leave empty to hide the button
  </Accordion>

  <Accordion title="Button link" icon="link">
    Set the destination URL for **button link**.

    Keep action labels short so they remain readable across devices.

    This setting only appears when its related parent option is enabled.
  </Accordion>

  <Accordion title="Newsletter button label" icon="text-size">
    Enter the content used for **newsletter button label**.

    Keep action labels short so they remain readable across devices.

    **Default:** `Submit`

    This setting only appears when its related parent option is enabled.
  </Accordion>

  <Accordion title="Button style" icon="link">
    Choose how **Button style** behaves in the section.

    Keep action labels short so they remain readable across devices.

    **Available options:** Filled, Outlined, Text.

    **Default:** `outlined`

    This setting only appears when its related parent option is enabled.
  </Accordion>

  <Accordion title="Color for content" icon="palette">
    Select the color scheme used for **color for content**.

    Use this to keep contrast and branding consistent with the rest of the store.

    **Default:** `scheme-4`
  </Accordion>

  <Accordion title="Show callout banner media" icon="image">
    Enable or disable **Show callout banner media**.

    Review the result on both desktop and mobile when media changes are involved.

    **Default:** `disabled`
  </Accordion>
</AccordionGroup>

### Media

<img src="https://mintcdn.com/digifist/_wn1CbolPmz0UAhs/images/theme/everest/sections/callout-banner/callout-banner-media.png?fit=max&auto=format&n=_wn1CbolPmz0UAhs&q=85&s=1d91f5231d16429ca16671b10b5c6d77" alt="Callout Banner Media settings" width="3280" height="2186" data-path="images/theme/everest/sections/callout-banner/callout-banner-media.png" />

<AccordionGroup>
  <Accordion title="Image" icon="image">
    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.
  </Accordion>

  <Accordion title="Mobile image" icon="image">
    Upload or choose an image for **mobile 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.

    If mobile image is set, it will be used on mobile devices instead of the main image.
  </Accordion>

  <Accordion title="Media position" icon="image">
    Choose how **Media position** behaves in the section.

    It has the strongest effect on layout balance and visual hierarchy.

    **Available options:** Start, End, Full.

    **Default:** `full`

    This setting only appears when its related parent option is enabled.
  </Accordion>
</AccordionGroup>

### Timer

<img src="https://mintcdn.com/digifist/Ysia45hB9fuhRb46/images/theme/everest/sections/callout-banner/callout-banner-timer.png?fit=max&auto=format&n=Ysia45hB9fuhRb46&q=85&s=cd01e8bfdcacf3f54fec579306aba609" alt="Callout Banner Timer settings" width="3280" height="2186" data-path="images/theme/everest/sections/callout-banner/callout-banner-timer.png" />

<AccordionGroup>
  <Accordion title="Show timer" icon="clock">
    Enable or disable **Show timer**.

    **Default:** `enabled`
  </Accordion>

  <Accordion title="Year" icon="clock">
    Set the numeric value used for **year**.

    **Default:** `2027`
  </Accordion>

  <Accordion title="Month" icon="clock">
    Choose how **Month** behaves in the section.

    **Available options:** January, February, March, April, May, June, July, August, September, October, November, December.

    **Default:** `01`
  </Accordion>

  <Accordion title="Day" icon="clock">
    Adjust **Day** with a slider-based control.

    **Range:** `1` to `31`  **Default:** `1`
  </Accordion>

  <Accordion title="Hour" icon="clock">
    Adjust **Hour** with a slider-based control.

    **Range:** `0` to `23`  **Default:** `0h`
  </Accordion>

  <Accordion title="Minute" icon="clock">
    Adjust **Minute** with a slider-based control.

    **Range:** `0` to `59`  **Default:** `0m`
  </Accordion>

  <Accordion title="End message" icon="clock">
    Enter the content used for **end message**.

    **Default:** `Sale has ended`

    This message will be displayed when the timer ends.
  </Accordion>
</AccordionGroup>

### Parts display settings

<img src="https://mintcdn.com/digifist/Ysia45hB9fuhRb46/images/theme/everest/sections/callout-banner/callout-banner-parts-display-settings.png?fit=max&auto=format&n=Ysia45hB9fuhRb46&q=85&s=4919900c0a12794fb538c59a8ee8631d" alt="Callout Banner Parts display settings" width="3280" height="2186" data-path="images/theme/everest/sections/callout-banner/callout-banner-parts-display-settings.png" />

<AccordionGroup>
  <Accordion title="Show day part" icon="clock">
    Enable or disable **Show day part**.

    **Default:** `enabled`
  </Accordion>

  <Accordion title="Show hour part" icon="clock">
    Enable or disable **Show hour part**.

    **Default:** `enabled`
  </Accordion>

  <Accordion title="Show minute part" icon="clock">
    Enable or disable **Show minute part**.

    **Default:** `enabled`
  </Accordion>

  <Accordion title="Show second part" icon="clock">
    Enable or disable **Show second part**.

    **Default:** `enabled`
  </Accordion>
</AccordionGroup>

### Common settings

<img src="https://mintcdn.com/digifist/Ysia45hB9fuhRb46/images/theme/everest/sections/callout-banner/callout-banner-common-settings.png?fit=max&auto=format&n=Ysia45hB9fuhRb46&q=85&s=77430848d13c5d3052281f26b9c07be0" alt="Callout Banner Common settings" width="3280" height="2186" data-path="images/theme/everest/sections/callout-banner/callout-banner-common-settings.png" />

<AccordionGroup>
  <Accordion title="Section width" icon="grid">
    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`
  </Accordion>

  <Accordion title="Color scheme" icon="palette">
    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`
  </Accordion>

  <Accordion title="Top spacing" icon="grid">
    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`
  </Accordion>

  <Accordion title="Bottom spacing" icon="grid">
    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`
  </Accordion>

  <Accordion title="Section border" icon="grid">
    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`
  </Accordion>
</AccordionGroup>

## Best practices

* Check contrast after changing color schemes so text and controls remain easy to read.
* Review media-heavy layouts on both desktop and mobile before publishing.
* 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.

## Related guides

* [Everest Theme Overview](/themes/everest/index)
* [Everest Header](/themes/everest/header/header)
