Header, menus and footer
Chapter 3 of the Ribbon 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
The ribbon across the top of every page. Style: Ribbon (default: a satin band in your accent color with two fine stitch lines) or Plain (the page color with a rule under it). From 1100px wide it has three parts: Text on the left ("Made in Paddington, Brisbane": where you are), 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 1100px only the messages show. Up to four blocks:
- Announcement: Text ("Free shipping over $100") and Link. Several announcements sit side by side, separated by small bows, while they fit. When they don't fit (on phones, usually), they take turns every 6 seconds with a pause button. Put your most important message first.
- Countdown (one per bar): a live countdown ("02:14:22:07": days, hours, minutes, seconds). 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"). Screen readers hear the deadline written out, not the ticking digits.
Use a real deadline that is the same for every shopper, such as the last order date for Christmas. Shopify doesn't allow fake countdowns, so don't extend or restart a deadline to create urgency. For a product launch, use the Next drop section instead (chapter 11).
Header
| Setting | Default | What it does |
|---|---|---|
| Menu | Main menu | The header's menu |
| Desktop layout | Split around the logo | Split around the logo: search at the far left, your menu's top-level links divided either side of a centred logo, and account and bag at the far right. Classic: the logo first, the links after it, then search, account and bag. |
| Menu style | Mega menu | Mega menu opens a wide panel for a top-level link whose child links have links of their own (below). Other top-level links with children keep a Dropdown, a short list under the link. |
| Open menus on hover | On | For shoppers using a mouse. Menus always open on click, tap and keyboard. |
| Show search | On | Search placeholder: "Search dresses, knits and bows". The search button opens a search panel with suggestions as shoppers type. |
| Sticky header | On scroll up | None, Always (stays at the top of the screen, slimming down once shoppers scroll) or On scroll up (hides while shoppers scroll down and comes back when they scroll up) |
The split layout switches to classic by itself when it can't fit: when the menu has more than 8 top-level links, when the shop name (text logo) is longer than 18 characters, when the image logo is set wider than 240px, and on screens from 1100 to 1279px wide. That's why the Maison preset, whose demo name is long, uses Classic. On larger screens a long shop name also sets smaller (past 24 characters on two lines), and if the links still don't fit beside it, they move into the menu, behind the menu button before the logo, as on phones. Under 1100px the header is the menu button and search on the left, the logo in the middle and the bag on the right; a long shop name steps down in size and wraps onto two lines. The bag carries a small count bubble once something is in it. The account panel's menu is set in Theme settings › Customer accounts.
Menu promo blocks (up to six) add a photo promo to the end of a mega menu panel: a 3:4 photo with a caption card over its foot. Set Menu item to the title of the top-level link it belongs to, such as Dresses, then Image, Heading ("The spring edit"), Text, Link and Link label ("Shop now"). Each link shows up to two promos, in block order; a promo without a heading isn't shown. Promos only appear on links that open a mega panel (the editor shows a note under the bar for one that doesn't); in the phone menu they show as a small row at the end of that link's list.
Menus
Build menus in admin under Content › Menus. In the main menu, with Menu style set to Mega menu:
- A top-level link with two levels of children (Dresses › By length › Mini, Midi, Maxi; Dresses › By occasion › Date night, Wedding guest) opens a mega panel: up to four columns, one per child, each headed by the child's title with its own links under it, then a "Shop all Dresses" link to the top-level link itself, then that link's menu promos.
- A top-level link with one level of children (Accessories › Bags, Hair bows and clips, Pearls) opens a dropdown.
- A top-level link without children is a plain link.
The current page's link is underlined in the accent color. A good main menu for a boutique: New in, Dresses ▸, Tops and knits ▸, Bottoms, Lingerie, Accessories ▸, Lookbook, Sale. With the split layout, keep to 8 top-level links or fewer.
The phone menu (the menu drawer) shows your main menu as rows (a row with children slides in a panel of its own, with a Back row), then Find my size (when Theme settings › Sizing and fit › Size guide page is set), Sign in or Account, and the country and language selectors.
Footer
The footer is a panel band. It holds these blocks, in any order:
- Brand column: your logo or shop name, Text ("A small boutique of dresses, knits and bows, chosen one by one and posted with tissue and a ribbon.") and Show social links (on; add the links in Theme settings › Social media).
- Newsletter: Heading ("Join the club"), Text ("One letter a week: new drops, restocks and the odd styling note."), Customer tag ("newsletter": added to everyone who signs up here, so you can find them in Customers) and Show Follow on Shop (on: lets customers follow your store in the Shop app).
- Menu column: Heading ("Quick links") and Menu (the footer menu by default). The presets have Shop and Help columns.
- Text column: Heading and Text, for your address and opening hours ("Visit us").
- Social media: Heading ("Follow us") and the icons.
Footer settings: Show country and language selectors (on; set up markets and languages in Shopify admin), Show policy links (on), Show payment icons (on) and Show "Powered by Shopify" (off). The base row holds the copyright and policy links, the selectors and the payment icons.