# Featured countdown timer
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](https://docs.foxecom.com/hyper-theme/theme-settings/colors "mention")
#### 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.
#### Mobile layout
* **Number of columns on mobile:** Choose 1-2–3 columns for smaller screens.
{% hint style="info" %}
On mobile, the image cards display under the Countdown timer.
{% endhint %}
* **Enable swipe on mobile:** Allow horizontal swipe if you have many items.
### Block settings
{% tabs %}
{% tab title="Countdown timer block" %}
#### **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.
* **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.
* **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.
*Learn more:* [add-highlighted-text-to-your-headings](https://docs.foxecom.com/hyper-theme/faqs/add-highlighted-text-to-your-headings "mention")
* **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).
{% endtab %}
{% tab title="Image card block" %}
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.
*Learn more:* [add-highlighted-text-to-your-headings](https://docs.foxecom.com/hyper-theme/faqs/add-highlighted-text-to-your-headings "mention")
* **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.
***
.jpg?alt=media&token=3d02aebe-40da-491e-8ea9-f5ac80ed3b69)
.png?alt=media&token=90cbed2c-e791-49c8-9f43-49a08bed6f1f)