The Design tab gives you complete control over how your announcement bar looks and feels across your store. From background colors and typography to button animations, icon styling, and custom CSS — nearly every visual detail can be tuned to match your brand.

You can either launch quickly with a ready-made template or customize every pixel manually. Either way, the bar will feel like a natural part of your storefront 🎨

Most color-related settings include:

• A Color Picker for visual selection
• A Hex Code Input for exact brand colors

⚠️ Before You Begin

To configure Design settings:

→ Open an existing announcement bar

→ Or create a new one first

Then click the Design tab inside the editor.

ℹ️ Some options appear only for specific bar types or configurations. For example, slide animations show only for Multiple bars, and coupon styling appears only when a Coupon CTA is used. These conditional fields are called out below so you know exactly when to expect them.

🎨 Template

• What it does: Instantly applies a pre-made visual style to your announcement bar.
• How to use: Choose from 25+ templates to jumpstart your design without manually touching every field.

Each template pre-fills:

• Background type, color, and gradient settings
• Title and subheading colors and sizes
• Button colors, text color, and corner radius
• Border, icon, and coupon styling

Available templates include: Custom, Dawn, Black Friday, Beauty Dark, Beauty, Festiv, Forest, Dusk, Electric, Freeze, Aqua, Alert, Noon, Purple, Blue, Leaf, Party, Orange, Ocean, Yellow, Beauty Light, Greydient, Black, Navy

⚠️ Important: Selecting a template will overwrite most design fields. Your Visibility setting and Position (configured in the Placement tab) are preserved.

💡 Templates are great for seasonal campaigns. Want a Black Friday look? Select the Black Friday template and tweak from there.

👀 Visibility

• What it does: Controls which devices your announcement bar appears on.
• Options:
• Desktop and Mobile — Visible on all devices
• Only Desktop
• Only Mobile

This is useful when you want different messaging or layouts for desktop shoppers versus mobile shoppers.

🖼️ Background Style

• What it does: Changes the background appearance of the announcement bar.
• Options Available:
• Single Color — One solid background color
• Gradient — Two colors blended at a custom angle
• Patterns — Decorative background patterns

🎨 Single Color

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

🌈 Gradient

• Gradient Angle Degree: Controls the direction of the blend (0–360°)
• Initial Color: The starting color
• Final Color: The ending color

💡 A subtle gradient can add depth without feeling distracting. Try low-contrast angles for a modern look.

✨ Patterns

Selecting Patterns reveals a dropdown with 35+ built-in background options:

• Decorative: Wavy, Sale, Discount, Balloon, Girly, Party, Fresh
• Holiday & Seasonal: Birthday, Easter Sunday, Thanksgiving, Veterans Day, Labor Day, Children's Day, Father's Day, Mother's Day, Women's Day, Carnival Monday
• Textured: Tiny Square, Random Grain, Puzzle, Flowers, Radial, Upholstery, Cheese

ℹ️ Patterns are applied as CSS background styles. Some use pure CSS; others use image assets.

📐 Borders & Corners

This section controls the shape and outline of the bar.

• Bar Corner Radius (px): How rounded the bar corners appear
• Bar Padding (px): Inner spacing between the bar edges and its content
• Border Size (px): Thickness of the outer border
• Border Color: The color of the border

💡 A corner radius of 0 gives a sharp rectangular bar. Higher values create softer, more modern shapes.

🔤 Typography

This section controls how all text appears in the announcement bar.

📝 Title Styling

• Title Size (px): The size of the main message
• Title Color: The color of the main message

📄 Subheading Styling

• Subheading Size (px): The size of the supporting text
• Subheading Color: The color of the supporting text

ℹ️ The subheading field is hidden when using the Running bar type, since marquee bars typically use one line of text.

🔠 Font

Choose from 63 available fonts, including:

• System fonts: Helvetica, Arial, Tahoma, Times New Roman, Georgia, Courier New, Segoe UI, and more
• Google Fonts: Roboto, Montserrat, Open Sans, Poppins, Playfair Display, Lato, Inter, Oswald, Raleway, Nunito, Lobster, Pacifico, Bebas Neue, Anton, Dancing Script, and many more

The first option is Use your theme font, which automatically matches your store's existing typography.

💡 For readability, stick to 1–2 fonts per bar. A bold display font for the title and a clean sans-serif for the subheading often works well.

🔘 Button Design

This section customizes the call-to-action button.

ℹ️ These settings are always available in the Design tab. They affect the storefront only when your CTA type is set to Button, Full Bar, or Trigger.

🎨 Button Color

• Changes the background color of the CTA button.

🔤 Button Text Size & Color

• Size (px): Controls the text size inside the button
• Color: Changes the button text color

⭕ Corner Radius & Button Style

These two fields are linked:

• Corner Radius (px): Manually type a value to control roundness
• Button Style: Quickly switch between presets:
• Square → sets radius to 0 px
• Rounded → sets radius to 10 px
• Fully Rounded → sets radius to 30 px

When you select a style preset, the corner radius updates automatically. When you type a custom radius, the style preset updates to match:

• 0–9 px → Square
• 10–29 px → Rounded
• 30+ px → Fully Rounded

💪 Font Weight

• Controls how bold or light the button text appears
• Options: Normal, Bold, 100–900

✍️ Font Style

• Toggle between: Normal, Italic, Underline

✨ Button Animation

Adds a continuous animation to the button to help it stand out.

Available animations: None, Emitting, Bounce, Flash, Rubber Band, Swing, Tada, Wobble, Jello, Flip

💡 Subtle animations like Bounce or Emitting draw attention without feeling aggressive. Use Flip or Tada for high-urgency campaigns.

🏷️ Coupon Design

This section customizes the appearance of the coupon code box.

ℹ️ This section appears only when:

• Any content slide uses Coupon as the CTA type, or
• The bar type is set to Email

Available Settings

• Coupon Border Style: Dashed, Solid, Dotted, Double, Groove, Ridge, Inset, Outset, or None
• Coupon Border Color: The outline color of the coupon box
• Coupon Text Color: The color of the coupon code text
• Coupon Background: The background color of the coupon box (supports transparent backgrounds)

💡 A dashed border with a contrasting background is the classic coupon look. Try a semi-transparent background if you want the bar's pattern or gradient to show through.

🎆 Bar Animations

Multiple Bar Transition

Available only when the bar type is set to Multiple.

Controls how slides transition between one another:

• Slide — Slides horizontally between announcements
• Fade In — Fades smoothly from one slide to the next
• Cube — A 3D cube rotation effect
• Flip — A card-flip transition effect

ℹ️ This setting is found in the Design tab, not the Content tab.

🎨 Icon Settings

🚪 Close Icon Color

• Changes the color of the close (dismiss) button icon.
• Only visible when the Close Icon option is enabled in the Content tab.

➡️ Arrow Icon Color

• Changes the color of the navigation arrows.
• Only visible when the bar type is set to Multiple, since arrows are used to navigate between slides.

👥 Banner Icons (Social Icons)

This section styles social media icons that appear inside the bar.

• Social Icon Size (px): Adjusts the icon size
• Social Icon Color: Changes the icon color
• Social Icon Position: Places icons on the Left or Right side of the bar
• Use Original Social Icon Color: When enabled, each platform keeps its brand color (Facebook blue, Instagram gradient, etc.) instead of using your custom color

ℹ️ Social icons are configured in the Content tab. The Design tab only controls how they look.

💻 Custom CSS (For Advanced Users)

💡 Advanced Feature: If you need styling that isn't available in the standard settings, you can write your own CSS directly in the editor.

When enabled, a CSS skeleton is provided with pre-defined target classes:

• Entire bar container: .futureblink-announcement-bar
• Title text: .futureblink-announcement-bar .title
• Subheading text: .futureblink-announcement-bar .subheading
• Mobile title: .futureblink-announcement-bar.mobile .title
• Mobile subheading: .futureblink-announcement-bar.mobile .subheading
• CTA button: .futureblink-announcement-bar .cta-button
• Mobile CTA button: .futureblink-announcement-bar.mobile .cta-button
• Close button: .futureblink-announcement-bar .close-btn
• Navigation arrows: .futureblink-announcement-bar .arrow
• Previous/Next buttons: .futureblink-announcement-bar .button-prev and .button-next

How custom CSS works on the storefront:

• All selectors are automatically scoped to your specific announcement bar
• Every declaration receives !important priority to override theme styles
• Mobile selectors (.mobile) are automatically wrapped in a mobile media query
• The CSS is injected as a <style> tag when the bar renders

⚠️ Please note: Custom CSS is powerful but can conflict with theme styles. Test thoroughly on both desktop and mobile after applying changes.

🛒 Checkout Design

Available only for announcement bars placed on the Checkout Page (Shopify Plus required).

When the Placement tab is set to Checkout Page, the full Design tab is replaced with a simplified panel:

• Checkout Title Size — Extra Small, Small, Base, Medium, Large, Extra Large
• Checkout Title Color — Blue, Dull Grey, Black, Green, Yellow, Red
• Checkout Subheading Size — Same size options
• Checkout Subheading Color — Same color options

ℹ️ Checkout design uses Shopify's native tone tokens for consistent styling within the checkout environment. Gradients, patterns, buttons, and custom CSS are not available in checkout bars.

🚀 Final Result

Once configured successfully, the Design & Styling settings help you create a visually consistent, professional announcement bar that feels like a natural part of your store.

With proper styling in place:

✅ The bar aligns with your brand colors and typography

✅ Important messages become more noticeable and readable

✅ Buttons and CTAs stand out without feeling intrusive

✅ Background patterns and gradients add visual personality

✅ Slide transitions feel smooth and polished

✅ Mobile and desktop experiences are independently optimized

✅ Advanced users can extend styling with custom CSS

Using these design and styling options effectively ensures every announcement bar feels intentional, on-brand, and easy for customers to engage with ✨

Updated on: 03/06/2026