> 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/banners/overview.md). # Banners overview A bar across the top or foot of every page, holding a message, a countdown, a button, a code, or an image. A banner is a strip that spans the width of your storefront. It's where you announce free shipping, a sale that ends tonight, or a discount code — without editing your theme or taking over the page. Banners aren't a countdown type. They live in their own section of the app, reached from **Banners** in the app's menu, with their own list page and their own editor.

A storefront page with a dark banner across the top reading Free shipping on all orders over $50, with a countdown and a Shop now button — A banner at the top of the storefront, with a message, a countdown, and a button.

## What a banner is made of A banner holds **elements** laid out in a row. There are six kinds: | Element | What it is | | ----------------- | ------------------------------------------------------------------- | | **Text** | A line of words — the message itself | | **Countdown** | A live timer that counts down to a date, or per shopper | | **Button** | A link, a jump to a section, or a discount code the shopper applies | | **Discount code** | A code the shopper copies with one click | | **Image** | A logo, a badge, or a small illustration | | **Line break** | Starts a new line, so the bar can run in two rows | Elements sit inside a **group**. One group is the ordinary case and reads as a plain bar. Add a second group and the bar cycles between them, so one banner can say two things in turn. ## How the editor is laid out The builder has three panels down the left, and a fourth column on the right for whichever element you've picked. | Panel | What it holds | Guide | | ------------- | --------------------------------------------------------------- | -------------------------------------------------------------------------- | | **Content** | Groups, elements, and the order they sit in | [Bar content and elements](/samita-countdown-timer-bar/banners/content.md) | | **Design** | Background, colours, spacing, the close button, the bar link | [Design a banner](/samita-countdown-timer-bar/banners/design.md) | | **Placement** | Where it sits, which pages and devices see it, and when it runs | [Where a banner appears](/samita-countdown-timer-bar/banners/placement.md) | Animation — how the bar arrives and how groups change over — is part of the Design panel and has [a guide of its own](/samita-countdown-timer-bar/banners/animation.md). ## It places itself You don't have to touch your theme. Choose **Top of the page** or **Bottom of the page** and the app inserts the bar for you. If you want it somewhere else — under a specific section, halfway down a landing page — choose **Custom** and paste the shortcode where it belongs. See [Where a banner appears](/samita-countdown-timer-bar/banners/placement.md). ## Where to start


Create a banner	The full setup, from a starter template to a live storefront.	Create a banner
Bar content and elements	What each element does, and how groups cycle.	Bar content and elements
Where a banner appears	Position, conditions, devices, and schedule.	Where a banner appears
Design a banner	Background, colours, spacing, and the close button.	Design a banner

## Managing your banners The **Banners** page lists them all, with **All**, **Active**, and **Draft** tabs, search, and sorting. See [Manage banners](/samita-countdown-timer-bar/banners/manage.md). {% hint style="info" %} A banner only shows on the storefront when it's **Active**, its conditions match the page, and it's inside its schedule. A **Draft** banner is saved but never shown — useful while you're still writing it. {% endhint %} ## Next steps * [Create a banner](/samita-countdown-timer-bar/banners/create.md) * [Bar content and elements](/samita-countdown-timer-bar/banners/content.md) * [Design a banner](/samita-countdown-timer-bar/banners/design.md) * [Where a banner appears](/samita-countdown-timer-bar/banners/placement.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/banners/overview.md?ask=&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.