> For the complete documentation index, see [llms.txt](https://foxecom.gitbook.io/minimog-theme/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://foxecom.gitbook.io/minimog-theme/theme-sections/countdown-timer.md).

# Countdown timer

Learn how to set up Countdown timer to trigger the FOMO effect to boost conversions and sales.

<div data-full-width="true"><figure><img src="https://1997835572-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MlL6sK9D7unq8F2VPPp%2Fuploads%2Fa5w6LQkUFhLWSt58jhjP%2FHelp%20Center%20banner%20%201250%20x%20200-2.png?alt=media&amp;token=ab0daf12-b917-4435-a603-9a3f6613f853" alt=""><figcaption><p><a href="https://foxecom.com/pages/affiliate?utm_source=minimog%2Bhelp%2Bcenter&#x26;utm_medium=banner&#x26;utm_campaign=foxaffiliatelaunch2024">Explore FoxEcom Affiliate Program now </a> <span data-gb-custom-inline data-tag="emoji" data-code="2728">✨</span></p></figcaption></figure></div>

{% embed url="<https://youtu.be/RVWtidPZKS8>" %}

A countdown clock for promotion/new collection release can bring excitement to customers that have been waiting for the event.&#x20;

![](https://1997835572-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MlL6sK9D7unq8F2VPPp%2Fuploads%2FTl3nugn0VYWPv932RG69%2FScreen%20Shot%202021-10-15%20at%2022.26.53.png?alt=media\&token=40e343fe-73d2-4aca-b1e7-967ad4faa74a)

## How to add the Countdown timer section to your Shopify store <a href="#how-to-add-an-image-gallery-section-to-your-shopify-store" id="how-to-add-an-image-gallery-section-to-your-shopify-store"></a>

{% hint style="info" %}
Steps

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

## How to edit a Countdown timer section <a href="#how-to-edit-an-image-gallery-section" id="how-to-edit-an-image-gallery-section"></a>

### General settings

You can choose your **Container type** for the collection list as:

* Default;
* Full width;
* Use container box.

Select the **Color scheme** for the section.&#x20;

{% hint style="info" %}
Set up your Color schemes anytime in the Theme settings > [Colors](/minimog-theme/theme-settings/colors-and-color-schemes.md).
{% endhint %}

<figure><img src="https://1997835572-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MlL6sK9D7unq8F2VPPp%2Fuploads%2FpYzMx8m04kS97OGi9bJZ%2Fimage.png?alt=media&amp;token=15e965ef-ab49-45a2-a36c-0fbad35590aa" alt=""><figcaption></figcaption></figure>

Choose the **Alignment** for the section content:

* Left
* Center
* Right

<figure><img src="https://1997835572-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MlL6sK9D7unq8F2VPPp%2Fuploads%2FWCWkaLhLifvzPO9v0Q6v%2Fimage.png?alt=media&amp;token=3a19d78f-b6cf-48b4-8e43-feadd5e02b29" alt=""><figcaption></figcaption></figure>

You can upload a **Background image** for the section.

Enable **Use background in container** to display the background image only inside the content container.

<figure><img src="https://1997835572-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MlL6sK9D7unq8F2VPPp%2Fuploads%2Fa4tPiFWlgCqkFYm9ippM%2Fimage.png?alt=media&amp;token=43a764f2-88bc-4e77-9b24-cb1af95f896f" alt=""><figcaption></figcaption></figure>

Enable **Parallax effect** to create a scrolling animation effect for the background image.

The **Parallax direction** can be set as:

* Vertical
* Horizontal
* Zoom

<figure><img src="https://1997835572-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MlL6sK9D7unq8F2VPPp%2Fuploads%2FnggNBshbcJPWJOW9dqd8%2Fimage.png?alt=media&amp;token=06031658-9b01-4e01-9b7e-878bdc865368" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
Note: The parallax effect only works when the background image is used as the section background.
{% endhint %}

### Mobile settings

Upload a separate **Image** for mobile devices to optimize the section appearance on smaller screens.

Enable **Use image as background** to display the selected mobile image as the section background.

<figure><img src="https://1997835572-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MlL6sK9D7unq8F2VPPp%2Fuploads%2FqBdONIceKezGyhjxSBUj%2Fimage.png?alt=media&amp;token=6ee0b16c-e74f-4e85-8eef-1104102eac31" alt=""><figcaption></figcaption></figure>

{% tabs %}
{% tab title="Enable Use image as background option" %}

<figure><img src="https://1997835572-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MlL6sK9D7unq8F2VPPp%2Fuploads%2FzK56THOq8m5p28PLwxKL%2Fimage.png?alt=media&amp;token=a51ecd8c-3d67-4675-ac38-ad77eae72ea0" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Disable Use image as background option" %}

<figure><img src="https://1997835572-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MlL6sK9D7unq8F2VPPp%2Fuploads%2FNomF2ILKpGQNkLGZVXMN%2Fimage.png?alt=media&amp;token=ab82a398-ea3f-4018-84c0-719f2dea7f39" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

### Content settings

Enter a **Heading** for the countdown section.

Choose the **Heading size** as:

* Heading xs
* Heading sm
* Heading md
* Heading lg
* Heading xl
* Heading 2xl

Add an optional **Description** using the rich text editor.

Select the **Text size** for the description:

* Small
* Base size
* Large
* Extra large
* Default

<figure><img src="https://1997835572-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MlL6sK9D7unq8F2VPPp%2Fuploads%2FeJ1V1OoQTusXvKcl9Mr1%2Fimage.png?alt=media&amp;token=f12a64b2-83ef-4558-936f-305a89ea124a" alt=""><figcaption></figcaption></figure>

### Countdown timer

Add a countdown timer and adjust the end time of the event.

The **Countdown type** offers two modes:

* **Evergreen**: A repeating countdown that resets after a specified duration (e.g., every month).
  * This is useful for recurring sales, daily deals, or subscription cycles.

{% hint style="warning" %}
The Evergreen setting is only available in Minimog **version 6.0.0 and above**. ✨

See [Changelog](/minimog-theme/changelog.md).
{% endhint %}

* **Fixed time**: A one-time countdown that ends at a specific date and time.
  * Ideal for limited-time promotions, event registrations, or product launches.

<figure><img src="https://1997835572-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MlL6sK9D7unq8F2VPPp%2Fuploads%2FHl5tlR9Gk79CZkP9AZdC%2Fimage.png?alt=media&amp;token=8be23bb1-f3e6-43b3-96f8-17cbcc6faf1e" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
If you choose the **Evergreen** countdown, you must specify the **Duration** for when the timer should reset.

**Duration** determines how often the countdown restarts.

![](https://1997835572-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MlL6sK9D7unq8F2VPPp%2Fuploads%2FXzbvosYVfg6vlFfJokvl%2Fimage.png?alt=media\&token=a21ef1c8-3648-4401-a64f-45a1a5d21872)
{% endhint %}

{% hint style="info" %}
If you choose the **Fixed time** countdown, you need to specify when the countdown should end.

Enter the exact date and time in the **Ends time** field when the countdown should stop.

![](https://1997835572-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MlL6sK9D7unq8F2VPPp%2Fuploads%2FjTvLblEcDJATuD02xbrN%2Fimage.png?alt=media\&token=6a5ce584-575b-4f4c-abc6-6885bdcb9e2e)

Date formats accepted: YYYY-MM-DD HH:MM:ss
{% endhint %}

### Button settings

Display a call-to-action button to redirect customers to your desired pages.&#x20;

Add a **Label** and **Link** for one or both, then choose a **Button style:**&#x20;

* Primary button
* Secondary button
* Underline button
* White button&#x20;

{% hint style="info" %}
Leave the **Button label** field blank to hide the button.
{% endhint %}

and adjust the **Button size:**

* Button small
* Button medium
* Button large

<figure><img src="https://1997835572-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MlL6sK9D7unq8F2VPPp%2Fuploads%2F1GICGipZJsKpvQ0vWGp7%2Fimage.png?alt=media&amp;token=cc5e732d-28e8-4035-a15c-3abeaf13b1a3" alt=""><figcaption></figcaption></figure>

### Advanced

Enable **Preload image** to preload the section image when the page loads.

This can help:

* Reduce Largest Contentful Paint (LCP);
* Improve page loading performance.

<figure><img src="https://1997835572-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MlL6sK9D7unq8F2VPPp%2Fuploads%2FqQDwd6RTJ320mnX1umwO%2Fimage.png?alt=media&amp;token=a33b7a7e-2104-47ac-a1d2-eab5b8d77c58" alt=""><figcaption></figcaption></figure>
