Understanding the Theme Tab🖌️

The Theme tab is your central hub for designing how Fomo looks on your website. Whether you want a simple aesthetic or a festive seasonal vibe, this no-code editor helps you align your social proof with your brand identity.

Note: The theme and styles you select here apply globally to all your notifications.

🎨 Choosing a Theme

At the top of the tab, you can browse Fomo's pre-built notification templates.

• Standard Themes: Select reliable layouts like our "Classic" theme.

  
  

• Seasonal & Holiday Themes: Scroll to the right to discover in-app themes built for specific seasons and holidays.

  
  

🖌️ The Basic Editor Controls

Instantly brand your notifications without touching a single line of code.

• Grab Colors: Click "Use the color scheme from your website" to automatically extract and apply your brand's exact palette to your notifications.

  
  

• Text & Link Color: Ensure high readability and make your clickable links stand out.

  
  

• Outline Color: Add a defined border to make the notification pop against your website's background.

  
  

• Image Padding: Increase or decrease the space around your product or profile images for a cleaner layout.

  
  

• Shadow Enabled: Toggle a subtle drop-shadow to give your notification depth and separation from your webpage.

  
  

✨ Hover Animations & Positioning Guidelines

Fomo includes built-in interactive features, like a Hover Animation that makes the notification "Float" when a visitor places their cursor over it.

Important Limitations to Keep in Mind:

1. Positioning: Fomo's internal logic strictly controls where the notification appears on your screen. Avoid trying to force new placements outside of the basic dashboard settings, as this will break the notification's functionality.

   
   

2. Hover Animations: Because of Fomo's positioning logic, custom CSS hover states are limited. We highly recommend sticking to the built-in animations (like "Float") provided in the Theme editor to ensure smooth performance.

   
   

💻 Advanced Customization (CSS Tab)

If you need more freedom than the basic editor provides, switch over to the CSS Tab. Here, you can write custom CSS to target specific parts of your selected theme.

The CSS class names change depending on the base theme you select. For example, if you are using the Classic theme, these are the primary selectors available to you:

CSS

/* Main Notification Container */
.fomo-notification-v2-classic {}


/* Main Text Message */
.fomo-notification-v2-classic .fomo-notification-content-wrapper p {}


/* Clickable Links */
.fomo-notification-v2-classic .fomo-notification-content-wrapper a {}


/* Timestamp */
.fomo-notification-v2-classic .fomo-notification-content-wrapper small {}


/* Image Container */
.fomo-notification-v2-classic .fomo-notification-image-wrapper {}


/* The Image Itself */
.fomo-notification-v2-classic .fomo-notification-image-wrapper img {}

📚 Related Guides to Level Up Your Design

Ready to take your design further or need to troubleshoot? Check out our related resources:

• Fully Customize Your Notifications with CSS
• Edit Your Fomo Notification with Custom CSS Overrides
• How to Add a Custom Theme to Your Notifications
• Pick Your Holiday Monthly Custom Theme Selector
• Why Isn't My Theme Editor Selection Working?

🚀 We’re Here to Help You Design

Fomo’s CSS flexibility is one of the features that makes us unique in the social proof space. We don't want you to look like everyone else we want you to look like you.

Need a design audit? Reach out to hello@fomo.com out to  with your site URL and your vision.

Work with a Designer: Book a Strategy Call here to have one of our experts help you build a custom CSS theme that aligns perfectly with your store’s conversion goals. 🥳