Style Header, Footer and Announcement Components
Choose a heading, button or input look in the Store Editor, restyle an announcement or countdown, keep existing content and layout, and reset just the component you changed.
Use component looks when you want to change the appearance of a heading, button or input without rebuilding your header or footer. Your existing text, links, blocks, template and layout controls stay available. A component look is an optional appearance choice, not a replacement for those controls.
Open the right editor
Screen: Online Store → Landing Page Editor (called Landing page in the new admin sidebar) → Pages → Header or Footer → Design. This guide describes the Store Editor; if your menu opens the older editor, use Navigation, Header & Footer instead.
Choose the page-level settings to find Heading look, Button look and Input look in Design. These choices belong to the selected header or footer template, rather than an individual landing-page section. Selecting a row, part or component can open a more specific settings panel; return to the page settings if you do not see the look groups.
For an announcement, select its block in the header or footer, then open Design. The block's Announcement look group styles the announcement. Its Countdown look group appears when the block's announcement mode is Countdown. Choose the mode and supply your campaign content using the existing announcement controls; a countdown look does not create an end date or change the mode.
A look needs something to style
A Button look changes supported buttons already present in the selected template; it does not add a button or change its destination. An Input look needs an existing field, such as a search or newsletter input. Heading looks need a heading rendered by that template. Add or configure the content first if the preview has no corresponding component.
Choose and adjust a look
Open the component group
In Design, open Heading look, Button look or Input look. For an announcement block, open Announcement look or Countdown look. Opening another look group collapses the previous one; your selected look is kept.
Compare the preview tiles
Each tile pairs a name with a sample of the component's appearance. The sample is a visual guide: it does not replace your text, submit a form or follow a link. Select the tile to apply that look to the draft preview.
Fine-tune the component
Use the controls below the tiles. The available controls depend on the component and chosen look; they can include shape, spacing, typography or other appearance options. The main inspector search also filters the open component's controls. An announcement block instead has Search visible controls inside its look group. Clear the search to restore the full list. Open Advanced when additional controls are offered.
Save and check the draft
Click Save, reopen the page or use its draft preview, and confirm the choice is still selected. Check the actual component as well as the sample tile, especially on both desktop and mobile. Saving a draft does not publish it. Use your normal publish flow only when you are ready for customers to see the change.
The heading, button and input choices are separate. Changing the Button look leaves the Input look and your native template settings alone. Within a template, a look can affect more than one supported instance of that component; it is not an individual-button editor.
What each fine-tuning control changes
The following names match the component controls. The selected look determines which controls are relevant; search can also filter the list. A setting styles an existing supported component, not every piece of text or every link in the template. Colours and font choices follow your theme.
Heading look
| Control | Effect |
|---|---|
| Show eyebrow, Show title, Show subtitle | Show or hide that part of an existing heading. They do not create or replace its text. |
| Alignment | Align the heading left, centre or right. |
| Ornament | Choose no ornament, side rules, an accent underline, a frame, a dividing rule or a stacked heading treatment. |
| Font family | Use the theme's heading, body or monospaced font. |
| Size | Choose Small, Medium, Large or Display heading scale. |
| Weight | Choose the heading's Regular, Medium, Semibold or Bold weight. |
| Colour | Use the theme's Text, Muted or Accent colour, or inherit the existing colour. |
| Background | Keep the heading background transparent or use a Surface or Contrast treatment. |
| Border | Choose no border, a fine border or an accent border. |
| Accent colour | Choose the theme colour for the heading's ornament. |
For example, choose Lines on both sides for a centred title with rules, or Accent underline for a left-aligned title. Your existing heading content remains unchanged. If you hide a title, check the real draft preview as well as the tile: the tile uses sample text, not your page's text.
Button look
| Control | Effect |
|---|---|
| Button style | Choose a filled, outlined, ghost or underlined button treatment. The animated underline option draws the rule on hover. |
| Button size | Set the supported button to Small, Medium or Large. |
| Action shape | Choose square, softly rounded or pill-shaped corners. |
| Action lettering | Use body lettering or an editorial-label treatment. |
| Action fill tone | Use the theme accent or a quieter surface tone. |
These settings do not change button text or destinations. A template's plain navigation links may not use the same component as its action buttons, so check the actual button you want to style.
Input look
| Control | Effect |
|---|---|
| Field treatment | Choose an outlined, filled, underlined or pill-shaped field. |
| Field density | Choose Compact, Comfortable or Spacious field spacing. |
| Label style | Choose a standard, eyebrow or quieter label treatment. |
| Focus style | Choose a ring, outline or underline for the field's keyboard-focus state. |
Changing the input's look does not submit a form, change a placeholder, add a field or alter its validation. After styling a newsletter or search field, test typing and keyboard focus in the actual draft preview; the tile's example input is deliberately non-interactive.
Announcement and countdown looks
Announcement look offers Single Message, Single Message + CTA, Message + Countdown, Marquee and Slide Messages. Configure the real messages, links and announcement mode in the existing block controls first. An appearance selection does not supply missing campaign content or replace those controls.
In Countdown look, the original treatment preserves your existing timer. The other tiles offer editorial numerals, boxed units, circular units or hairline separators. Their fine-tuning controls are:
| Control | Effect |
|---|---|
| Timer style | Choose Minimal, Boxed or Circles for the time units. |
| Unit separators | Use no separator or a hairline between the units. |
| Numeral scale | Use Standard or Display-sized numerals. |
The catalog also includes Campaign badge, Coupon ticket, Availability rail and Product window. These pair a timer with existing badge, coupon, progress or product-image content when the selected section supports it. They do not create that content. A template without the required content continues to show its timer rather than a made-up badge, code or image. For the landing-section controls, bar-height requirements and save workflow, see Choose a countdown look.
These are appearance controls only. Set the campaign's real end time using the existing timing control. Changing a look does not restart an expired campaign or schedule publication. If a look group has no corresponding component in the selected template, its stored choice can have no visible effect there; try a template that actually renders that component rather than adding unrelated content to make the tile match.
Reset without losing your content
Reset look returns that component's look-managed settings to the section or template's original appearance. It does not delete your heading, button text, link, form content, announcement message or template layout. If you also changed a separate appearance control, check that control rather than assuming Reset look clears every setting on the page.
Where Reset design is available, it clears the component's design-axis overrides and selected look. It does not reset other component groups. Save again if you want the reset to remain after reopening the editor.
Choosing a different header or footer template is a separate action. Check its content, layout and supported components after switching; do not use a template switch merely to clear one component look.
Keep the announcement content and behavior separate
The announcement's message, link, mode and timing still use their existing controls. Look tiles change appearance; they do not schedule publication, change a link destination or extend a deadline. A Countdown look is unavailable in that block's settings while its mode is not Countdown: switch the mode first if you are building a timed campaign.
The sample timer in a tile is only an illustration. Judge your actual countdown against its saved end time and current time, not the digits shown in the tile. Use Navigation, Header & Footer for the announcement content and timing controls, and The Footer Editor for adding or arranging footer blocks.
Troubleshooting
Why do customers not see the new look?
First check the editor's selected page and template. Apply a look, click Save, then reopen the draft and check that the tile remains selected. A saved draft is not the published version; compare the draft preview with the public store before concluding that the look failed.
If the look is saved but has no visible effect, check that the template actually renders that component. A Button look cannot restyle a text-only announcement that has no button, and an Input look cannot add a field to a template that has none. Check the existing appearance controls too: an explicit setting can still influence the result.
Why can I not find a control?
Confirm Design, the selected Header or Footer page, and whether you are editing the page or an individual block. Clear the main inspector search, or Search visible controls in an announcement block. Expand the look group and its Advanced disclosure if shown. For an announcement's Countdown look, confirm that its mode is Countdown.
Does a tile change my text or form behavior?
No. Its sample content is preview-only. Keep using the native content and behavior controls for messages, destinations, newsletter settings and deadlines. Test those functions in the actual draft preview after restyling them.