Header, menus and footer
Chapter 3 of the Littles user guide.
The announcement bar and header sit in the Header group at the top of the editor's section list; the footer is in the Footer group at the bottom. They show on every page.
Announcement bar
A pastel strip above the header with a scalloped hem hanging over the page. Background: Pastel block 1 (default) to Pastel block 4, or Quiet fill. From 990px wide it has three parts: the Left text ("Made in Kiama, New South Wales": where you make things), your messages in the middle, and up to two links on the right (Link 1 label and Link 1, Link 2 label and Link 2; a link needs both). Under 990px only the first message shows, and the links move to the bottom of the phone menu. Up to four blocks:
- Announcement: Text ("Free shipping over $75") and Link. Several announcements sit side by side, separated by small stars, while they fit. When they don't fit, they take turns every 6 seconds with a pause button, and hovering or focusing the bar pauses them too. On phones only the first shows, so put your most important message first.
- Countdown (one per bar): a live countdown in small white pills. Label ("Sale ends in"), End date (format 2026-11-27), End time (24-hour, default 23:59), Time zone (Store time zone, or a UTC offset), Link, and After the deadline: Hide the countdown (default) or Show a message (Message after the deadline, "This sale has ended"). The deadline is also written out in words.
Use a real deadline that is the same for every shopper, such as your last order date for Christmas. Shopify doesn't allow fake countdowns, so don't extend or restart a deadline to create urgency.
Header
The header is a white capsule floating just under the announcement bar: your logo on the left (the text logo has a small star beside the shop name and your Line under the logo under it; set them in Theme settings › Brand), the menu in the middle, and the search, account, wish list heart and bag buttons on the right. The heart and the bag carry a small count bubble once something is in them. The current menu item has a wavy underline.
| Setting | Default | What it does |
|---|---|---|
| Menu | Main menu | The header's menu |
| Menu style | Mega menu | Mega menu opens a top-level link's child links as a floating panel, with room for promos. Dropdown opens a short list under the link. |
| Open menus on hover | On | For shoppers using a mouse. Menus always open on click, tap and keyboard. |
| Highlighted menu item | Shop by age | The top-level link with this title shows as a sky-colored pill with a little cloud. Leave blank for none. |
| Show search | On | Search placeholder: "Search rompers, toys and gifts". The search button drops a search field under the capsule, with suggestions as shoppers type. |
| Sticky header | On scroll up | None, Always (stays at the top of the screen, shrinking a little once shoppers scroll) or On scroll up (hides while shoppers scroll down and comes back when they scroll up) |
The heart links to your wish-list page and hides when Theme settings › Wish list › Show wish list is off (chapter 10). On screens under 1100px wide the capsule becomes the menu button, the logo, and the search, heart and bag buttons; the account link moves into the menu drawer.
Menu promo blocks (up to six) add a promo tile to the end of a mega menu panel: a pastel tile with a heading, a line of text and "Shop now", with your image at the bottom right (or a cloud doodle without one). Set Menu item to the title of the top-level link it belongs to, such as Baby, then Heading ("Newborn gifts"), Text ("Ready to wrap, from $18."), Link, Image and Background (Pastel block 1 to 4; default 3). Each link shows up to two promos.
Menus
Build menus in admin under Content › Menus. In the main menu, with Menu style set to Mega menu, every top-level link with child links opens a panel:
- A link with one level of children (Baby › Rompers and onesies, Sleepwear, Knits…) becomes one column headed by its own title.
- A link with two levels becomes a column per child that has links of its own, headed by the child's title, with the grandchildren under it. Children without links of their own are gathered in a first column.
- Under the columns, a "Shop all Baby" link opens the top-level link itself.
- An age column: a column titled Shop by age (or By age), or whose links point at the age filter (their address contains
filter.p.m.custom.age_range, or the filter Theme settings › Shop by age › Age filter metafield names, such asfilter.v.option.age), shows a small pastel dot before each link, so it reads as an age picker.
A top-level link without children is a plain link.
A good main menu for a clothing boutique: New in, Baby ▸ (Rompers and onesies, Sleepwear, Knits, Swaddles and wraps, Hats and booties), Kids ▸ (Tops, Dresses, Pants and shorts, Outerwear), Toys ▸, Nursery, Gifts, and Shop by age ▸ with one link per age (0–3 m, 3–6 m … 4–6 yrs), each pointing at your age filter or an age collection (chapter 8). Add Wish list to your Help or footer menu too.
The phone menu (the menu drawer) shows, from the top: the links of Theme settings › Shop by age › Age menu as a row of chips under that menu's title (chapter 8), your main menu as rows (a row with children opens them in place, with "Shop all …" first), then Sign in or Account, Wish list, the announcement bar's links and the country and language selectors.
Footer
The footer is a pastel band (Background: Pastel block 2 by default, or 1, 3, 4 or Quiet fill) with a scalloped top edge and a few doodles. It holds these blocks, in any order:
- Newsletter: placed first, it becomes a white card on its own row above the columns. Heading ("Little letters, once a month"), Text ("New colours, restocks and the odd sleepy-time tip. Nothing else."), Button label ("Sign up"), Subscriber tag ("newsletter": added to everyone who signs up here, so you can find them in Customers) and Show Follow on Shop (off: lets customers follow your store in the Shop app).
- Brand: your logo (set in Theme settings › Brand), Text under the logo and Show social links (on; add the links in Theme settings › Social media).
- Menu column: Heading ("Quick links") and Menu. The presets have Shop and Help columns.
- Text column: Heading and Text, for your address and opening hours ("Visit the shop").
- Social media: Heading ("Follow us") and the icons.
Footer settings: Show doodles in the footer (on: a cloud, a moon and a star; phones keep only the cloud), Show country and language selectors (on; set up markets and languages in Shopify admin), Show policy links (on) and Show payment icons (on).