The Design tab gives you complete control over how your countdown timer looks on your storefront. From colors and fonts to timer animations and background patterns, almost every visual detail can be customized to match your brand.

You can either:

• Quickly launch using pre-made templates
• Or deeply customize every visual detail manually

This guide breaks down every design option so you can build countdowns that feel native to your store ✨

⚠️ Before You Begin

To configure Design settings:

→ Open an existing countdown timer setup

→ Or create a new countdown timer first

Then navigate to the Design tab inside the countdown editor.

ℹ️ The available design options change depending on which placement type you selected. For example, checkout page countdowns use Shopify's design system and offer far fewer customization options.

🎨 Template & Visibility

This section controls the overall visual starting point and device visibility for your countdown.

Pre-made Templates

The Template dropdown lets you instantly apply a complete visual style. There are 24 built-in templates to choose from, including:

• Dawn — Clean and minimal
• Electric — Bold and energetic
• Forest — Natural earth tones
• Neon — Bright and eye-catching
• Minimal — Stripped-back simplicity
• Mint — Soft and fresh
• Bubble Gum — Playful and colorful
• And many more

Selecting a template automatically fills in:

• Background colors or gradients
• Border styles
• Typography colors and sizes
• Button styling

💡 If you choose a template and then manually adjust individual settings, your changes are preserved. Selecting a new template later will overwrite your custom values.

ℹ️ For Cart Page, Cart Drawer, and Top/Bottom Bar placements, templates preserve your existing title size, timer size, and separator size rather than overwriting them.

Visibility

Controls which devices your countdown appears on:

• Desktop and Mobile — Visible everywhere (default)
• Desktop Only — Hidden on mobile devices
• Mobile Only — Hidden on desktop

Position & Sticky Behavior

These options only appear for Top/Bottom Bar countdowns.

• Position — Choose Top or Bottom of the page
• Sticky — Appears only when Position is set to Top. When enabled, the bar stays fixed at the top of the screen while customers scroll.

⏱️ Timer Style

This section controls how the countdown digits themselves are displayed.

ℹ️ This section is not available for Cart Page, Cart Drawer, Cart Page Standalone, or Checkout Page countdowns.

Available Styles

• Flip clock — Classic 3D flip animation for each digit
• Dual tiles — Each digit gets its own mini flip tile
• Plain numbers — Clean digits with no background box
• Square tiles — Numbers inside rounded square boxes
• Circle tiles — Numbers inside circular boxes
• None — hide timer — Removes the timer digits entirely

Timer Background Color

This color picker appears only when you select:

• Flip clock
• Dual tiles
• Square tiles
• Circle tiles

It does not appear for Plain numbers or None.

For flip clock styles, the bottom half of each flip tile is automatically rendered in a slightly lighter shade of your selected color. This creates the realistic 3D flip effect on the storefront.

🖼️ Background

This section controls the background appearance of your countdown container.

ℹ️ This section is not available for Checkout Page countdowns.

Background Types

• Single color — One solid background color
• Gradient — Two colors blended at an angle you control
• Tri color gradient — Three colors blended at an angle you control
• Patterns — Decorative background overlays

Single Color

Choose a color using the Color Picker or enter a Hex Code directly.

Gradient

When selected, three extra fields appear:

• Gradient Angle Degree — Controls the direction (0° to 360°)
• Initial Color — The starting color
• Final Color — The ending color

Tri Color Gradient

When selected, four extra fields appear:

• Gradient Angle Degree
• Initial Color
• Intermediate Color — The middle color
• Final Color

Patterns

When selected, a Pattern dropdown appears with 37 built-in options, including:

• Tiny squares, random grain, puzzle, flowers
• Seasonal themes: birthday, balloon, carnival, easter, fathers day, mothers day, thanksgiving, veterans day, womens day
• Sale-focused: sale, discount, upholstery, fresh, wavy
• And more

Some patterns include subtle dark overlays to keep text readable.

📐 Border

This section controls the outline of your countdown container.

ℹ️ This section is not available for Checkout Page countdowns.

Border Style

Choose from:

• None, Dotted, Dashed, Solid, Double, Groove, Ridge, Inset, Outset

Conditional Border Fields

The following fields appear only when Border Style is not "None":

• Border Radius (px) — How rounded the corners appear
• Border Size (px) — Thickness of the border line
• Border Color — Color of the border

⚠️ If you select a border style while the size is still set to 0, the app automatically sets it to 2px so the border becomes visible.

📏 Spacing

This section controls internal and external spacing around your countdown.

ℹ️ This section is not available for Checkout Page countdowns.

Available Fields

• Inside Top (px) — Space between content and the top edge
• Inside Bottom (px) — Space between content and the bottom edge
• Outside Top (px) — Space between the countdown and elements above it
• Outside Bottom (px) — Space between the countdown and elements below it

💡 Think of "inside" as padding and "outside" as margin. Increasing outside spacing helps separate the countdown from nearby page elements.

🔤 Typography

This section controls how all text elements appear. The exact fields available depend on your countdown placement.

ℹ️ This section is not available for Checkout Page countdowns.

Font Family

Choose from 60+ font options, including:

• Use your theme font — Matches your Shopify theme automatically
• System fonts: Helvetica, Arial, Tahoma, Times New Roman, Georgia, Courier New, Segoe UI, Impact, and more
• Google Fonts: Roboto, Montserrat, Open Sans, Poppins, Inter, Playfair Display, Oswald, Raleway, Nunito, Lobster, Pacifico, Bebas Neue, Anton, Dancing Script, and many more

ℹ️ If you select a Google Font, the app automatically loads it from Google Fonts on your storefront. System fonts and "Use your theme font" do not trigger external requests.

Typography Elements by Placement

Each element has its own Size (px) and Color fields:

Product Page, Landing Page, and Custom Position

• Title — Main countdown headline
• Subheading — Secondary message below the title
• Timer — The countdown digits themselves
• Time Labels — The "Days", "Hours", "Minutes", "Seconds" text
• Extended Message — Shown when the timer is extended (appears only if your end action is set to "Extend")

Cart Page and Cart Drawer

• Title — Usually contains the {timer} inline variable
• Timer — The live countdown digits
• Extended Message — Appears only if end action is "Extend"

ℹ️ Cart-related placements do not show Subheading or Time Labels typography options.

📊 Progress Bar

This section customizes the visual progress indicator shown above or below the timer.

ℹ️ This section is only available for Product Page, Landing Page, and Custom Position countdowns.

When It Appears

The Progress Bar design card shows up only if you enabled the progress bar in the Content tab first.

If the progress bar is not enabled in Content, this entire card is hidden.

Progress Bar Settings

• Background Color — The color of the unfilled portion of the bar (default: light grey)
• Bar Color — The color of the filled portion (default: black)

Storefront Behavior

The progress bar is an 8px tall rounded bar that fills proportionally based on remaining time. It updates every second with a smooth 1-second transition animation.

⏸️ Separator

This section controls the characters that appear between time units (between days, hours, minutes, and seconds).

Non-Checkout Placements

• Separator Character — Choose from:
• : Colon
• - Hyphen
• . Period
• | Vertical bar
• / Forward slash
• Space (blank)
• Separator Size (px)
• Separator Color — Hex color picker

Checkout Page

Because checkout countdowns use Shopify's Checkout UI Extension framework, separator styling is limited to Shopify's predefined tokens:

• Separator Size — extraSmall, small, base, medium, large, extraLarge
• Separator Color — accent (blue), subdued (grey), info (black), success (green), warning (yellow), critical (red)

🔘 Button Design

This section customizes the call-to-action button.

ℹ️ This section is only available for Top/Bottom Bar, Landing Page, and Custom Position countdowns.

Button Animation Style

Adds a continuous looping animation to the button:

• None — Static button
• Shake — Gentle side-to-side shake
• Pulse — Rhythmic scaling effect
• Zoom — Expands and contracts
• Slide — Subtle sliding motion
• Fade — Opacity pulse
• Spin — Rotating effect
• Pop — Quick scale bounce
• Blink — Brief flashing effect

Button Hover Effects

Adds an interactive effect when customers hover over the button:

• None
• Glow — Gradient glow around the button
• Blob — Organic blob morph effect
• Hover pulse — Pulses on mouse-over
• Button N° 045 — A numbered preset style
• Flush button
• Swipe right button
• Smoosh, Overleap, Collision
• Button bubble — Bubble pop effect
• Squishy
• Mask 1, Mask 2, Mask 3
• Gooey Button
• 3D button — Three-dimensional depth effect

Additional Button Settings

• Button Color — Background color of the button
• Button Text Size (px)
• Button Text Color
• Border Radius (px) — How rounded the button corners are

📝 Custom Message Design

This section appears only when your countdown's end action is set to Show custom message or Extend timer.

It controls the typography of the message customers see after the timer ends.

Available Fields

• Custom Title Size (px) \+ Color
• Custom Subheading Size (px) \+ Color

ℹ️ If your end action includes multiple extension intervals and any of them use a custom message, this card becomes visible.

❌ Close Icon

This section customizes the dismiss button for countdown bars.

ℹ️ This section is only available for Top/Bottom Bar countdowns.

Prerequisite

The close icon itself must first be enabled in the Content tab using the Close Icon checkbox. If it is not enabled there, this design card has no effect.

Close Icon Color

Choose a hex color for the X icon. The icon is positioned at the right edge of the bar and vertically centered.

Storefront behavior: When a customer clicks the close icon, the bar is hidden using browser storage and will not reappear during that session.

💻 Custom CSS

For merchants who need styling beyond the built-in options, you can write your own CSS.

ℹ️ This section is not available for Checkout Page countdowns.

Available Target Classes

The editor includes a default template with these target classes:

.futureblink-countdown-timer { }

.futureblink-countdown-timer .title { }

.futureblink-countdown-timer .subheading { }

.futureblink-countdown-timer .cta-button { }

.futureblink-countdown-timer .close-btn { }

How to Apply

1. Enter your CSS in the text area
2. Click Apply
3. The styles are injected into your storefront automatically

⚠️ The app automatically appends !important to every CSS property when applied, which helps override theme conflicts. If a style does not seem to work immediately, try saving and refreshing your storefront.

📍 Design by Placement

Different countdown placements have different design capabilities based on technical constraints.

Product Page, Landing Page, Custom Position

These placements offer the fullest design experience:

✅ All templates

✅ All timer styles (flip, tiles, plain, etc.)

✅ Full background options (single, gradient, tri-gradient, patterns)

✅ Border, spacing, progress bar

✅ Complete typography controls

❌ Button design — not available for product pages

✅ Custom CSS

Top / Bottom Bar

Nearly full design options with a few placement-specific additions:

✅ Position (top/bottom) and sticky toggle

✅ Close icon design

✅ Button design

✅ All timer styles and backgrounds

✅ Custom CSS

❌ Progress bar — not available for bars

Cart Page, Cart Drawer, Cart Page Standalone

Simplified layout focused on inline messaging:

✅ Background, border, spacing, separator

✅ Title and timer typography

✅ Custom CSS

❌ Timer style — always plain inline text

❌ Progress bar

❌ Button design

❌ Subheading and time labels typography

Checkout Page

Heavily restricted due to Shopify Checkout UI Extensions:

✅ Separator size and color (Polaris tokens only)

✅ Title size and color (Polaris tokens only)

✅ Timer size and color (Polaris tokens only)

❌ Templates

❌ Background, border, spacing

❌ Timer styles — plain text only

❌ Progress bar

❌ Button styling

❌ Close icon

❌ Custom CSS

❌ Font family selection

⚠️ Important Notes

Templates Overwrite Custom Values

When you select a pre-made template, it replaces most design values. If you have already customized colors and sizes manually, save your work before experimenting with templates.

Checkout Limitations Are Platform-Level

The restricted design options on checkout pages are imposed by Shopify's Checkout UI Extension framework. These are not app limitations — they ensure your countdown remains compatible with Shopify's secure checkout environment.

Cart Timers Are Always Plain

Cart-related countdowns render the timer as plain inline text because the countdown is usually embedded inside a sentence using the {timer} variable. Flip clocks and tile styles would break the sentence flow visually.

Mobile Timer Scaling

On screens smaller than 633px wide, timer digit sizes are automatically reduced (typically by about 33%) to prevent overflow and maintain readability on mobile devices.

💡 Use Cases & Examples

Minimal Product Page Timer

→ Placement: Product Page

→ Timer Style: Plain numbers

→ Background: Single color (white or transparent)

→ Border: None

→ Typography: Small title, medium timer, subtle separator

Bold Top Bar Announcement

→ Placement: Top/Bottom Bar

→ Position: Top \+ Sticky

→ Template: Neon or Electric

→ Timer Style: Flip clock or Square tiles

→ Button Animation: Pulse

→ Close Icon: Enabled with matching color

Seasonal Landing Page Sale

→ Placement: Landing Page

→ Background: Pattern (e.g., birthday, carnival, or seasonal theme)

→ Timer Style: Circle tiles

→ Progress Bar: Enabled with brand colors

→ Button: Rounded corners with hover glow effect

🎉 Final Result

Once configured successfully, the Design & Styling settings help you create countdowns that feel like a natural part of your storefront.

✅ Countdowns match your brand colors and typography

✅ Timer styles create the right level of visual urgency

✅ Backgrounds and patterns set the mood for each campaign

✅ Buttons stand out with animations and hover effects

✅ Spacing and borders give your countdown professional polish

✅ Custom CSS unlocks unlimited design flexibility

✅ Each placement type respects its own design constraints

Using these design options properly ensures your countdown timers look intentional, professional, and aligned with the rest of your store ✨

Updated on: 03/06/2026