Templates

Available Templates

HashBar includes 18 professionally designed templates covering common announcement bar use cases. Each template is fully customizable and comes with pre-configured styling, content, and layout.

Free Templates

Template Name	Best For	Key Features
Classic	General announcements and promotions	Centered text, single CTA button, clean typography
Sale Alert	Time-limited sales and discounts	Bold red accent, prominent discount badge, countdown-ready
Free Shipping	Shipping promotions	Truck icon integration, emphasis on free offer
Info Banner	General information and updates	Information icon, neutral colors, subtle design
Countdown Sale	Limited-time offers	Timer-ready layout, urgency-driven design
Coupon Display	Coupon code promotions	Code highlight section, copy-to-clipboard ready
Minimal Elegant	Premium brands, subtle announcements	Sophisticated typography, minimalist layout
Holiday Special	Seasonal promotions	Festive colors, decorative elements, celebratory tone
Limited Stock	Inventory alerts	Stock indicator layout, scarcity messaging

Professional Templates

Pro Feature: Professional templates unlock advanced design capabilities including gradients, background images, custom CSS, and exclusive layouts.

Template Name	Best For	Advanced Features
Trust Builder	Customer confidence and credibility	Review/rating integration, trust badge styling
New Launch	Product launches and releases	Multi-color gradient background, dynamic styling
Premium Gold	Luxury and high-end brands	Gold accent colors, elegant gradient, premium typography
Summer Vibes	Seasonal summer promotions	Gradient background, bright colors, playful design
Social Media	Social media integration and follows	Icon grid layout, multi-button support, background image
Bundle Deal	Bundle offers and package deals	Multi-item display, gradient styling, comparison layout
VIP Exclusive	VIP member offers and exclusivity	Custom CSS effects, premium styling, badge integration
Early Bird	Early access and pre-launch offers	Gradient background, timer-ready, exclusivity messaging

Selecting a Template

Navigate to the Templates section in your HashBar dashboard
Browse the available free templates or upgrade to Pro to access all 18 templates
Click on a template to preview its default styling and layout
Click Select Template to apply the template to your announcement bar
Your bar will immediately update with the template's styling

Previewing Templates

Each template provides a live preview showing how it will appear on your website:

Desktop Preview: See how the bar renders on desktop screens
Mobile Preview: View the responsive layout on mobile devices
Device Switcher: Toggle between different screen sizes to test responsiveness
Edit in Preview: Modify content and see changes in real-time

Customizing Templates

After selecting a template, you can fully customize every aspect of its design and content:

Content Customization

Edit the message text (up to 500 characters) in the Content & Messaging section
Modify the CTA button text and URL
Add multiple rotating messages with Pro features

Design Customization

Change colors, fonts, and spacing using the Design & Styling tools
Adjust background colors, gradients (Pro), or background images (Pro)
Customize button styling including colors, hover effects, and border radius
Modify close button appearance and behavior
Add custom CSS with the Pro code editor

Layout Customization

Control bar position (top or bottom) in the Position & Display section
Adjust bar height and padding
Enable sticky mode to keep the bar visible while scrolling
Customize close button behavior and text

Template Customization Persistence

An important feature of HashBar templates: all your customizations persist when you switch templates. This means you can:

Experiment with different template layouts without losing your content or color changes
Switch between templates while maintaining your custom message text
Try out different color schemes by selecting templates and quickly comparing them
Preserve custom CSS and advanced styling when changing templates

This flexibility allows you to explore different designs while keeping all your customizations intact. Your content, colors, and styling will transfer to the new template automatically.

Best Practices for Template Selection

Match Your Brand: Choose templates that align with your brand colors and design aesthetic
Consider Your Message: Select templates designed for your specific announcement type (sale, promotion, info, etc.)
Test Responsiveness: Preview how templates look on mobile devices before finalizing
Plan for Content: Ensure your message content fits naturally within the template layout
Iterate Quickly: Use the persistence feature to try multiple templates without losing changes