> ## Knowledge Base Index > Fetch the complete knowledge base index at: https://help.hoppyapps.com/sitemap.xml > Use this file to discover available pages before exploring further. > Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash). # ๐ŸŽจ PopUps โ€” Design & Styling 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. --- **๐Ÿ”˜ Floating Button** โ„น๏ธ This section only appears when the **Floating Action Button** is enabled in the **Content** tab. The Floating Button settings let you customize the appearance of the button that visitors click to open your popup. These options help you match the button with your store's branding while keeping it noticeable and easy to interact with. ### **Available Settings** #### **๐Ÿ”ท Shape** Choose the overall shape of the floating button. ### **Available Options** * Rounded * Square * Pill * Circle --- #### **๐ŸŽจ Button Color** Controls the color of the icon or text displayed on the floating button. You can: * Choose a color using the color picker * Enter a HEX color code manually --- #### **๐Ÿ–Œ๏ธ Font Size** Controls the size of the icon or text displayed inside the floating button. The value is measured in pixels. --- #### **๐ŸŸซ Background Color** Sets the background color of the floating button. You can: * Choose a color using the color picker * Enter a HEX color code manually --- #### **๐ŸŒ‘ Shadow** Adds an optional shadow effect around the floating button. ### **Available Options** * None * Small * Medium * Large --- #### **๐Ÿงฑ Border Color** Controls the color of the floating button border. --- #### **๐Ÿ“ Corner Radius** Controls how rounded the corners of the floating button appear. Higher values create a softer, more rounded appearance. --- # **๐Ÿ”ค 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 ๐ŸŽจ ---