> ## Documentation Index > Fetch the complete documentation index at: https://docs.shopify.lightsout.agency/llms.txt > Use this file to discover all available pages before exploring further. # Run a sale with Facet's promotion banner and countdown > Set up Facet's promotion banner with an optional picture, a heading, text, a button and a countdown timer that hides or shows a message when it ends. The Facet promotion banner is a band for a sale or a limited offer. It holds a heading, text, a button and a countdown timer, with an optional picture beside the content or behind it. This page covers the section settings and the countdown timer block. ![The Promotion banner section as it appears on the Facet demo storefront.](https://mintcdn.com/lightsout/Svjpo54WQSiE2VRv/images/themes/facet/sections/promotion-banner/promotion-banner-overview.jpg?fit=max\&auto=format\&n=Svjpo54WQSiE2VRv\&q=85\&s=133810663b93d36f29b42071b4af1f74) ## What this section controls * Whether the content sits in a row or in a column on large screens. * An optional picture on the left, on the right or behind the content. * A countdown timer to a date and time you choose. * What shoppers see when the countdown ends. ## Getting started **1. Open the Theme Customizer** In your Shopify admin, open **Online Store**, then **Themes**, and click **Customize** next to Facet. **2. Add the section** In the **Sections** panel, click **Add section** and choose **Promotion banner**. It comes with a **Heading**, **Text**, **Countdown timer** and **Button**. It can't be added to the header. **3. Set the end of your offer** Click the **Countdown timer** block and pick the **Year**, **Month**, **Day**, **Hour** and **Minute** your offer ends. **4. Link the button** Click the **Button** block and choose where it goes, for example your sale collection. A button without a link doesn't show on your store. ![The theme editor with the Promotion banner section selected in the sidebar, its settings panel open on the left and the section highlighted in the preview.](https://mintcdn.com/lightsout/Svjpo54WQSiE2VRv/images/themes/facet/sections/promotion-banner/promotion-banner-location.jpg?fit=max\&auto=format\&n=Svjpo54WQSiE2VRv\&q=85\&s=b1c04c74af2b9544a19a75525c32e053) ## Section settings ![Theme editor sidebar showing the Promotion banner section settings: Layout direction, Image, Mobile image, Image position, Common settings, Color scheme, and more.](https://mintcdn.com/lightsout/Svjpo54WQSiE2VRv/images/themes/facet/sections/promotion-banner/promotion-banner-settings-1.png?fit=max\&auto=format\&n=Svjpo54WQSiE2VRv\&q=85\&s=cc2671fd1da734956683bb4990d08da8) > [accordion] Layout direction > > * **Horizontal** (default): on large screens the heading and text, the countdown and the button sit side by side in three columns. A picture on the left or right takes 40% of the width. > * **Vertical**: the blocks stack in a column. A picture on the left or right sits above the content in a 16:9 shape. > > On phones the blocks always stack. > [accordion] Image and Mobile image > > **Image** is the banner picture. **Mobile image** is an optional picture for phones. Without one, phones show **Image**. With **Image position** set to **Left** or **Right** and no picture picked, the Theme Customizer shows a placeholder beside the content, while your store shows the banner as text only. With **Background** and no picture, a placeholder fills the band. > [accordion] Image position > > * **None**: no picture is shown, even if you picked one. > * **Left** (default) or **Right**: the picture sits beside the content. > * **Background**: the picture fills the band behind the content. ### Common settings ![Theme editor sidebar showing the Promotion banner section settings (part 2, scrolled): Image position, Common settings, Color scheme, Top padding, Bottom padding, Page width, and more.](https://mintcdn.com/lightsout/Svjpo54WQSiE2VRv/images/themes/facet/sections/promotion-banner/promotion-banner-settings-2.png?fit=max\&auto=format\&n=Svjpo54WQSiE2VRv\&q=85\&s=170a87e7f1351b8a5d6476c06b10844f) * **Color scheme**: the colors of the band. * **Top padding** and **Bottom padding**: None (default), Small, Medium, Large or Extra large. * **Page width**: Narrow, Narrower, Fluid (default) or Full. See [Common settings](https://docs.shopify.lightsout.agency/themes/facet/common-settings.md) for details. ## Blocks The promotion banner accepts **Heading**, **Text** and **Button** blocks. See [Theme blocks](https://docs.shopify.lightsout.agency/themes/facet/theme-blocks.md) for their settings. ### Countdown timer Counts down to the date and time you set, in your store's time zone. It updates every second. The end time follows daylight saving time: an end date in summer is read as summer time even when you set it in winter. ![Theme editor sidebar showing the Countdown timer block settings: Year, Month, Day, Hour, Minute, End message, Size and Show timer boxes.](https://mintcdn.com/lightsout/Svjpo54WQSiE2VRv/images/themes/facet/sections/promotion-banner/promotion-banner-block-countdown-timer-1.png?fit=max\&auto=format\&n=Svjpo54WQSiE2VRv\&q=85\&s=16327a114cbff9dd826acf5cbf5f89a9) ![Theme editor sidebar showing the Countdown timer block settings scrolled down: End message, Size, Show timer boxes, Show days, Show hours, Show minutes and Show seconds.](https://mintcdn.com/lightsout/Svjpo54WQSiE2VRv/images/themes/facet/sections/promotion-banner/promotion-banner-block-countdown-timer-2.png?fit=max\&auto=format\&n=Svjpo54WQSiE2VRv\&q=85\&s=f5cd9cd4b7db78a359f5b4ab59a65155) > [tab] End date > > * **Year**: default 2027. > * **Month**: January (default) to December. > * **Day**: from 1 to 31. Default: 1. A day past the end of the month, such as 31 in April, counts down to the last day of that month instead. > * **Hour**: from 0 to 23. Default: 0. > * **Minute**: from 0 to 59. Default: 0. > [tab] When it ends > > * **End message**: the text shown in place of the numbers once the time is up. Default: "Sale has ended". > > When the countdown reaches zero, the numbers are replaced by the **End message**. If you leave **End message** empty, the whole timer disappears from your store instead. In the Theme Customizer an empty timer stays visible so you can still select it. > [tab] Look > > * **Size**: **S** (default), **M**, **L** or **XL**. Sets the size of the numbers. > * **Show timer boxes**: off by default. Puts each number in its own box. > [tab] Units > > * **Show days**, **Show hours**, **Show minutes** and **Show seconds**: all on by default. Each number has a short label under it: Day, Hrs, Min and Sec. > > When you hide a unit, its time rolls into the next smaller unit you show. For example, with days hidden, two days and three hours show as 51 hours. ## Best practices * **Set the end time in your store's time zone.** The timer reads the date and time you enter as store time, so shoppers in other countries see the same deadline. * **Write an end message, or remove the section after the sale.** With an end message, shoppers know the offer is over. Without one, the timer vanishes but the heading and button stay. * **Keep the heading short in the horizontal layout.** The heading and text share one third of the width with the countdown and button beside them. ## Related guides > [card] [Theme blocks](https://docs.shopify.lightsout.agency/themes/facet/theme-blocks.md) > > Settings for the heading, text and button blocks in this banner. > [card] [Promotional pop-up](https://docs.shopify.lightsout.agency/themes/facet/sections/promo-popup.md) > > Show your offer in a pop-up instead of a band. This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.