# 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.
Customize this section to your liking with plenty of content, image, color, and style options. See the Countdown bar for a more compact layout.
## Set up section
Add this section to your template and use the drag-and-drop handles to re-order its position. You can add this section multiple times with different content and settings.
{% 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/spark/general/editing-themes/using-templates#create-and-assign-multiple-templates) or [insert dynamic content with metafields](https://help.fluorescent.co/spark/general/adapting-your-theme/dynamic-content-with-metafields).
{% endhint %}
STEPS
In your theme editor (**Customize**):
1. Select a **Template** to edit from the dropdown menu in the top bar.
> Learn how to use templates in our [Templates guide](https://help.fluorescent.co/spark/general/editing-themes/using-templates).
2. Under **Template**, click **(+) Add section** and select **Countdown banner**.
3. Click and hold the drag-and-drop handles **`⋮⋮`** to re-order your sections.
### 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.
STEPS
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 countdown reaches '0'.
> Th message will appear only if the **Hide timer on complete** option is unchecked.
5. Click **Save**.
## Section content
### Add section headings
Change the **Heading**, **Subheading**, and **Text** that display above the section.
STEPS
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 recommended 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**.
### Add button
Add a **Button** to link to your collections or products or any other page with a custom label.
STEPS
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**.
## Section style
Choose to show the banner **Frame** (border), enable **Full width**, customize section colors, and adjust the **Padding** of the section.
STEPS
In your theme editor (**Customize**):
1. Click on the **Countdown banner** section to open the 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. Choose whether to **Enable animation** to show visual effects when scrolling, hovering, or interacting with the section.
> Learn more about [Section animations](https://help.fluorescent.co/spark/theme-styles/animation) in Spark.
5. Choose to enable the **Alternate section color** to apply the secondary section colors selected in your theme settings for colors.
6. Select a **Spacing** option to add padding around the section content.
> Add padding to either the **Top and bottom**, **Top only**, **Bottom only**, or set it to **None**.
7. Select the **Spacing amount** for the padded sides of the section: **Full**, **Half**, or **Minimum**.
8. Click **Save**.
## Settings reference
Click the **Countdown banner** section to find the following settings.
#### **Section content**
| Setting | Description |
| ------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Heading | Add text to show a main heading. |
| Subheading | Add text to show a subheading below the main heading. |
| Text | Add text to show beneath the subheading. |
| Button link | Select or paste a URL for a button. You can add up to three buttons below the section heading. |
| Button label | Enter call-to-action 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). |
| Button style | Change the style of the button: either Solid, Outline, or Text. |
#### **Section style**
| Setting | Description |
| --------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Enable animation | Choose whether to display visual effects when scrolling, hovering, or interacting with the section. See our [Section animations](https://help.fluorescent.co/spark/theme-styles/animation) to learn more. |
| Use alternate section color | Apply the alternate section colors as chosen in your Theme Settings. See Spark's [theme color settings](https://help.fluorescent.co/spark/theme-styles/colors) to learn how to create a secondary color scheme with alternate section colors. |
| Spacing | Add padding around the section content: either the Top and bottom, Top only, Bottom only, or set it to None. |
| Spacing amount | Increase or decrease the amount of space around the section: either Full, Half, or Minimum. |
\\
***
> **Related links**
>
> [Theme sections](https://help.fluorescent.co/spark/pages/theme-sections)