The Countdown timer is a simple yet highly effective tool for creating a sense of urgency (FOMO), encouraging customers to take action more quickly. Displaying a countdown clock for promotions or new collection launches not only grabs attention but also significantly boosts conversion rates.
In this section, you'll learn how to customize the Countdown timer section to match your campaign.
You can access a Countdown timer by following these simple steps:
Step 01: From Shopify Admin, click on Online Store > Select Themes > In the Current theme section, click the Customize button.
Step 02: In the theme editor (Customize), click the Sections button > Click the Add section button > In the Sections tab, scroll through the list or use the search bar to find and select Countdown timer.
You can configure some general options for the Countdown timer section below:
Color scheme: Choose a predefined color scheme to match your site's branding and style.
Background: Provides options for setting the background of the entire Countdown timer section.
Full width: When selected, the background stretches across the entire screen width.
Boxed: When selected, the content is contained within a centered box, leaving margins on the sides.
Background image: Upload or select a background image for desktop view. Recommended size: 3000 x 1800px (.jpg). Note: The image might be slightly cropped at the edges.
Mobile background image: Upload or select a separate image for mobile devices. Recommended size: 31600 x 2000px (.jpg). The image can be slightly cut off on the edges to fit various screen sizes.
If you only select a background image and do not upload a mobile background image, the background image will be applied on both desktop and mobile devices.
Background image overlay opacity: Adjust the darkness of an overlay on top of the background image (0% = no overlay, 100% = fully black). This helps improve text readability on bright images.
Hidden section on mobile: Toggle this switch to hide the countdown timer section on mobile devices if needed.
Display period: The countdown timer can run for up to 99 days maximum. You can set the time zone in the theme settings to ensure the countdown ends at the correct local time.
Year: This allows you to set the target year for the countdown to end.
Month: This allows you to set the target month for the countdown to end.
Day: This allows you to set the target day of the month for the countdown to end.
Hour: This allows you to set the target hour for the countdown to end (likely in a 24-hour format).
Minute: This allows you to set the target minute for the countdown to end.
Action when the timer end: Choose what happens when the countdown reaches zero:
Leave timer at zero: The timer stays visible, frozen at 00:00.
Hide Section: The entire countdown section will disappear.
Hide timer and show message: The timer will be hidden and replaced with a custom message.
Timer end message: If you choose “Hide timer and show message,” you can enter a custom message here. This message supports basic text formatting (bold, italic, links).
Desktop timer position: Select whether the countdown timer appears on the Left or Right side of the section.
Bottom margin: Controls the amount of space (in pixels) below the Countdown timer section on desktop devices.
Mobile bottom margin: Controls the bottom spacing specifically for mobile devices. This ensures the layout is mobile-responsive and doesn’t appear too cramped or too loose.
Top padding: Sets the space between the top of the video section and the element above it (in pixels).
Bottom padding: Sets the space between the bottom of the video section and the element below it (in pixels).
Mobile top padding: Sets the space between the top of the video section and the element above it (in pixels) on mobile devices.
Mobile bottom padding: Sets the space between the bottom of the video section and the element below it (in pixels) on mobile devices.
The Countdown timer section typically includes blocks like Heading, Subheading, Description, and Button. These blocks serve to introduce the timer, provide context, and offer a call to action related to the event or deadline.
To add those blocks, click the Add block button (plus icon ➕) under the Countdown timer section > Then, in the Blocks tab, select the block you want to add.
Let's explore the customization options for each of these blocks:
You can configure some general options for the Heading block below:
Heading: This box is where you input the main headline. You can format the text using bold, italic, link...
Heading size: Sets the size of the heading, options included: Large, Medium, Small, Extra small, Extra extra small.
Heading tag: Sets the HTML tag of the heading, which does affect SEO. Ex: use H1 for the main headline of a page (each page should only have one H1).
You can configure some general options for the Subheading block below:
Subheading: This is the supporting text that appears below the main Heading. You can enter and format the text using bold, italic, link...
Subheading font: Choose the font style for the subheading, options included: Heading and Body text. You can set the font for Heading and Body text option in the Theme settings > Typography > Heading font, Body font.
Subheading size: Select the visual size of the subheading text, options included: Small, Medium and Large.
You can configure some general options for the Description block below:
Description: This is the body text that provides additional information or promotional details. You can enter and format the text using bold, italic, link, list, text alignment,...
Description size: Choose the visual size of the description text: Small, Medium, Large or Extra large
You can configure some general options for the Button block below:
Button label: Enter the text displayed on the button
Button link: Enter the URL or select a page/product to link the button to. When clicked, users will be directed to the specified destination.
Button size: Choose the size of the button, options included: Small, Medium, or Large
Button style: Select the button appearance. Common options include: Solid, Outline, Link, or Solid 3D
Button position: Decide where the button appears relative to the text
Inside: Button appears inside the content area.
Outside: Button appears outside the main content block, often below it.
