Countdown Timer allows you to display a live countdown directly on your mobile app. You can use it to highlight flash sales, limited-time offers, and special promotions, which encourages your customers to complete their purchases before they miss out on any offers or campaigns you are running.
With Countdown Timers, you can:
Highlight limited-time offers by displaying a live countdown on your app’s homepage, product listing pages (PLPs), and product detail pages (PDPs)
Create a sense of urgency by showing customers how much time is left before a promotion ends.
Customize the timer's design with your own text, colors, alignment, and countdown format.
Control the timer's display by choosing its position and when it should disappear, such as when an offer ends or a product sells out.
Use different configurations to highlight storewide promotions, specific collections, or individual products.
Let's explore how Countdown Timers look on your app and how to enable them in different locations!
How the Countdown Timer Will Look
Countdown Timers can appear in different areas of your mobile app, depending on the type of timer you use and how you configure it.
The standard Countdown Timer supports customizable titles, promotional images, subtitles, and timer colors. The Product Page Countdown Timer offers additional product-specific settings, including display conditions, timer positioning, and Shopify product metafields for individual deadlines.
How to Enable Countdown Timer on the App’s Homepage
The standard Countdown Timer can be added to your app's design and configured to highlight your campaign on the showcase.
1- Add the Countdown Timer
In your Shopney dashboard, open the Design (1) page. From the left menu in the Showcase (2) section, find the Countdown Timer (3) element. Drag and drop it into your desired position on the showcase.
💡Tip
Place the timer prominently on your showcase and use a campaign-specific image to capture customers' attention. For multi-collection campaigns, consider placing a slider, carousel, gallery, or slideshow below the timer to help customers explore the featured collections. |
2- Configure Your Timer
Once you click on the Countdown Timer element on the homepage, a menu will appear on the right side with various fields and options to customize your timer's settings.
Let’s go over what each area on the menu controls on the Countdown Timer:
Schedule: Allows you to schedule the countdown timer to be shown at a specific time
Visibility: Controls the visibility of the element based on the defined conditions
Title: Add a title to highlight your campaign, or leave it empty for a cleaner look.
End Time & Timezone: Set the campaign's end date, time, and timezone.
Action Type: Link the timer to a product, one or more collections, or a URL. When customers tap the timer, they will be directed to the selected destination.
Promotional Image: Upload a campaign-specific image to make the timer more visually engaging.
Action Text: Include a short subtitle below the timer to reinforce your campaign’s message, or hide it for a minimalist design.
Number Color: Customize the timer's digit color using the color palette or a HEX code.
Hide When Finished: Choose whether the timer remains visible after the countdown ends or disappears automatically.
Show on Product List: to make the same countdown timer appear on the product listing pages.
Margin: The margin between the countdown edges and the contents in it.
Disable Interaction: Enables or disables the timer’s tap interactions
Accessibility Text: Add a description text for accessibility. This will be read by screen readers to help visually impaired users understand the content.
🔍 Available Plans
Scheduling and the Visibility features are available in the Platinum Plan and above.
💡Tip
If you link the timer to multiple collections, the first collection added will be displayed when customers tap the timer. Prioritize your main collection if you want to direct customers to a specific destination. |
3- Review and Save Your Changes
After completing the configuration, click on Save & Update to make sure that the edits and changes you made are reflected in the app.
How to Enable Countdown Timer on the Product Listing Page
You can display the same Countdown Timer you added to your homepage on product listing pages to reinforce urgency as customers browse your collections.
1- Configure the Countdown Timer
Follow the steps in the previous section to add and configure the standard Countdown Timer on your live showcase.
2- Enable Product Listing Page Visibility
In the Countdown Timer's right-side menu, enable the option to display the timer on the Product Listing Page.
3- Review and Save Your Changes
Just like before, after completing the configuration, click on Save & Update to make sure that the edits and changes you made are reflected in the app.
💡Tip
Use this feature to create urgency on your campaign’s collection pages. For multi-collection campaigns, pair the timer with a slider or another design element to help customers discover featured collections. Want to see how it looks? Please follow the guide here to preview it. |
How to Enable Countdown Timer on the Product Page
Follow the steps below to enable and configure your countdown timer for the product details page.
🔍 Available Plans
Adding a Countdown Timer to the product details page is available in the Platinum Plan and above.
1- Go to the Customization section
In your dashboard, from the Design page (1), open the Customization section (2) and scroll down until you see Enable Countdown Timer (3). After you enable it, you can click on Configure (4).
2- Create New Countdown Timer
In the window, click on Add New to create a new timer. Please note that you can later edit, copy, or delete created countdown timers from this area.
3- Configure Your Timer’s Settings
Here you can configure various settings to control how your countdown timer appears on the cart screen. You'll see three sections: Display Conditions (1) and Configure (2), plus a live Preview (3) panel on the right where you can check your changes before clicking on Save (4).
Display Conditions: Control who sees the countdown timer using conditions based on product (product tag, product type, vendor, or metafield) or customer conditions (customer tag, customer metafield, and authentication status). You can choose No conditions, All conditions, or Any condition. Click on Add another condition to add conditions like “Product Tag”.
Configure: Here you can customize your Countdown Timer's content, format, visibility, and appearance to make it suitable for your promotional needs. You can also adjust its position and use product metafields to manage different countdown deadlines for individual products.
Timer Content: Add optional text, such as Don't miss out!. Leave it empty to display only the countdown numbers.
End Date, End Time, and Timezone: Set when your countdown ends. Please note that you can’t use past dates/time.
Timer Format: Choose which time units to display: Days, Hours, Minutes, and Seconds. At least one unit must remain selected.
Use Metafield (Optional): Use Shopify product date and time metafields to set different deadlines for individual products. If a product has no valid metafield value, the timer uses the End Date and End Time you choose and configure in Shopney.
Timer Visibility: Enable Hide on Sold Out to hide the timer on sold-out products, or Hide When Finished to hide it when the countdown reaches zero.
Timer Position: Use the Up and Down controls to choose from eight available positions on the Product Detail Page. Depending on the position you select, your timer can appear above or below these sections:
Product name
Variant selector
Quantity selector
Description
Recommended Products
Recently viewed products
Alignment and Colors: Choose Left, Center, or Right alignment, and customize the background, text, and countdown number colors.
As you adjust these settings, use the Preview panel on the right to check how the countdown timer will look on a live phone mockup before you click on Save.
📌 Important Note
If you are using the MERGEN theme, the countdown Timer Position can only begin to appear below the product name.
💡 Tip
You can create multiple Countdown Timers for different promotions, each with its own settings. Make sure to review their display conditions and positions to ensure they appear on the intended product pages. |
4- Review and Save Your Changes
After completing the configuration, click on Save & Update to make sure that the edits and changes you made are reflected in the app.
💡 Tip
If your app is not live yet and you want to preview the feature as if your app is live, please follow the guide here. |
That's it! Now you know how to add and customize a Countdown Timer in your app, which you can use to highlight limited-time offers, communicate campaign deadlines, and create a more engaging shopping experience directly within your mobile app. Want to explore the best use cases? Check the next section!
What Are The Best Use Cases for a Countdown Timer?
1. How to use a Countdown Timer for multi-collection campaigns?
Boost engagement by pairing the Countdown Timer with multiple collections for a seamless, shoppable experience. Here’s how to set it up:
Add a Slider Element
Place a slider just below the timer to showcase all collections tied to your campaign. Users can easily see and explore the featured collections right next to the timer.
Enhance with Visuals and Text
Use a promotional image to highlight your campaign (e.g., featuring a discount code). Add a subtitle to guide users to the collections below and link the slider to display the timer’s related collections.
💡Tip
|
2. How to Use a Countdown Timer For Store-wide Campaigns?
Run a flash sale across your entire store with a Countdown Timer that maximizes urgency. Here’s how:
Skip the Action Type
Set up the timer without linking to a specific product, collection, or URL. This makes it apply to all products in your store.
Highlight the Offer
Use the timer’s promotional image or subtitle to display a discount code if applicable, making it easy for customers to shop the sale.
💡Tip
Swap the timer’s promotional image for an App-Exclusive Discount (AED) element. Place a stunning AED image above the timer, letting users tap it to activate the discount instantly or set it to be applied automatically at checkout. Need help with the App-Exclusive Discount? Check out our detailed guide here. |
3. What Can I Use The URL Action Type For?
The Countdown Timer’s URL action type lets you link to time-sensitive offers outside your app. Got a special deal for customers who fill out a website form by a deadline? Link the timer to the form’s URL to create urgency and boost participation.
💡Tip
Use a clear subtitle (e.g., “Hurry! Form closes soon”) to explain the URL’s purpose and encourage clicks. Test the link in your timer configuration to ensure it works smoothly. |
Need Help?
If you encounter any issues while configuring your Countdown Timer, our support team is here to assist you.
Contact our support team via live chat in your Shopney dashboard.
Visit our Help Center for more guides on customizing your mobile app.