Component controls
Beyond global style, some parts of your store have their own settings: the header, the footer, the announcement bar, and the product page. Style each once here and it applies everywhere that component appears.
Header, footer, and more
| Group | Control | Options | What it does |
|---|---|---|---|
| Input Style | bordered/underline/filled | How form fields look — outlined, filled, or underlined. Outlined is the safest for making a field look like a field. | |
| Input Focus | border-color/glow/float-label | What happens when someone taps into a field. A clear focus state is an accessibility requirement, not decoration. | |
| Image Hover | none/zoom/fade-overlay | What product images do on hover — zoom, lift, or nothing. | |
| Header Menu | Header Menu | select (menu id, location=header) | Which of your menus the header uses. Menus themselves are built under Storefront → Menus. |
| Identity | Show Logo | toggle on/off | Whether your logo appears at all. Off suits stores whose name is the wordmark. |
| Identity | Logo Size | compact/default/large | How large the logo renders. Bigger asserts the brand; too big pushes the menu into a cramped second row on mobile. |
| Identity | Logo Shape | none/rounded/circle | Whether the logo is masked to a circle, a rounded square, or left as-is. |
| Identity | Logo Upload | image url | Your logo file. Upload it at twice the size you want it displayed so it stays sharp on high-resolution screens. |
| Identity | Show Brand Name | toggle on/off | Whether your store name appears as text beside the logo. Useful when the logo is a symbol nobody would read as your name. |
| Identity | Brand Name | free-text | The name shown in the header, if it differs from your store name. |
| Identity | Brand Name Font | __heading__ (same as heading) or curatedFonts | A font for the brand name specifically, when it should differ from your headings. |
| Identity | Brand Name Color | hex color (picker + free-text) | The brand name colour, when it needs to differ from the header text. |
| Identity | Show Tagline | toggle on/off | A short line under the brand name. Say what you sell — a visitor decides in seconds whether they are in the right place. |
| Identity | Tagline | free-text (maxLength 160) | The tagline text itself. |
| Identity | Favicon | image url | The small icon in the browser tab and in bookmarks. It renders at 16px, so anything detailed becomes a smudge — use a mark, not your full logo. |
| Layout | Header Layout | logo-left/logo-center/logo-above | Where the logo and menu sit relative to each other. Centred logos read boutique; left-aligned reads conventional and scans faster. |
| Layout | Header Elevation | flat/soft/strong/floating | Whether the header sits flat on the page or lifts off it with a shadow. Elevation helps when content scrolls underneath. |
| Layout | Sticky Header | toggle on/off | Keeps the header visible as people scroll. Useful on long pages; it costs vertical space on a phone. |
| Layout | Header Link Style | underline/color-only/underline-on-hover | How header links are drawn — plain, underlined, or as buttons. |
| Menu | Menu Alignment | left/center/right | Where navigation items sit in the header — beside the logo, or pushed to the far edge. |
| Menu | Menu Density | compact/normal/spacious | The spacing between menu items. Tighter fits more links before they collapse into the mobile menu. |
| Menu | Menu Weight | 400/600 (regular/bold) | How bold navigation text is. |
| Menu | Menu Hover Style | color-shift/background-fade/underline-slide | What a menu item does when hovered — underline, highlight, or colour change. |
| Menu | Nav Active Indicator | color/pill/bold/underline | How the current page is marked in the menu. Without one, visitors lose track of where they are. |
| Menu | Menu Text Color | hex color (picker + free-text) | The colour of navigation text, when it should differ from the header default. |
| Menu | Menu Hover/Active Color | hex color (picker + free-text) | The colour a menu item takes when hovered or when it is the current page. |
| Icons & Actions | Show Account Icon | toggle on/off | Whether buyers see a sign-in / account entry point in the header. Off makes sense only if you sell nothing that needs an account. |
| Icons & Actions | Ambient Background | toggle on/off | A soft gradient behind the header instead of a flat colour. |
| Icons & Actions | Header Background Color | hex color (picker + free-text) | The header's own background, when you want it different from the page. |
| Mobile | Drawer Side | left/right | Which edge the mobile menu slides in from. |
| Mobile | Mobile Menu Style | drawer/fullscreen | How navigation collapses on a phone — a slide-in drawer, or a full-screen overlay. |
| Enabled toggle | boolean Switch (default false) | Turns the strip above the header on. Best used for one thing at a time — a sale, a shipping cutoff. | |
| Text | string Input | What the bar says. Short enough to read at a glance on a phone. | |
| Link | string (LinkPicker component) | Where the bar goes when tapped. A bar that says something is happening but isn't clickable frustrates people. | |
| Background color (swatch) | color Input type=color (default #FACC15) | Pick the background colour visually. | |
| Background color (hex text) | string Input font-mono | The same background colour as a hex code, for matching an exact brand value. | |
| Text color (swatch) | color Input type=color (default #000000) | Pick the text colour visually. | |
| Text color (hex text) | string Input font-mono | The same text colour as a hex code. | |
| Text color reset | button (sets textColor undefined) | Returns text to the theme default, undoing a manual override. | |
| Dismissible toggle | boolean Switch (default true) | Lets visitors close the announcement bar. Without it, the bar takes space on every page for everyone. | |
| Layout | Footer Menu | Select (menus filtered location=="footer") | Which menu the footer shows. Usually the longer one — footers are where policies and secondary links live. |
| Layout | Footer Columns | numeric display + navigate button (default 3) | How many columns the footer splits into. More columns suit a lot of links; fewer read cleaner. |
| Layout | Mobile Footer Layout | enum: columns | accordion | stack (default columns) | Whether footer columns stack or collapse into accordions on a phone. |
| Layout | Footer Link Style | enum: underline | color-only | underline-on-hover | The same choice for footer links. |
| Layout | Footer Background Color (swatch) | color input type=color (default surface/#FFFFFF) | A footer background different from the page. |
| Layout | Footer Background Color (hex text) | string Input font-mono | The footer background as a hex code. |
| Layout | Footer Background Color reset | button (sets undefined) | Returns the footer to the theme default. |
| Brand Column | Show Footer Logo | boolean Switch (default true) | Repeats your logo at the bottom of the page. |
| Brand Column | Show Footer Tagline | boolean Switch (default true) | A one-line description under the footer logo. |
| Brand Column | Show Footer Email | boolean Switch (default true) | Shows a contact email in the footer. Worth having — buyers look for it before they use a form. |
| Brand Column | Show Footer Phone | boolean Switch (default true) | A phone number in the footer. |
| Brand Column | Show Social Footer | boolean Switch | Your social links in the footer. |
| Newsletter | Show Newsletter Signup | boolean Switch (default on unless false) | Puts an email capture in the footer. The lowest-effort way to collect an audience from traffic that isn't ready to buy. |
| Newsletter | Newsletter Headline | string Input maxLength 120 | The prompt above the signup field. Say what they get, not "subscribe". |
| Newsletter | Newsletter Subtitle | string Input maxLength 200 | A supporting line under the headline. |
| Newsletter | Newsletter Button Label | string Input maxLength 40 | The signup button wording. "Get the list" converts better than "Submit". |
| Copyright | Copyright Override | string Input maxLength 200 | Replaces the automatic copyright line with your own wording. |
| Frequently Bought | Switch (default ON) | Shows products commonly bought alongside this one. | |
| Co-Purchase | Switch (default ON) | Suggestions based on what other buyers purchased together. | |
| Cross-Sell | Switch (default ON) | Related products you pick, rather than ones the system infers. | |
| Cross-Sell | Cross-Sell Heading | Text input, maxLength 80 | The wording above cross-sell products. "You might also like" outperforms "Related products". |
| Recently Viewed | Switch (default ON) | Shows products this visitor looked at earlier. | |
| Recently Viewed | Recently Viewed Heading | Text input, maxLength 80 | The wording above the recently-viewed row. |
| Share Button/Bar | Switch (default ON) | Share controls on product pages. | |
| Lightbox | Switch (default ON) | Whether tapping a product image opens it full-screen. Useful when detail sells the product. | |
| Breadcrumb | Switch (default ON) | Whether pages show a trail back to where they came from. Worth having on deep catalogues. | |
| Product Reviews | Switch (default ON) | Whether reviews appear on the product page. | |
| Reviews | Reviews Heading | Text input, maxLength 80 | The wording above customer reviews. |
68 controls in this group. Generated from the live theme-control matrix.
What happens — and what doesn't
- The header and footer are shared across every page, so styling them once restyles the whole store's chrome.
- The announcement bar is the strip at the top for promotions; these controls set whether it shows and how it looks.
- Product-page controls shape how every product's page is laid out and styled.
- Form-input styling applies to the fields buyers fill in at checkout and in forms.
Where do I style my store's header and footer?
In the Components section of the theme editor. The header and footer are shared across every page, so styling them once applies store-wide.
What's the announcement bar?
The promotional strip at the top of your store. Its controls set whether it appears and how it looks.