Customization & Themes

Make your taplist reflect your brewery's unique brand and style. This guide covers themes, customization options, and advanced styling features available based on your license tier.

Understanding Customization Options

What You Can Customize

Visual Appearance:

Professional themes with complete styling
Color schemes (primary, secondary, row colors)
Typography and font selections
Background images and logos

Layout Options:

Grid cards vs. column table display
Pagination settings and auto-rotation
Visual indicators and beer information display
Border styles and corner radius

Advanced Features (Basic/Professional Plans):

Display Editor - Drag-and-drop layout builder for fully custom multi-page TV displays
Menu Builder - Design and export printable PDF menus with your branding
Custom CSS editor for complete control
Advanced branding options
Premium theme access
Announcement banner with rotating messages
Untappd integration for check-ins and ratings

Customization by License Tier

Free Tier:

3 basic themes (Chalkboard, Classic Pub, Classic Pints)
Basic color and font customization
Logo upload capability
Standard layout options

Basic & Professional Plans:

All 12 professional themes
Complete color customization
Advanced typography options
Custom CSS editor
Premium branding features

Accessing Customization

Quick Access Routes

From Dashboard:

Log into admin - Access your brewery's admin interface
Click "Taplist Settings" - Quick access to customization

From Navigation:

"Settings" - Complete brewery and display settings (appearance, messages, integrations, advanced)
"Themes" - Professional theme gallery
"Display Editor" - Drag-and-drop custom layout builder (Basic+)
"Menu Builder" - Printable PDF menu designer (Basic+)

Customization Interface

The Settings page is organized into tabs:

Display - Brewery name, public access toggle, layout type, pagination, and empty tap display
Appearance - Colors, fonts, logo, background image, row styling, hop icon style, and custom CSS
Messages - Announcement banner with rotating messages, positioning, and styling
Integrations - Untappd check-in feed with venue/brewery mode, placement, and styling
Advanced - Analytics tracking and the full custom CSS editor

Important: Your taplist defaults to private. You must enable public access for customers to view your taplist.

Professional Themes

Available Themes

Classic Options:

Chalkboard - Traditional brewery chalkboard look (Free tier)
Classic Pub - Warm, traditional pub atmosphere (Free tier)
Classic Pints - Clean, modern beer-focused design (Free tier)
Rustic Brewery - Warm wood and metal industrial feel

Modern Styles:

Industrial Taproom - Clean, modern industrial design
Beach Brewhouse - Light, coastal brewery vibe
Cyber Neon - Futuristic, high-tech appearance
Neon Night - Dark background with neon accents

Specialty Themes:

Vintage Speakeasy - 1920s prohibition-era styling
Mountain Lodge - Rustic, outdoor mountain feel
Sports Bar - Athletic, energetic sports venue
Bavarian Beer Hall - Traditional German beer hall

Theme Features

Each theme includes:

Complete color palette - Primary, secondary, and accent colors
Typography pairing - Carefully selected Google Fonts
Layout styling - Borders, spacing, and visual elements
Background options - Images or solid colors with opacity control

Applying Themes

Navigate to Themes - Access theme gallery
Preview themes - See visual previews of each style
Select theme - Click on desired theme
Confirm application - Themes apply immediately
Customize further - Adjust colors, fonts, or add personal touches

Important: Applying a theme replaces your current color and font settings but preserves your brewery-specific information and logo.

Essential Settings

Making Your Taplist Public

Critical First Step: Your taplist defaults to private, which means customers cannot access it.

To make your taplist public:

Navigate to Settings - Access taplist settings page
Find "Enable public taplist" checkbox - Located in Basic Information section
Check the box - Enable public access
Save settings - Apply the change

Public vs Private:

Private (Default) - Checkbox unchecked, only you can view the taplist (requires login)
Public - Checkbox checked, customers can access your taplist without login

Important: Until you enable public access, customers visiting your taplist URL will see a "This taplist is private" message instead of your beer menu.

Custom Branding

Logo Integration

Logo Upload:

Access Settings - Go to taplist settings
Logo URL field - Enter direct link to your logo image
Test display - Preview how logo appears
Save settings - Apply logo to your taplist

Logo Best Practices:

High resolution - Use clear, crisp images
Transparent background - PNG format works best
Appropriate size - Logo should be readable but not overwhelming
Brand consistency - Use official brewery logo

Color Customization

Primary Colors:

Primary Color - Main brand color, used for headers and accents
Secondary Color - Supporting color for backgrounds and sections
Row Colors - Alternating colors for beer entries

Color Selection:

Access color pickers - In Settings appearance section
Choose colors - Click color squares to open picker
Preview changes - See real-time updates
Save settings - Apply new color scheme

Color Strategy:

Brand alignment - Use colors from your brewery's brand guide
Readability - Ensure good contrast between text and backgrounds
Atmosphere - Colors should match your brewery's vibe
Consistency - Maintain color harmony across all elements

Typography Options

Font Selection:

Google Fonts integration - Access to hundreds of professional fonts
Primary font - Used for headers and beer names
Body font - Used for descriptions and details
Fallback fonts - System fonts for reliability

Typography Best Practices:

Readability - Choose fonts that are easy to read from distance
Brand alignment - Select fonts that match your brewery's personality
Contrast - Pair fonts for visual hierarchy
Performance - Avoid too many different fonts

Layout and Display Options

Display Layout Types

Grid Layout:

Card-based design - Each beer displayed as individual card
Visual emphasis - Large beer names and descriptions
Mobile-friendly - Responsive card arrangement
Best for - Smaller tap counts with detailed beer information

Column Layout:

Table-style display - Organized columns for easy scanning
Compact design - More beers visible at once
Consistent alignment - Clean, organized appearance
Best for - Larger tap counts, quick reference

Pagination Settings

When to Use Pagination:

Large tap counts - More taps than fit comfortably on screen
Display rotation - Automatic cycling through beer selections
Focused viewing - Highlight subset of offerings

Pagination Options:

Taps per page - Configure how many beers show at once
Auto-rotation - Automatically advance pages every 5-60 seconds
Navigation controls - Show/hide manual navigation buttons
Page indicators - Display dots showing current page

Visual Indicators

Beer Information Display:

ABV visualization - Bottle graphics showing alcohol strength
IBU hop indicators - Hop graphics showing bitterness level
SRM color bars - Visual representation of beer color
Volume tracking - Keg level indicators (FlowBox integration coming soon)

Indicator Settings:

Enable/disable - Turn visual indicators on or off
Mobile optimization - Adjust for smaller screens
Information density - Balance detail with readability

Announcement Banner

The announcement banner lets you display messages at the top or bottom of your public taplist — great for specials, events, or happy hour info.

Setting Up an Announcement

Go to Settings and click the Messages tab
Toggle Enable Announcement Banner on
Click Add Message to create your first message
Type your message text and choose an alignment (left, center, or right)
Add additional messages if you want them to rotate automatically

Banner Options

Position - Display at the top or bottom of the taplist
Rotation - Automatically cycle through multiple messages
Rotation Speed - Control how long each message shows (in seconds)
Colors - Use your theme colors or set custom background and text colors
Border Radius - Round the corners of the banner

Display Editor (Basic+)

The Display Editor is a drag-and-drop layout builder designed for TV and large-screen taplist displays. It gives you far more control than the standard themes and settings.

What You Can Do

Multi-page layouts - Create multiple pages that auto-rotate on your display
Drag-and-drop components - Add tap lists, text blocks, images, and Untappd feeds anywhere on the canvas
Global styling - Set fonts, colors, and spacing across your entire layout
Page rotation - Configure timing for automatic page cycling
Templates - Start from pre-built layout templates or build from scratch

When to Use It

The Display Editor is ideal when you want a custom TV display that goes beyond a simple beer list — for example, combining your tap list with images, announcements, or Untappd check-ins on a rotating multi-page screen.

Access: Click Display Editor in your admin sidebar (requires Basic plan or above).

Menu Builder (Basic+, Beta)

The Menu Builder lets you design printable PDF menus for your taproom tables, to-go counters, or events.

What You Can Do

Drag-and-drop design - Add beer lists, headings, text, images, and dividers
Custom branding - Match your brewery's fonts, colors, and logo
PDF export - Download print-ready menus
Templates - Start from pre-built menu templates

Access: Click Menu Builder in your admin sidebar (requires Basic plan or above).

Advanced Customization (Paid Plans)

Custom CSS Editor

What is Custom CSS: Custom CSS allows complete control over your taplist appearance by adding your own styling code.

CSS Editor Features:

Syntax highlighting - Easier code writing and debugging
Real-time preview - See changes as you type
Error checking - Catch CSS syntax errors
Backup and restore - Save and restore custom styles

Common CSS Customizations:

Animations - Add smooth transitions and effects
Custom layouts - Modify spacing, positioning, alignment
Typography - Fine-tune font sizes, weights, spacing
Background effects - Gradients, patterns, overlays
Mobile responsiveness - Optimize for specific devices

CSS Examples and Tips

Basic Color Override:

Change primary color:

Selector: .primary-color
Property: background-color: #your-color !important;

Animation Effects:

Add fade-in effect for beer cards:

Selector: .beer-card
Property: animation: fadeIn 0.5s ease-in-out;
Keyframes: @keyframes fadeIn with from opacity: 0 to opacity: 1

Mobile Optimization:

Adjust font size for mobile:

Media query: @media (max-width: 768px)
Selector: .beer-name
Property: font-size: 1.2em;

Background Images

Adding Background Images:

Upload image - To your web hosting or image service
Get direct URL - Copy image link
Enter URL - In background image field
Adjust opacity - Control image visibility behind content
Preview and save - Check appearance and apply

Background Image Tips:

High resolution - Use quality images that look good on large displays
Appropriate content - Images should enhance, not distract from beer info
Opacity control - Lower opacity ensures text remains readable
File size - Optimize images for fast loading

Customization Best Practices

Design Principles

Brand Consistency:

Match physical space - Taplist should complement your brewery's interior
Logo integration - Prominently feature your brewery logo
Color harmony - Use colors from your existing brand materials
Typography alignment - Choose fonts that match your brewery's personality

Customer Experience:

Readability first - Information should be easily readable from distance
Clear hierarchy - Most important information should stand out
Mobile optimization - Many customers will view on phones
Update frequency - Keep appearance fresh with seasonal changes

Testing and Optimization

Multi-Device Testing:

Desktop displays - Check appearance on large screens and TVs
Tablet viewing - Ensure good display on medium-sized screens
Mobile phones - Verify readability and usability on small screens
Different browsers - Test in Chrome, Firefox, Safari, Edge

Performance Considerations:

Image optimization - Use compressed images for faster loading
Font loading - Limit number of custom fonts
CSS efficiency - Keep custom CSS clean and organized
Regular updates - Refresh themes and styling periodically

Seasonal and Event Customization

Seasonal Updates:

Holiday themes - Adjust colors for Christmas, Halloween, etc.
Seasonal beers - Highlight seasonal offerings with styling
Weather appropriate - Light themes for summer, darker for winter
Local events - Customize for local festivals or celebrations

Special Events:

Beer releases - Feature new beer launches prominently
Tap takeovers - Adjust styling for guest brewery events
Competitions - Highlight award-winning beers
Collaborations - Special styling for collaborative brews

Troubleshooting Customization

Common Issues

Problem: Changes not appearing on public display Solutions:

Clear browser cache and refresh
Check if changes were saved properly
Wait a few moments for updates to propagate
Try viewing from different device or browser

Problem: Custom CSS not working Solutions:

Check CSS syntax for errors
Ensure proper selectors are used
Verify CSS specificity (use !important if needed)
Test CSS in browser developer tools first

Problem: Fonts not loading Solutions:

Verify Google Fonts name is spelled correctly
Check internet connection for font loading
Try fallback fonts to ensure readability
Contact support if fonts consistently fail to load

Problem: Background images not displaying Solutions:

Verify image URL is direct link to image file
Check that image hosting allows external linking
Ensure image file format is supported (JPG, PNG, GIF)
Try different image hosting service

Getting Help with Customization

Support Resources:

CSS tutorials - Online resources for learning custom CSS
Design inspiration - Look at other brewery websites and displays
Community forums - Connect with other brewery owners for ideas
Professional help - Consider hiring designer for advanced customization

Before Contacting Support:

Screenshot current appearance - Show what you have now
Describe desired outcome - Explain what you want to achieve
Provide specific details - Colors, fonts, layouts you prefer
Include error messages - Any CSS or loading errors you see

Congratulations! You now have all the tools to create a professional, branded taplist that perfectly represents your brewery. Your customers will appreciate the polished appearance and easy-to-read beer information.