Skip to content

Theming and Customization

Jump to bottom
WhiskerEnt edited this page Mar 7, 2026 · 1 revision

Theming & Customization

Built-in Color Themes

Whisker ships with 5 color themes. Change the theme in Admin → Settings or by adding a data-theme attribute to the <html> tag.

Theme Primary Accent Background Best for
Default (Purple/Pink) #8b5cf6 #ec4899 #faf8f6 Fashion, lifestyle, creative
Ocean Blue #0ea5e9 #06b6d4 #f0f9ff Tech, gadgets, professional
Forest Green #16a34a #ca8a04 #f7faf5 Organic, nature, food
Sunset Orange #f97316 #e11d48 #fffbf5 Bold, energetic, sports
Midnight Dark #a78bfa #f472b6 #0f0e17 Premium, luxury, dark mode

Applying a Theme

Add data-theme="ocean" (or forest, sunset, midnight) to the <html> tag in views/store/layouts/main.php:



For the default purple/pink theme, no data-theme attribute is needed.


CSS Customization


Store CSS


The storefront stylesheet is at assets/css/store.css. All colors use CSS custom properties defined in :root:


:root {
    --wk-purple:     #8b5cf6;    /* Primary color */
    --wk-purple-soft:#ede9fe;    /* Primary soft/bg */
    --wk-pink:       #ec4899;    /* Accent color */
    --wk-pink-soft:  #fce7f3;    /* Accent soft/bg */
    --wk-green:      #10b981;    /* Success color */
    --wk-green-soft: #d1fae5;    /* Success soft/bg */
    --wk-yellow:     #f59e0b;    /* Warning color */
    --wk-red:        #ef4444;    /* Error/delete color */
    --wk-bg:         #faf8f6;    /* Page background */
    --wk-surface:    #ffffff;    /* Card/panel background */
    --wk-text:       #1e1b2e;    /* Primary text */
    --wk-muted:      #6b7280;    /* Secondary text */
    --wk-border:     #e8e5df;    /* Border color */
    --font:          'Nunito', sans-serif;
    --font-mono:     'JetBrains Mono', monospace;
    --radius:        14px;       /* Card border radius */
    --radius-sm:     8px;        /* Button/input radius */
    --max-w:         1200px;     /* Content max width */
}


To create a custom theme without modifying the core CSS, add a [data-theme="custom"] block:


[data-theme="custom"] {
    --wk-purple:     #your-primary;
    --wk-purple-soft:#your-primary-soft;
    --wk-pink:       #your-accent;
    /* ... override any variables */
}


Admin CSS


The admin panel stylesheet is at assets/css/admin.css. It uses similar CSS variables. You can customize the admin panel independently.


Layout Customization


Store Layout


The main storefront layout is at views/store/layouts/main.php. This contains:


    

  • Header with logo, navigation, currency selector, cart button
    • 

  • Flash messages
    • 

  • Main content area
    • 

  • Cart drawer (slide-in panel)
    • 

  • Footer
    • 

  • AI chatbot widget
    • 



Homepage


The homepage is at views/store/home.php. It contains:


    

  • Hero section with store name and tagline
    • 

  • Featured products carousel
    • 

  • All products grid
    • 



Product Page


The product detail page is at views/store/product.php. Includes:


    

  • Image gallery with primary/secondary images
    • 

  • Product info, price, variants selector
    • 

  • Add to cart button
    • 

  • Description
    • 

  • SEO meta tags and JSON-LD schema
    • 



Logo & Branding


Changing the Logo


The default logo is an SVG cat icon defined inline in the layouts. To use your own logo:


    

  1. Upload your logo to assets/img/logo.png (or SVG)
    2. 

  2. Edit views/store/layouts/main.php

    3. 

  3. Find the .wk-logo section and replace the SVG with an <img> tag:
    4. 



    


Changing the Favicon


Replace assets/img/favicon.svg with your own SVG or PNG favicon. For PNG favicons, update the <link> tag in both layouts:




Footer Branding


The "Powered by Whisker" footer is in views/store/layouts/main.php. Per the free license, this must remain visible. Premium licenses can remove it.


Fonts


Whisker uses Google Fonts loaded via CDN:


    

  • 
Nunito — primary font (body, headings, buttons)
    • 

  • 
JetBrains Mono — monospace (prices, SKUs, code)
    • 



To change fonts, update the Google Fonts <link> in both layout files and change the --font CSS variable.


Adding Custom Pages


Go to Admin → Pages to create custom pages (About Us, Privacy Policy, Terms of Service, etc.). These are accessible at /page/your-slug and automatically appear in the storefront.


Email Templates


Go to Admin → Email Templates to customize transactional emails:


    

  • Order confirmation
    • 

  • Shipping notification
    • 

  • Password reset
    • 

  • Welcome email
    • 

  • Contact form notification
    • 



Templates support HTML and variable placeholders like {{customer_name}}, {{order_number}}, {{tracking_url}}.




📧 Need a custom theme or design? mail@lohit.me


              


          



  
          

            


            
Clone this wiki locally