The Countdown Timer section is ideal for highlighting upcoming events such as product launches or sales campaigns, with or without an accompanying image. This versatile section helps you create a compelling countdown banner to showcase time-sensitive offers or releases, engaging visitors with the urgency of a ticking clock.
Adding the Countdown timer
Steps
-
Open the Theme Editor.
Navigate to your Shopify dashboard and open the Theme Editor for your store. -
Add the Countdown timer section.
Click on 'Add section' and select 'Countdown timer' to integrate this section into your page layout. -
Save your changes.
After customizing the Countdown timer section, click 'Save' to implement your adjustments.
Edit Section Settings
General
Color Scheme: Tailor the color theme to fit your branding.
Overlay Opacity: Adjust the overlay's transparency to balance visibility between the timer and the background image.
Desktop and Mobile Layouts
Full Width Option: Choose to span the countdown section across the full screen.
Section Height: Options include 'Full screen' and 'Natural' (dynamic) or a specific pixel height (static), with a range from 200px to 1200px for desktop and 200px to 800px for mobile.
Text Alignment: Align text to the left, center, right, or justify.
Content Position: Select the location of the countdown timer and accompanying text on the page.
Margins: Fine-tune the space above and below the section.
Customize with Blocks
Subheading Block
Subheading: Enter text to serve as a prelude or context to the main content.
HTML Tag Selector: Choose the appropriate HTML tag (e.g., <h2>, <h3>) for semantic structure and SEO.
Size Modifier: Adjust the text size to fit your design, available for both desktop and mobile.
Margin Top: Set the space above the subheading to ensure visual separation and balance.
Heading Block
Heading: Input the main title or focal point of the section.
HTML Tag Selector: Select the desired HTML tag to emphasize the hierarchical importance (e.g., <h1>, <h2>).
Size Modifier: Customize the heading size for visual impact, with settings for desktop and mobile.
Margin Top: Control the top margin to align with the overall layout and spacing.
Timer Datetime Block
Datetime Format: Set the target date and time for the countdown. Format: YYYY-MM-DD HH:MM. Timer will use the store's timezone by default, but you can overwrite the timezone by adding the timezone difference to the value. Example: 2026-12-24 00:00-06:00
Time Units Display: Choose to show the countdown units ("Hide," "Show above," "Show below") and their placement.
Unit Spacing: Adjust spacing between units for clarity (options: Narrow, Medium, Wide).
Text Gradient: Apply a color gradient to the text, overriding default colors for a standout effect.
Size Modifier: Select the size of the countdown timer text for both desktop and mobile views.
Margin Top: Customize the top margin to integrate the timer smoothly into the section layout.
Button Block
Button Label: Define the call-to-action text for the button.
Button Link: Specify the URL or destination the button should direct to.
Button Style: Choose the button's appearance (Primary, Secondary, or Link) to match your stores theme.
Size Modifier: Adjust the button's size, ensuring it's proportionate to the content area on both desktop and mobile.
Margin Top: Set the space above the button to maintain visual harmony.
Post Timer Message Block
Configure a special message to appear once the countdown ends, offering continued engagement.
RTE Text Editor: Utilize the rich text editor to craft your post-timer message, adding a personal call-to-action.
Button: Optionally, include another button within this block which appears when the time runs out, reinforcing the action you wish users to take after the countdown.
Image (or Video) Block
Media Toggle: Decide between an image or video backdrop for the timer, enhancing the section's visual appeal.
Image/Video Selection for Desktop and Mobile: Pick an image or paste a video URL.