# Countdown banner

The **Countdown banner** section displays a live countdown for an upcoming event or sale. Use this section to create a sense of urgency or anticipation for your customers.

Check out the [Countdown bar](https://help.fluorescent.co/stiletto/sections/theme-sections/countdown-bar) for a more compact section.

## Set up section

***

{% hint style="warning" %}
Editing a template changes all pages that use that template. To edit specific pages, you can [create new templates](https://help.fluorescent.co/stiletto/general/editing-themes/using-templates#create-and-assign-multiple-templates) or [insert dynamic content with metafields](https://help.fluorescent.co/stiletto/general/adapting-your-theme/dynamic-content-with-metafields)
{% endhint %}

In the editor side panel, click **(+) Add section** and select **Countdown banner**. Click and hold the drag handles **`⋮⋮`** to re-order sections.

Click the section to edit the general **section styles:** [Padding](https://help.fluorescent.co/stiletto/sections/using-sections#section-padding) | [Animation](https://help.fluorescent.co/stiletto/sections/using-sections#section-animations)

## Set up timer

***

Select the date and time for the end of the countdown. Choose to hide the timer when the countdown or add a message when the countdown is complete.

<details>

<summary><mark style="color:blue;"><strong>STEPS</strong></mark></summary>

In your theme editor (**Customize**):

1. Click the **Countdown banner** section to open the settings.
2. Select the **Year**, **Month**, **Day**, **Hour**, and **Minute** for the completion date of your countdown.
3. Check the **Hide the timer on complete**

   > You may want to enable this option when using the countdown to display the amount of time remaining for a current event or promotion (such as a sale).
4. Enter text for the **Timer complete message** that appears when the timer reaches '0'.

   > Th message will appear only if the **Hide timer on complete** option is unchecked.
5. Click **Save**.

</details>

`Click Countdown banner to find settings`

<table><thead><tr><th width="237">Setting</th><th>Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Year</mark></td><td>Enter the year of the end-date.</td></tr><tr><td><mark style="color:blue;">Month</mark></td><td>Select the month of the end-date.</td></tr><tr><td><mark style="color:blue;">Day</mark></td><td>Select the day of the end-date.</td></tr><tr><td><mark style="color:blue;">Hour</mark></td><td>Select the hour of the end-time.</td></tr><tr><td><mark style="color:blue;">Minute</mark></td><td>Select the minutes of the end-time.</td></tr><tr><td><mark style="color:blue;">Time zone</mark></td><td>Choose to display the timer according to your Shop time zone or the User’s local time zone.</td></tr><tr><td><mark style="color:blue;">Hide timer on complete</mark></td><td>Choose hide the countdown timer when it has completed.</td></tr><tr><td><mark style="color:blue;">Timer complete message</mark></td><td>Add text to display a message when the timer has completed.</td></tr></tbody></table>

## Add background image

***

Upload an image to display as the banner's background image.

<details>

<summary><mark style="color:blue;"><strong>STEPS</strong></mark></summary>

In your theme editor (**Customize**):

1. Click the **Countdown banner** section to open the settings.
2. (*Optional*) Under **Background**, click **Select image** to upload a background image.

   > For optimal quality across all devices, we recommend images width or height of **`2500px`**.
3. Use **Image focal points** to specify the main focus of your images.

   > The focal point of your image will remain centered and within frame when your site adapts to different screen sizes.
4. Use the color selector to change the **Text** and **Background** color.

   > The background color appears when there's no background image.
5. (*Optional*) Change the **Overlay color** and **Overlay opacity** using the slider to increase the contrast between the text and background image (if used).

   > These settings help make your text clear and readable.
6. (*Optional*) Click the **Overlay gradient** option to add a color overlay that fades across a range of hues.

   > You can choose the style, angle, position, and opacity of the gradient. See Shopify's [color gradient guide](https://help.shopify.com/en/manual/online-store/themes/theme-structure/color-scheme#gradients) to learn more.
7. Click **Save**.

</details>

`Click Countdown banner to find settings`

<table><thead><tr><th width="179">Setting</th><th>Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Image</mark></td><td><p>Select or upload an image to display as the background of the banner.</p><p><br>There are no required image dimensions. We recommend a minimum width of 2500px.</p></td></tr><tr><td><mark style="color:blue;">Mobile image</mark></td><td>Select or upload a mobile-specific image to display as the background of the banner.</td></tr><tr><td><mark style="color:blue;">Image focal point</mark></td><td>Select the most important part of your image to keep centered. Use focal points to avoid unwanted cropping across different screen sizes. Learn more in our <a href="../../../general/image-guide/theme-image-settings#image-focal-point">Image settings guide</a>.</td></tr><tr><td><mark style="color:blue;">Mobile image focal point</mark></td><td>Select the most important part of your mobile image to keep centered. Use focal points to avoid unwanted cropping across different screen sizes. Learn more in our <a href="../../../general/image-guide/theme-image-settings#image-focal-point">Image settings guide</a>.</td></tr></tbody></table>

## Section content

***

Change the **Heading** and **Text**. Add a **button** with a custom style.

<details>

<summary><mark style="color:blue;"><strong>STEPS: Add headings and text</strong></mark></summary>

In your theme editor (**Customize**):

1. Click on the **Countdown banner** section to open the settings.
2. Enter **Heading** text to display as a title at the top of the banner.

   > we recommend one to three words.

   > Delete the text in this field to remove the heading.
3. Enter **Subheading** text to display beneath the heading.

   > We recommend two to three short sentences.

   > Use the formatting buttons to add text styles, links, or lists. To learn more, see Shopify's [Rich text editor guide](https://help.shopify.com/en/manual/shopify-admin/productivity-tools/rich-text-editor#format-text-with-the-rich-text-editor).
4. (*Optional*.) Enter additional **Text** beneath the countdown clock to provide more information to your customers.
5. Click **Save**.

</details>

<details>

<summary><mark style="color:blue;"><strong>STEPS: Add button</strong></mark></summary>

In your theme editor (**Customize**):

1. Click on the **Countdown banner** section to open the settings.
2. Select or paste a URL for the **Button link**.
3. Enter text for the **Button label**.

   > The most effective button labels ask customers to do something (e.g. Get started, Join us, Shop now). To learn more, [read "What is a Call to Action?"](https://www.thebalancesmb.com/call-to-action-1794380)
4. Select a **Button style**: either **Solid**, **Outline**, or **Text**.

   > The button uses the theme-wide button color set in the Theme settings.
5. Click **Save**.

</details>

`Click Countdown banner to find settings`

<table><thead><tr><th width="188">Setting</th><th>Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Heading</mark></td><td>Add text to show a main heading.</td></tr><tr><td><mark style="color:blue;">Heading size</mark></td><td>Change the font size of the heading between <strong>small</strong>, <strong>medium</strong>, and <strong>large</strong>.</td></tr><tr><td><mark style="color:blue;">Text</mark></td><td>Add text to display below the main heading.</td></tr><tr><td><mark style="color:blue;">Button link</mark></td><td>Select or paste a URL for a button. You can add up to three buttons below the section heading.</td></tr><tr><td><mark style="color:blue;">Button label</mark></td><td>Enter text to display as the button label. The most effective button labels ask customers to do something (e.g. Get started, Join us, Shop now).</td></tr><tr><td><mark style="color:blue;">Button style</mark></td><td>Choose a style for the button. Select <strong>Solid</strong>, <strong>Outline</strong>, or <strong>Text</strong>.</td></tr></tbody></table>

## Section style

***

* Choose to show the banner **Frame** (border)
* Enable **Full width**
* Change section **colors**

<details>

<summary><mark style="color:blue;"><strong>STEPS</strong></mark></summary>

In your theme editor (**Customize**):

1. Click on the **Countdown banner** section and scroll down to the **Section style** settings.
2. Use the **Height** and **Mobile Height** sliders to adjust the height of the entire banner.

   Choose between **`200 - 800px`** on desktop and **`300 - 800px`** on mobile.
3. Under **Color** in the section settings, use the color selectors to customize the **Text**, **Buttons**, **Sold button text**, and **Background color**.

   > We recommend using WebAIM's [contrast checker](https://webaim.org/resources/contrastchecker/) when matching colors to make sure your text is clear and readable for everyone.
4. Uncheck the **Show frame** option to hide the thin border line within the banner.
5. Choose to **Enable animation** to show visual effects when scrolling, hovering, or interacting with the section.

   > Learn more about [Section animations](https://help.fluorescent.co/stiletto/theme-styles/animation) in Stiletto.
6. Choose to display a **Top divider** that separates sections with a **Solid** line.

   > The Top divider uses the color of **Lines and borders** set in the Theme settings.
7. Select a **Padding** option to change the spacing between sections. Choose between **Top and bottom**, **Top only**, **Bottom only**, or set it to **None**.
8. Set the **Content width** to display the section at **Full width** or use the slider to set a custom width between **`400 - 1000`** pixels.
9. Click **Save**.

</details>

`Click Countdown banner to find settings`

<table><thead><tr><th width="221">Setting</th><th>Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Height</mark></td><td>Change the height of the banner section for desktop screens: between 200 and 800 pixels.</td></tr><tr><td><mark style="color:blue;">Mobile height</mark></td><td>Change the height of the banner section for mobile screens: between 200 and 800 pixels.</td></tr></tbody></table>

<table><thead><tr><th width="229">Setting</th><th>Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Show frame</mark></td><td>Display a thin border line within the section.</td></tr><tr><td><mark style="color:blue;">Enable full width</mark></td><td>Display the banner at the full width of the screen or window.</td></tr></tbody></table>

\\

***

> **Related links**
>
> [Countdown bar](https://help.fluorescent.co/stiletto/sections/theme-sections/countdown-bar)\
> [Promotion banner](https://help.fluorescent.co/stiletto/sections/theme-sections/promotion-banner)\
> [Promotion bar](https://help.fluorescent.co/stiletto/sections/theme-sections/promotion-bar)\
> [Sales banner](https://help.fluorescent.co/stiletto/sections/theme-sections/sales-banner)