Theme Settings

The Theme page is the global style layer for Haus Storefront widgets. Tokens defined here are compiled into a single CSS file (haus-storefront-styles.css) that the storefront enqueues on the front end. Elementor controls reference these tokens by slug so widgets stay consistent without per-widget overrides.

Go to WordPress Admin > Haus Storefront > Theme to configure the theme settings.

How It Works

1. You edit tokens in the four token groups (Colors, Typography, Spacing, Buttons).
2. Saving validates values and regenerates the global CSS file.
3. The storefront enqueues that CSS.
4. Widget components and Elementor controls reference the tokens.
5. Widgets also have added overridable classes and variables for more custom styling.

Token Groups

The Theme page is organized into four token groups, each producing its own family of CSS variables.

Colors

• Each color is a single named swatch:
  • Primary
  • Secondary
  • Body
  • Accent
  • Disabled
  • Success
  • Error
  • Warning
• The global color palette is used by the storefront and widgets.

Typography

• The global typography tokens consists of the following variants:
  • Body
  • XXL
  • XL
  • LG
  • MD
  • SM
  • XS
• Each variant has the following properties, intialised with default values before configuration:
  • Font Family
  • Font Size
  • Font Weight
  • Font Style
  • Text Transform
  • Text Decoration
  • Letter Spacing
  • Word Spacing
  • Line Height

Spacing

• The global spacing tokens consists of the following variants:
  • XS
  • SM
  • MD
  • LG
  • XL
• Each variant has a value property, intialised with a default value before configuration.

Buttons

Buttons are state-aware. Each variant defines a default style and overrides for hover, disabled, active, and loading.

• The global buttons tokens consists of the following variants:
  • Primary
  • Secondary
  • Link
  • Outline
  • Ghost
  • Destructive
• Each variant has the following properties, intialised with default values before configuration:
  • Text Color
  • Background Color
  • Border Color
  • Font Size
  • Font Weight
  • Font Style
  • Text Align
  • Text Decoration
  • Border Radius
  • Border Width
  • Border Style
  • Text Transform
  • Line Height
  • Letter Spacing
  • Word Spacing
  • Padding
• Color properties can use global color tokens or be defined as a literal swatch.
• Padding can be linked to a single value or be defined as a per-side object.

Responsive Tokens

Responsive fields accept a per-breakpoint object: { mobile, tablet?, desktop? }.

• Breakpoints:
  • mobile: base
  • tablet: @media (min-width: 768px) and (max-width: 1024px)
  • desktop: @media (min-width: 1025px)
• Cascade: if tablet is unset it falls back to mobile; if desktop is unset it falls back to tablet then mobile.
• The Theme page exposes a breakpoint switcher; mobile is required.

Theme Preview Shortcode

Place this shortcode on a draft page to preview the active theme settings:

[haus_storefront_theme_preview]

Relation to Elementor Widgets

• Widget controls expose select inputs whose options come from the theme groups (button slugs, typography variants, color slugs).
• Selecting a slug stores only that slug; the visual outcome comes from the generated CSS variables.
• This means changing a token in Theme propagates instantly to every widget using that slug, with no per-widget edits.

Best Practices

• Define a small, stable palette and typography set first; let buttons reference colors via global: references.
• Prefer reusing existing tokens in Elementor widget controls over per-widget overrides.
• Use the breakpoint switcher to set tablet/desktop only when behavior actually differs from mobile.
• Use the Advanced page to export theme settings before risky edits and regenerate CSS after manual changes.
• Verify with the [haus_storefront_theme_preview] shortcode and inspect the generated CSS file URL.