The Design tab gives you full control over how your popup looks and feels on the storefront. From templates and typography to animations, colors, buttons, coupon styling, and even custom CSS — nearly every visual element can be customized to match your brand identity.

This guide explains every available design option so you can confidently create polished, high-converting popups.

⚠️ Before You Begin

To configure Design settings:

→ Open an existing popup

→ Or create a new popup first

Then switch to the Design tab inside the popup editor.

ℹ️ Some design sections only appear for specific popup types or enabled features.

Examples

• Countdown timer styling only appears for Countdown PopUps
• Coupon styling only appears when coupon display is enabled
• Slice styling only appears for Spin Wheel PopUps

🎨 Template

Templates allow you to instantly apply pre-designed visual styles to your popup. This helps merchants launch professionally styled popups quickly without manually configuring every individual design setting.

This is useful when you want a professionally styled popup without manually customizing every setting.

Available Examples

• Dawn
• Black Friday
• Beauty
• Festive
• Forest
• Ocean
• Aqua
• Electric
• Party

You can further customize the selected template afterward.

👀 Visibility

Controls which devices the popup should appear on. This helps create more targeted popup experiences depending on whether customers are browsing from desktop or mobile devices.

Available Options

• Desktop and mobile — visible everywhere
• Only Desktop — hidden on mobile devices
• Only Mobile — hidden on desktop devices

This is useful when creating device-specific campaigns.

🖼️ Popup Background

This section controls the popup window background styling. Background styling plays a major role in how visually appealing and attention-grabbing the popup feels on the storefront.

Single Color Background

Uses one solid background color for the popup.

You can:

• Pick a color visually
• Or paste a HEX color code manually

Gradient Background

Creates a two-color gradient effect.

When enabled, additional settings appear:

• Gradient angle degree
• Initial gradient color
• Final gradient color

ℹ️ Gradient controls only become active after enabling Gradient Background.

🌫️ Overlay Background

Controls the storefront overlay shown behind the popup. The overlay helps shift customer focus toward the popup by visually separating it from the rest of the storefront content.

For example, when a popup opens, the rest of the storefront can appear dimmed with a transparent dark overlay to draw attention toward the popup.

Available Options

• No Background — popup appears without a dimmed overlay
• Dim Background — adds a semi-transparent overlay behind the popup

📐 Popup Layout & Border

These settings control the overall popup structure and shape. Adjusting spacing, borders, and sizing correctly helps the popup feel cleaner, more balanced, and visually polished.

📏 Popup Size

Controls the overall dimensions of the popup.

Available Options

• Small
• Medium
• Large
• Full Page

Larger popup sizes provide more space for images, products, and additional content.

🎨 Popup Window Background Color

Sets the background color of the popup container itself.

You can:

• Use the color picker
• Or manually enter a HEX color code

🟦 Corner Radius

Controls how rounded the popup corners appear.

Examples

• Lower values → sharper corners
• Higher values → softer rounded corners

🧱 Border Size

Controls the thickness of the popup border.

The value is measured in pixels.

🎨 Border Color

Sets the color of the popup border.

✨ Popup Animation

Controls how the popup enters the screen. Entrance animations help the popup feel smoother and more interactive while also making it more noticeable to visitors.

Available Options

• Fade
• Slide
• Bounce

Animations help make the popup feel smoother and more interactive.

🔤 Typography

Typography settings control how all text elements appear inside the popup. These settings help maintain visual consistency across headings, descriptions, buttons, and validation messages so the popup feels professionally designed and easier to read.

The app supports built-in fonts along with theme fonts.

🏷️ Title Typography

Controls the popup title styling.

Available Settings

• Title Font
• Title Size
• Title Color

📝 Description Typography

Controls the popup description styling.

Available Settings

• Description Font
• Description Size
• Description Color

⚠️ Error Message Typography

Controls validation error messages shown for both:

• Email fields
• Phone number fields

Available Settings

• Error Font
• Error Message Size
• Error Message Color

📝 Input Field Styling

This section controls the appearance of email and phone number input fields. Proper input styling improves readability and helps forms feel more trustworthy and visually aligned with your storefront branding.

Available Settings

• Input Text Color
• Input Background Color
• Input Border Color

These settings help your form fields match your storefront branding.

🔘 Button Styling

Controls the design of the popup call-to-action button. Since the button is usually the main conversion element inside the popup, styling it properly can significantly improve click-through and engagement rates.

🔤 Button Font

Choose the font family used inside the button.

You can use:

• Theme fonts
• Built-in fonts

🎨 Button Color

Controls the button background color.

🔠 Button Text Size & Color

This setting controls:

• Text size (left field)
• Text color picker (middle field)
• HEX color value (right field)

Example

• Large white text on dark button
• Small black text on bright button

◼️ Corner Radius

Controls how rounded the button corners appear.

Higher values create softer buttons.

🎟️ Coupon Styling

ℹ️ This section only appears when coupon display is enabled inside the Content tab.

This section controls the appearance of the coupon code container. A visually styled coupon section makes discounts stand out more clearly and encourages visitors to copy and use the offer during checkout.

🧾 Coupon Border Style

Choose the border style surrounding the coupon area.

Available Examples

• Solid
• Dashed

🎨 Border Color

Controls the coupon border color.

🔤 Text Color

Controls the text color shown inside the coupon section.

🖼️ Background Color

Controls the coupon container background color.

❎ Close Icon Styling

Controls the appearance of the popup close icon. Even though it is a small element, matching the icon styling with the overall popup design helps maintain a cleaner and more polished user experience.

Available Settings

• Close Icon Color
• Icon Size

Available Size Options

• Small
• Medium
• Large

⏱️ Countdown Timer Styling

ℹ️ This section only appears for Countdown PopUps.

Controls the visual appearance of the countdown timer. Proper timer styling helps create urgency while ensuring the countdown remains readable and visually consistent with the rest of the popup design.

Available Settings

• Timer Style
• Timer Font
• Timer Size
• Timer Color
• Timer Background Color
• Label Font
• Label Size
• Label Color

These settings help create urgency while keeping the timer visually aligned with your storefront.

🎡 Spin Wheel — Slice Styling

ℹ️ This section only appears for Spin Wheel PopUps.

This section controls the visual styling of the spin wheel slices and wheel components. Adjusting these settings carefully can make the wheel feel more vibrant, playful, and attention-grabbing for visitors.

🎨 Slice Colors

Controls alternating slice background colors.

Available Settings

• Slice 1 Color
• Slice 2 Color

These colors alternate throughout the wheel.

🔤 Slice Label Styling

Controls the text styling shown on each wheel slice.

Available Settings

• Slice Label Color
• Slice Label Size
• Slice Label Font

💬 Slice Message Styling

Controls the styling of slice reward or winning messages.

Available Settings

• Slice Message Font
• Slice Message Size
• Slice Message Color

🎯 Wheel Component Colors

Controls the remaining wheel design elements.

Available Settings

• Wheel Border Color
• Arrow Color
• Center Circle Color

💻 Custom CSS

💡 Advanced users can apply their own custom CSS styling directly inside the popup editor.

This allows you to customize elements beyond the standard design controls. It is especially useful for merchants who want advanced styling, mobile-specific adjustments, or deeper visual customization.

🧩 Common Selectors

The editor provides ready-made selectors such as:

• .futureblink-popup
• .futureblink-popup .title
• .futureblink-popup .description
• .futureblink-popup .cta-button
• .futureblink-popup .close-btn

✅ Applying CSS

After adding your CSS:

→ Click Apply to test the styles immediately.

ℹ️ If styles do not apply correctly, adding !important to each declaration is recommended.

Example

.futureblink-popup .title {

color: \#000 \!important;

}

🚀 Final Result

Once configured successfully:

✅ Your popup matches your brand identity

✅ Typography, buttons, and inputs feel visually consistent

✅ Coupon sections and timers look polished

✅ Spin wheel popups become more visually engaging

✅ Animations and overlays improve customer focus

✅ Custom CSS gives advanced users deeper control

✅ Customers experience a cleaner and more professional popup design 🎨

Updated on: 03/06/2026