# Featured countdown timer

![image](https://docs-assets.foxecom.app/hyper-theme/Hyper%20docs%20screenshot%20do%20not%20delete%20(20)_mYjHjuhI.jpg)

The **Featured Countdown Timer** section allows you to add:

* 1 **Countdown timer** block (Evergreen or Fixed time)
* Up to **12 Image cards** (categories, products, or collections)

📢 Perfect for sale events, seasonal promotions, or limited-time offers.

## How to add a Featured countdown timer section to your Shopify store

<Hint type="success">

Steps:

1. In the theme editor **(Customize)**, click **Add section.**
2. Locate **Featured countdown timer**.
3. Make necessary changes.
4. **Save.**

</Hint>

## How to edit a Featured countdown timer section

### **Section settings**

#### General

* **Color scheme**: Apply one of your theme's preset styles to the section.

✍ *Learn more:* [Colors](https://docs.foxecom.com/hyper-theme/theme-settings/colors)

#### Grid settings

* **Number of columns on desktop:** Set how many image cards appear per row (2–4 columns).
* **Column gap / Row gap:** Adjust the spacing between cards.

![image](https://docs-assets.foxecom.app/hyper-theme/image_QVGzQrz3.png)

#### Mobile layout

* **Number of columns on mobile:** Choose 1-2–3 columns for smaller screens.&#x20;

<Hint type="info">

On mobile, the image cards display under the Countdown timer.

</Hint>

![image](https://docs-assets.foxecom.app/hyper-theme/image_gwtSo55o.png)

* **Enable swipe on mobile:** Allow horizontal swipe if you have many items.

![image](https://docs-assets.foxecom.app/hyper-theme/image_vaFdVmUQ.png)

### Block settings

<Tabs>
<Tab title="Countdown timer block">

![image](https://docs-assets.foxecom.app/hyper-theme/image_FV4u0QpP.png)

#### **General**

* **Color scheme:** Apply a custom style for the timer block.
* **Background image:** Upload a banner image.
* **Image overlay opacity:** Dim the background image for better text visibility.
* **Content spacing:** Adjust padding around content.
* **Content position:** Choose where to place the content. You can also choose the split the content.

![image](https://docs-assets.foxecom.app/hyper-theme/image_0BWYwDPx.png)

* **Content alignment:** Align the content (Left, Center, Right).

#### **Timer settings**

* **Countdown type:**
  * *Evergreen:* Auto-reset timer that repeats every defined cycle.
  * *Fixed time:* Set a specific end date and time.
* **Style:**
  * *Only number:* Shows only numbers.
  * *Number with text:* Shows numbers with 'days, hours, minutes, seconds' labels.

![image](https://docs-assets.foxecom.app/hyper-theme/image_qKTZVCvP.png)

* **Number size:** Adjust the size of the countdown numbers.

**Fixed or Evergreen Settings**

* **Fixed time:** Select the exact end date/time (Format: YYYY/MM/DD HH\:MM or YYYY/MM/DD HH\:MM AA).

*For example:*

| `YYYY/MM/DD HH:MM` | YYYY/MM/DD HH\:MM AA |
| :--------------: | :-----------------: |
| 2024/06/30 23:59 | 2024/06/30 11:59 PM |

* **Evergreen duration:** Define cycle duration (e.g.: Every 2 hours, every day, every month, etc.).

#### **Countdown Text Content**

* **Card link**: Paste a link or select a page from your Shopify store to link the card image and button to.
* **Subheading & Heading:** Add promotional text above the timer.
* **Highlight styles:** Animate or emphasize important words.&#x20;

*Learn more:* [Add Highlighted text to your Headings](https://docs.foxecom.com/hyper-theme/faqs/add-highlighted-text-to-your-headings)

* **Heading size:** Adjust size of the main heading.
* **Text (optional):** Add a supporting paragraph or short promotional description.

**Button settings**

* **Button label:** Add call-to-action text like "Shop Now" or "View Deals".
* **Button style:** Choose *Primary*, *Secondary*, *Underline* or *Plain*.
* **Button icon:** Add optional icons to the button.

**Advanced**

* **Enable preload image:** Optimize Largest Contentful Paint (LCP) by preloading background image for faster speed (for sections that are above the fold).&#x20;

</Tab>

<Tab title="Image card block">

![image](https://docs-assets.foxecom.app/hyper-theme/image_Nx3LLpZf.png)

Each image card promotes a category, product, or collection:

* **Image:** Upload the promotional image.
* **Link:** Direct customers to a collection or product page.
* **Content alignment:** Align the text overlay (Left, Center, Right).
* **Heading:** Add the title (e.g., "Moisturizers").
* **Highlight styles:** Optional highlight or animate key words.&#x20;

*Learn more:* [Add Highlighted text to your Headings](https://docs.foxecom.com/hyper-theme/faqs/add-highlighted-text-to-your-headings)

* **Heading size:** Control heading font size.
* **Text (optional):** Add a short supporting line.

✅ Tip: Keep headings short for clean, scannable tiles.

</Tab>
</Tabs>

## Best practices

✅ Use a contrasting overlay for better text readability.

✅ Keep image cards consistent in style and size.