The Countdown Timer section helps you create a promotional banner with a live countdown. You can use it for sales campaigns, product launches, limited-time offers, seasonal events, or any announcement that needs a clear deadline.
The section displays a background image, content blocks, buttons, and a countdown timer that automatically counts down to the date and time you set in the theme editor.
How to Set Up the Countdown Timer Section in Concept
Steps:
Add the Countdown Timer section
Open your Shopify admin and go to Online Store > Themes.
Click Customize on the Concept theme.
Open the page template where you want to display the countdown banner.
Click Add section.
Select Countdown timer.
After adding the section, you can configure the background image, timer, content position, text, buttons, and colors from the theme editor sidebar.
Configure the section image and layout
Use the main section settings to control the banner background and layout.
| Setting | Description |
|---|---|
| Image | Select the main background image for the countdown banner. |
| Image height | Controls the desktop image height. You can use an adapted image ratio or fixed height. |
| Image mobile | Select a separate image for mobile devices. If empty, the desktop image is used. |
| Image height mobile | Controls the mobile image height. |
| Content width | Controls the width of the content box. |
| Content position | Sets where the content appears on desktop. |
| Content position mobile | Sets where the content appears on mobile. |
| Text alignment | Aligns the content text on desktop. |
| Text alignment mobile | Aligns the content text on mobile. |
| Full width | Makes the section span the full browser width. |
| Rounded | Adds rounded corners to the section. |
| Divider | Adds a divider line to separate the section from nearby sections. |
| Enable parallax | Adds a parallax movement effect to the background image. |
| Parallax direction | Controls the parallax movement direction. |
| Allow transparent header | Allows the header to become transparent when this section is placed at the top of the page. |
Use a wide, high-quality image for desktop and a more vertical image for mobile if the banner needs to look better on smaller screens.
Add and configure the Timer block
The Timer block controls the countdown date and time.
Open the Countdown timer section in the theme editor.
Click Add block.
Select Timer.
Set the countdown deadline using these fields:
| Setting | Description |
|---|---|
| Year | Select the year when the countdown ends. |
| Month | Select the month when the countdown ends. |
| Day | Select the day when the countdown ends. |
| Hour | Select the hour when the countdown ends. |
| Minute | Select the minute when the countdown ends. |
| Text font | Controls the font style of the countdown numbers. |
| Text size | Controls the size of the countdown numbers. |
| Timer complete message | Text displays when the timer is finished. |
The countdown displays days, hours, minutes, and seconds. If the selected date is already in the past, the timer will not display on the storefront.
Add text content
You can add content blocks above or below the timer to explain the offer or campaign.
Available content blocks include:
| Block | Purpose |
|---|---|
| Subheading | Adds a small tagline above the main heading. |
| Heading | Adds the main title for the countdown banner. |
| Text | Adds supporting description text. |
| Button | Adds a call-to-action button. |
| Link | Adds a text link. |
| Icon | Adds a theme icon or custom icon image. |
| Image | Adds a small image inside the content area. |
| Custom liquid | Adds custom Liquid or custom content. |
| Spacing | Adds vertical space between blocks. |
Use these blocks to create a complete promotional message, such as a sale title, short description, countdown timer, and button linking to a collection or product page.
Add a call-to-action button
Use the Button block when you want customers to click through to another page.
The button block includes these settings:
| Setting | Description |
|---|---|
| Button label | The text shown on the button. |
| Button link | The page, collection, product, or URL the button opens. |
| Button style | Controls the button appearance. |
| Button size | Controls the button size. |
| Open link in new tab | Opens the link in a new browser tab. |
| Show arrow icon | Adds an arrow icon to the button. |
If the button label is empty, the button will not display.
Configure colors and overlay
Use the color settings to match the countdown banner with your campaign design.
| Setting | Description |
|---|---|
| Text | Controls the main text color. |
| Background | Adds a background color behind the section. |
| Background gradient | Adds a gradient background. |
| Highlight | Controls highlighted text color. |
| Highlight gradient | Adds a gradient effect to highlighted text. |
| Button text | Controls button text color. |
| Button background | Controls button background color. |
| Button gradient | Adds a gradient to the button background. |
| Overlay | Adds an overlay color on top of the image. |
| Overlay opacity | Controls how strong the overlay appears. |
Increase the overlay opacity if the text is hard to read on top of the background image.
Preview and save
After configuring the section, preview it on desktop and mobile.
Check that the background image displays correctly.
Check that the content position and text alignment look good.
Check that the timer shows the correct countdown.
Check that the button links to the correct destination.
Click Save when everything looks correct.
Troubleshooting
If the countdown timer does not appear, check that the Timer block has been added to the section.
If the timer is hidden, check that the selected countdown date and time have not already passed.
If the background image looks cropped, adjust the Image height or upload a better-sized image.
If the mobile layout does not look right, add a separate Image mobile and adjust Image height mobile.
If the text is difficult to read, increase the Overlay opacity or change the text color.
If the button does not appear, make sure the Button label field is not empty.
If the button does not link anywhere, make sure the Button link field has been set.
Need Further Assistance
If you encounter any issues or need additional help with your Concept theme, please reach out to our support team via our Ticket System for assistance within 8 hours.
शेयर करना:
How to Set Up the Mobile Dock in Concept
How to Set Up the Shop the Feed Section in Concept