Theming and layout

Your store should look like your brand, not like a template. The Store Owner sets colours, header, footer and mobile navigation in WordPress, and the storefront applies them on the next page load, with no developer and no redeploy. Structural choices that rarely change, such as the Template Family and the fonts, stay with the deployment.

Where it shows

Every storefront page: header, footer, colours, mobile tab bar

Configure in

StoreFront › Settings › Colors, Header, Footer, Social Links, Mobile tab bar

Requires

WooCommerce mode and the Companion plugin; a Storefront URL for the live header preview

Try it in Demo Mode

The demo store shows the built-in theme, header and footer, with a working light/dark switch

What shoppers get

• A storefront in your brand colours, with a light and dark mode they can switch between from the footer. Light is the default.
• A header that fits your catalogue: search, menus, category and brand dropdowns, account, cart, wishlist and compare, laid out separately for desktop and mobile.
• A footer with your menus, contact details, newsletter sign-up, payment logos and social icons.
• On phones and tablets, an app-style tab bar at the bottom of the screen.

Colours, light and dark

Start from one of eleven ready-made palettes (Forest, the default, plus Beauty Shop, Blossom, Lime, Ink, Ocean, Berry, Sunset, Rose, Crimson and Slate) and tweak individual colours on top, or switch to Custom colors and set every token yourself. Each token has a light and a dark value. Corner radius and shadows are set on the same screen, and a live mock-up previews the result as you edit.

The storefront receives the colours as CSS variables and injects them as a stylesheet, so every button, badge and surface follows along. Hex values and modern colour functions such as oklch() are accepted.

Header builder

The header builder gives you three rows (Top bar, Main header and Header bottom), each with left, centre and right slots, or one full-width slot. Desktop and mobile layouts are edited separately. Drag elements into place from a palette that includes:

• logo, navigation menu and an icon menu strip (icons or images linking to categories, brands or pages);
• All Categories and Brands dropdowns, plus quick New and Sale links;
• search (a full form or an icon), account, cart, wishlist and compare, each with a count where relevant;
• a mobile burger menu, mobile search, text, a spacer and a divider.

Rows have their own height on desktop and mobile, can be hidden per view, and can be sticky. The whole header can stick or slide in, hide on scroll and cast a shadow.

You can keep several headers and choose which one the storefront shows. Start from a preset (Classic, Logo centered or Minimal), duplicate a header, or export and import it as JSON. While you edit, the live preview renders your draft inside the real storefront header, for desktop and mobile.

When the deployment runs in more than one language, the storefront adds a language switcher to the main header row automatically.

Footer builder

Build up to six columns, each a stack of up to twelve items: images and logos (including rows of linked icons), text, links with an icon, a WordPress menu, a newsletter field, or the light/dark switch. Add an optional prefooter line above the columns and a copyright row with left, centre and right slots below them; a payment-methods image usually goes on the right. Columns can collapse into accordions on mobile, and a back-to-top button is one switch away. A desktop and mobile preview is drawn as you edit.

Mobile tab bar

On phones and tablets, a bar fixed to the bottom of the screen gives Shoppers one-tap access to Home, Shop, Categories, Wishlist, Cart and Account. Cart and wishlist show counts. You choose the order and switch each tab on or off; the whole bar is on by default. The Wishlist tab appears only while the Wishlist feature is on, and the bar steps aside on checkout, the order confirmation and product previews, so nothing competes with paying.

Brand details

• Social links. Enter your Facebook, Instagram, X, YouTube, TikTok and LinkedIn addresses once; the storefront draws the icons in its built-in footer and in the promo popup. An empty channel shows no icon.
• Favicon. The storefront uses your WordPress Site Icon.
• Typography. Figtree and Bricolage Grotesque, self-hosted for speed. Fonts are part of the deployment, not a wp-admin setting.
• Template Family. A Template Family is the overall look of the Home, listing and product pages, plus a header and footer preset, chosen per deployment with STOREFRONT_TEMPLATE_FAMILY. Only the default family ships today.

Set it up

All of these live in one screen, StoreFront›Settings. One Save Changes button saves every tab, except the header, which has its own Save header button.

• Colours: Colors and dark mode
• Header: Header builder
• Footer, social links and tab bar: Footer and mobile bar
• Store name, logo mark and fonts: Store identity

Good to know

• Changes take up to about five minutes to reach the live store, because public settings are cached.
• Pick menus for the default footer. A fresh install’s Company, Services and Customer Care columns ship with no WordPress menu chosen. They don’t render, and are removed on save unless you pick a menu.
• Check the built-in header’s links. Its About Us and Contact Us items point to /about and /contact; the storefront’s pages are /about-us and /contact-us.
• Two kinds of social icons. The footer builder’s icon rows carry their own links and do not read the Social Links tab.
• Text element options. The header Text/HTML element’s Display inline and Additional CSS class options are saved but not yet applied by the storefront.

Related

Colors and dark modePick a palette or set every token.

Header builderRows, slots, elements and presets.

Footer and mobile barColumns, copyright row, social links and tab bar.

Languages and RTLRight-to-left layouts and the language switcher.