The Countdown creates a sense of urgency with a timer that counts down to the end of a promotion. You can link to your promotional page (such as a sale collection) and collect customer emails with the signup form.
Click the arrow next to the Popup section to show the nested content blocks.
Click (+) Add block and select Countdown popup or Countdown flyout.
Click the new Popup block to open the settings.
Behaviour
The Behaviour options control when, where, and how often your popup appears. Click on the Popup block to open the settings.
STEPS
In your theme editor (Customize):
Set the Delay Appearance option to choose when to show the popup: immediately, after a set amount of time, or when customers scroll down a percentage of the page.
Select Show on exit-intent to show the popup when the customer's cursor accelerates or leaves your site before your popup is set to appear.
Set the Frequency to control how often a popup appears to the same customer once they have dismissed the first popup.
Popups that appear too frequently can overwhelm your customer. Limit the timing and frequency of your popup for the best results.
Select Disable for account holders so customers who have signed up for a store account won't see the popup.
Select Show on specific page and click on the Target page field to select a page from your store.
Use this option to create a popup that's relevant to specific products, collections, or other pages.
Click Save.
Countdown timer
Select the date and time when your promotion ends. You can choose to hide the timer when it has completed.
STEPS
In your theme editor (Customize):
Select the Year, Month, Day, Hour, and Minute for the completion date of your countdown.
Check the Hide the timer on complete.
You may want to enable this option when using the countdown to display the amount of time remaining for a current event or promotion (such as a sale).
Enter text for the Timer complete message that appears when the countdown reaches '0'.
The message will appear only if the Hide timer on complete option is unchecked.
Content
Customize the headings, buttons, and text content of your Popup.
STEPS
In your theme editor (Customize):
Enter Accent text to display a small label above the main heading.
We recommend one or two words that label what the popup is about.
Enter Heading text for the title of your popup.
We recommend a short title of a few words.
Set the Heading Size to Small, Medium, or Large.
Enter Text to display below the heading.
Add a few sentences to tell customers about a promotion or other information.
Select or paste a URL for the Button link.
Enter text for the Button label.
The most effective button labels ask customers to do something (e.g. Get started, Join us, Shop now). To learn more, read "What is a Call to Action?"
(Optional.) Change the default "No thanks" Dismiss text of the button that closes the popup when clicked.
(Optional.) Enter the Footer text to display a short note at the bottom of the popup.
The Footer text works well for disclaimers or additional information.
(Optional.) Enter Tags to label customers who sign up to help organize your customer list.
Tags are added to Customer profiles in the Shopify admin. Customers will not see these tags. See Shopify's guide about managing customer profiles ↗ to learn more about using tags.
Enable Show social icons to display icons that link to your social media accounts.
Click Save.
Design
Design your popup with custom colors, images, and content layout.
STEPS
In your theme editor (Customize):
If using the Flyout popup, select the Flyout position to display it on the Bottom left or Bottom right on desktop screens.
Set the Popup size to Small, Medium, or Large.
Select the Content alignment to position the headings and buttons to the Left, Right, or Center of the popup.
Add an Image to show within your Popup.
Set the Image position to the Top, Center, or Left or use it for the entire popup Background.
Use Image focal points to specify the main focus of your images. The focal point of your image will remain centered and within frame when your site adapts to different screen sizes.
See our image guide to learn more about specifying a focal point for an image used within a section or for an uploaded image file when used anywhere on your site.
Select custom colors for the Background, Text, and Buttons.
(Optional.) Select an Overlay color and enable it by increasing the Overlay opacity with the slider.
These settings help make your text clear and readable by increasing the contrast between the text and background image
Click Save.
Sticky tab
The Sticky tab displays a small floating banner with text that re-opens the popup when clicked.
Note The popup does not automatically give 10% off. This default text is only a placeholder for your own text. See Shopify's discounts guide ↗ to learn how to set up discounts and offer discount codes.
STEPS
In your theme editor (Customize):
Enter Text that prompts your visitor to open the popup.
We recommend using only a few words, like the default: "Get 10% off".
Set the Size of the text to Small, Regular, or Large.
Set the Tab position to display it along the bottom or sides of the window or screen.
Select the Colors for the tab text and background.
