> For the complete documentation index, see [llms.txt](https://docs.samita.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.samita.io/samita-countdown-timer-bar/where-countdowns-appear/shortcode.md).

# Place a countdown with a shortcode

Put a countdown at an exact spot in your theme using the app's shortcode and the Samita Countdown app block.

Automatic placement puts a countdown below the Add to cart button on product pages. For anywhere else — a homepage section, a collection banner, above your header, a landing page — you use the countdown's **shortcode**.

A shortcode is a small piece of markup that says "put this countdown here". You copy it from the app and paste it into a **Samita Countdown** block in your theme editor. No code editing, and you can move or remove the block any time.

## What the shortcode looks like

Every countdown has its own, built from its ID and type:

```html
<div class="samita-countdown" data-id="12345" data-type="timer"></div>
```

The `data-id` is that countdown's ID — the number in the Id column on the [Countdowns list](/samita-countdown-timer-bar/countdowns/manage.md) — and `data-type` is one of `timer`, `delivery`, `stock`, or `cart`.

{% hint style="warning" %}
Copy the shortcode from the countdown you actually want. Typing one by hand with the wrong ID renders nothing, and there's no error to tell you why.
{% endhint %}

## Steps to place a countdown

{% stepper %}
{% step %}

### Copy the shortcode

Open the countdown in the app and go to its **Display** tab. In the **Display position** section, find the **Shortcode** line and click **Copy**.

<figure><img src="https://855148666-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FaOJwtwIUCsbYLCDqZD0u%2Fuploads%2Fgit-blob-04991cd12537bd1d051878383716a9d83421a6ea%2Fscreenshot-display-shortcode-copy.png?alt=media" alt="The Shortcode field on the Display tab with its Copy button"><figcaption><p>Each countdown's shortcode is on its own Display tab.</p></figcaption></figure>
{% endstep %}

{% step %}

### Open your theme editor

In your Shopify admin, go to **Online Store → Themes**, then click **Customize** on the theme you want to change.
{% endstep %}

{% step %}

### Navigate to the page you want

Use the template selector at the top of the theme editor to open the page the countdown should appear on — your home page, a product template, a collection template, a custom page.

The countdown will render exactly where you place the block on this template, so pick the right one before you add anything.
{% endstep %}

{% step %}

### Add the Samita Countdown block

Click **Add block** in the section where you want the countdown, and choose **Samita Countdown** from the Apps part of the list.

<figure><img src="https://855148666-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FaOJwtwIUCsbYLCDqZD0u%2Fuploads%2Fgit-blob-098842f4b4e0f4831a3e8b763f8e0c452c66f255%2Fscreenshot-theme-editor-add-block.png?alt=media" alt="The theme editor Add block menu with the Samita Countdown app block listed under Apps"><figcaption><p>The app block appears as Samita Countdown in the Add block list.</p></figcaption></figure>

{% hint style="info" %}
The block can be added to any template, and to your header and footer groups — so a countdown bar across the top of every page is possible.
{% endhint %}
{% endstep %}

{% step %}

### Paste the shortcode into the block

With the block selected, paste your shortcode into its **Shortcode** field, replacing the placeholder that's there.

<figure><img src="https://855148666-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FaOJwtwIUCsbYLCDqZD0u%2Fuploads%2Fgit-blob-8fc6d665260580ab79a14331c7acaf95660cf565%2Fscreenshot-theme-editor-block-shortcode.png?alt=media" alt="The Samita Countdown block settings with a shortcode pasted into the Shortcode field"><figcaption><p>Paste the shortcode into the block's Shortcode setting.</p></figcaption></figure>
{% endstep %}

{% step %}

### Drag the block where you want it

Move the block up or down within its section until the countdown sits where you want it. The theme editor preview shows the block's position; the countdown itself renders on the live page.
{% endstep %}

{% step %}

### Click Save

Save the theme. The countdown appears on that page for shoppers straight away.
{% endstep %}

{% step %}

### Check the live page

Open the page on your live storefront and confirm the countdown renders where you placed the block.

If nothing appears, check that the countdown is **Active**, that its [conditions](/samita-countdown-timer-bar/where-countdowns-appear/conditions.md) match this page, and that its timing says it should be visible now.
{% endstep %}
{% endstepper %}

## Using a shortcode and automatic placement together

They're independent. A countdown can have **Product page** ticked *and* a shortcode block on your home page, and it renders in both places.

That's often what you want for a storewide sale: the timer under every Add to cart button, plus a banner at the top of the home page.

## The same countdown in several places

You can paste the same shortcode into as many blocks as you like, on as many templates as you like. One countdown, one set of settings, rendering everywhere you've placed it — change the end date once and every copy follows.

## Conditions still apply

A shortcode gives a countdown somewhere to render; it doesn't override its [conditions](/samita-countdown-timer-bar/where-countdowns-appear/conditions.md).

A countdown restricted to one collection, with a shortcode block on your home page, shows nothing there — the home page isn't in that collection. If a countdown should appear somewhere its conditions exclude, widen the conditions.

## Removing a countdown placed this way

Delete the **Samita Countdown** block from the theme editor and save. Deactivating or deleting the countdown in the app also stops it rendering, but leaves an empty block behind in your theme — tidy it up when you're done with it.

## Next steps

* [Display position](/samita-countdown-timer-bar/where-countdowns-appear/position.md)
* [Display conditions](/samita-countdown-timer-bar/where-countdowns-appear/conditions.md)
* [Countdown not showing](/samita-countdown-timer-bar/help/countdown-not-showing.md)
* [Theme integration](https://github.com/samita-baoan/doc-timer/tree/restructure/docs-v2/settings/theme-integration.md)


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

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

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

```
GET https://docs.samita.io/samita-countdown-timer-bar/where-countdowns-appear/shortcode.md?ask=<question>&goal=<user_goal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

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.