Themes & Customization

Make your market reflect your community's unique personality and brand

Built-in Themes

LocallyGrown.net provides nine professionally designed themes to give your market a distinctive appearance. Each theme includes carefully chosen colors, header backgrounds, and typography that work together harmoniously.

🌿 Seasonal Themes

Winter: Cool blues and crisp whites with elegant styling
Spring: Fresh greens and light yellows for renewal
Summer: Bright greens and sunny yellows for vibrant energy
Fall: Warm browns and golden accents for harvest time

Perfect for markets that want to reflect the changing seasons.

🎨 Style Themes

Simple: Clean, minimal design with neutral colors
Paper: Classic black on white with red accents
Ocean: Coastal blues and seafoam greens for maritime markets
Harvest: Warm burgundy and golden wheat for traditional markets

Great for markets wanting a specific aesthetic that matches their brand.

⚪ None (Default)

Default Theme: Warm earth tones with green primary colors
  • Professional appearance suitable for any market
  • Works well as a foundation for custom styling

Best starting point for markets planning customization.

💡 Theme Selection: In your market settings, themes are displayed as visual cards with color swatches, making it easy to preview each theme's color palette before selecting it.

Header Customization

The modern interface provides extensive header customization options to create a unique first impression for your market.

Header Banner

  • Upload Custom Banner: Add your own header image (recommended: 1920x400px)
  • Responsive Images: Different sizes served for desktop, tablet, and mobile
  • Easy Management: Upload, preview, and remove banners directly in settings

Market Slogan

  • Rich Text Editor: Use Markdown formatting for styled text
  • Font Customization: Choose from web-safe font families
  • Size Options: Select from predefined sizes (0.75rem to 3rem)
  • Color Picker: Choose any color for your slogan text
  • Theme Defaults: Apply recommended styles for your selected theme

Layout Control

Drag and drop to reorder header elements (navigation bar, banner image, and slogan) in any arrangement that works best for your market.

Common Header Layouts

  • Traditional: Nav → Banner → Slogan
  • Banner First: Banner → Nav → Slogan
  • Minimal: Nav → Slogan (no banner)
  • Bold Statement: Slogan → Banner → Nav

Footer Customization

Add custom footer content that appears at the bottom of every page using the built-in Markdown editor.

Footer Content Options

  • Contact Information: Address, phone, email, hours
  • Market Policies: Links to terms, policies, and guidelines
  • Social Media Links: Connect to your social profiles
  • Additional Information: Certifications, awards, partnerships

Markdown Formatting

The footer editor supports full Markdown syntax:

  • **Bold text** for emphasis
  • *Italic text* for subtle emphasis
  • [Links](url) to external pages
  • Lists (ordered and unordered)
  • Line breaks and paragraphs

Custom CSS (Legacy Layouts)

For markets using legacy layouts, custom CSS options allow advanced styling control.

CSS Implementation Options

  • Custom CSS Text: Enter CSS code directly in your market settings
  • Custom CSS URL: Link to an external stylesheet hosted elsewhere
  • Combined Approach: Use a base theme with custom CSS overrides
⚠️ Important: Custom CSS currently only affects legacy layouts. Modern layouts use theme variables and header customization options instead. Future updates will allow custom theme creation for modern layouts.

CSS Variables Available

Modern themes use CSS custom properties that can be overridden:

:root {
    --lg-primary: #466d4d;
    --lg-secondary: #6d8d57;
    --lg-accent: #a4a948;
    --lg-bg-primary: #d9c6a5;
    --lg-header-bg: #f8f9fa;
    /* And many more... */
}

Interface Preferences

Control which interface version different user types see, allowing gradual migration to the modern interface.

User Interface Options

  • Customer Interface: What shoppers and visitors see
  • Grower Interface: Interface for farmers managing products
  • Volunteer Interface: View for market helpers
  • Admin Interface: Market manager's control panel

Each user type can be set to either "Legacy" or "Modern" interface independently, allowing you to:

  • Test modern interfaces with specific user groups
  • Gradually transition users to the new experience
  • Maintain familiar interfaces for users who prefer them

Future: Custom Theme Creation

Coming soon: The ability to create and upload your own custom themes for the modern interface.

Planned Features

  • Theme Builder: Visual tools to create custom color schemes
  • CSS Upload: Upload complete theme CSS files
  • Variable Overrides: Customize any aspect of existing themes
  • Theme Sharing: Share themes with other markets

Preparing for Custom Themes

To get ready for custom theme support:

  • Familiarize yourself with the existing theme structure
  • Identify which aspects of your brand you want to emphasize
  • Collect your brand colors, fonts, and visual assets
  • Consider hiring a designer familiar with CSS custom properties

Best Practices

Visual Consistency

  • Choose a theme that matches your market's personality
  • Use the slogan styling to complement your chosen theme
  • Keep header elements balanced and readable
  • Test your customizations on multiple devices

Content Guidelines

  • Slogan: Keep it short, memorable, and meaningful
  • Banner: Use high-quality images that represent your market
  • Footer: Include essential information without overwhelming

Performance Considerations

  • Optimize banner images before uploading (use web formats like WebP)
  • Keep custom CSS minimal and efficient
  • Test loading times after making changes

Ready to Customize Your Market?

Start with our built-in themes and header customization options to create a unique brand experience for your community.

Edit Market Appearance Market Settings Guide Get Design Help