# Featured countdown timer

<figure><img src="/files/mYjHjuhI0wZKNwbYG7Fo" alt=""><figcaption></figcaption></figure>

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 style="success" %}
Steps:

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

## How to edit a Featured countdown timer section

### **Section settings**

#### General

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

:writing\_hand: *Learn more:* [Colors](/hyper-theme/theme-settings/colors.md)

#### 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.

<figure><img src="/files/QVGzQrz3amCyUX367UYu" alt=""><figcaption></figcaption></figure>

#### Mobile layout

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

{% hint style="info" %}
On mobile, the image cards display under the Countdown timer.
{% endhint %}

<figure><img src="/files/gwtSo55oTDJKSrvY3s13" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/vaFdVmUQCGThCkAa9hQv" alt=""><figcaption></figcaption></figure>

### Block settings

{% tabs %}
{% tab title="Countdown timer block" %}

<figure><img src="/files/FV4u0QpPzJVupsUOO9K7" alt=""><figcaption></figcaption></figure>

#### **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.

<figure><img src="/files/0BWYwDPxljzoHFXvuY1x" alt=""><figcaption></figcaption></figure>

* **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.

<figure><img src="/files/qKTZVCvPdA9CJTHrODAl" alt=""><figcaption></figcaption></figure>

* **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](/hyper-theme/faqs/add-highlighted-text-to-your-headings.md)

* **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;
  {% endtab %}

{% tab title="Image card block" %}

<figure><img src="/files/Nx3LLpZfOPK2TbdShsRA" alt=""><figcaption></figcaption></figure>

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](/hyper-theme/faqs/add-highlighted-text-to-your-headings.md)

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

✅ Tip: Keep headings short for clean, scannable tiles.
{% endtab %}
{% endtabs %}

## Best practices

✅ Use a contrasting overlay for better text readability.

✅ Keep image cards consistent in style and size.

***

<figure><img src="/files/6RW1JWuKNf9ovVFLkLXc" alt=""><figcaption><p><a href="https://apps.shopify.com/xflow?utm_source=foxecom&#x26;utm_medium=help_center_hyper&#x26;utm_campaign=banner">Install XFlow Back In Stock Automation FREE</a></p></figcaption></figure>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.foxecom.com/hyper-theme/theme-sections/featured-countdown-timer.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.