Header, menus and footer
Chapter 3 of the Peel 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 dark strip across the top of every page, on the board colour. It holds up to four blocks:
- Announcement: Text ("Free sticker over $20 · Free shipping over $35") and Link. With two or more announcements they take turns every 5 seconds, with a small pause button; they stop while a shopper hovers or focuses them, and never rotate for visitors who prefer reduced motion. Put your most important message first.
- Countdown (one per bar): a live countdown in days, hours and minutes. Label ("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 drop has closed"). It suits a real closing date, such as a limited run. Shoppers can pause the ticking. In the theme editor, a countdown with a date in the wrong format or a deadline that has passed says so; shoppers don't see it.
Use a real deadline that is the same for every shopper. Shopify doesn't allow fake countdowns, so don't extend or restart a deadline to create urgency.
The sample announcement's amounts are text, not live values: when you change Spend this much or Free shipping over, change them here too.
Header
| Setting | Default | What it does |
|---|---|---|
| Menu | Main menu | The header's menu |
| Menu style | Mega menu | Mega menu shows a top-level link's child links as columns when they have links of their own (below). Other top-level links keep a Dropdown. |
| Open menus on hover | On | For shoppers using a mouse. Menus always open on click, tap and keyboard. |
| Show search | On | A search button that opens a search drawer, with suggestions as shoppers type. Search placeholder: "Search stickers, washi and pins". |
| Sticky header | Always | None, Always (keeps the header at the top of the screen) or On scroll up (hides it while shoppers scroll down and shows it again when they scroll up). A stuck header gets a little shorter. |
On computers the header is one row: the wordmark (or logo) on the left, your menu, then search, account and the bag with its count. The wordmark is a sticker: your shop name in the heading font. A long shop name takes two lines before anything else gives way. If the menu still doesn't fit, links fold from the end into a More item.
Under 1100px the header is the menu button, the wordmark in the middle (on two lines if the name needs them), then search and the bag. The menu and the account link move into the menu drawer.
Menu promo blocks (up to six) add a small promo to the end of a mega menu panel: a 180px die-cut with an Image, a Heading ("Mix a pack"), a Link and its Link label ("Pick 5, pick 10"). Set Menu item to the title of the top-level link it belongs to, such as Stickers. Each link shows up to two promos, in block order. Promos only appear on links that open a mega panel. In the theme editor, a promo that no mega panel can show gets a note saying so. In the phone menu, promos become small rows at the end of that link's group.
The account panel's menu is set in Theme settings › Customer accounts.
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 (Stickers › Die-cut › Animals, Food; Stickers › Sheets › Holo, Matte) opens a mega panel: one column per child, each headed by the child's title with its own links under it, then an "All Stickers" link and that link's menu promos.
- A top-level link with one level of children (Washi tape › Plain, Patterned, Foil) opens a dropdown.
- A top-level link without children is a plain link.
A good main menu for a sticker shop: Stickers ▸, Sheets, Mix a pack, About, Contact. Keep it short enough to sit on one row.
The phone menu (the menu drawer) shows your main menu as rows (a row with children opens in place), then Account, and the country and language selectors when you sell in more than one.
Footer
The footer sits on the board, the darkest band, as a big lid. Its settings:
| Setting | Default | What it does |
|---|---|---|
| Show brand column | On | Your shop name, with the About text under it ("Drawn in Brunswick, Victoria. Cut by hand, posted on Tuesdays, and very slightly judging you.") |
| Text after the copyright | Empty | A short line after the copyright, such as an address or a short note |
| Show country and language selectors | On | Set up markets and languages in Shopify admin (chapter 14) |
| Show policy links | On | Links to the policies you've written in Settings › Policies |
| Show payment icons | On | The payment methods your store accepts |
| Show "Powered by Shopify" | Off |
The huge wordmark across the footer is Theme settings › Brand › Show the big wordmark in the footer, not a footer setting.
It holds these blocks, in any order:
- Menu column: Heading ("Shop") and Menu (the footer menu by default). The presets have Shop (the main menu) and Help (the footer menu) columns.
- Text column: Heading ("Visit") and Text, for your address, opening hours or how to find you.
- Newsletter: Heading ("Subscribe"), Text ("Tell subscribers what they'll receive.") and Show Follow on Shop (on: lets customers follow your store in the Shop app). Sign-ups are tagged
newsletter. - Social media: Heading ("Follow") and the links from Theme settings › Social media. Add links there. With none, shoppers see nothing here.
- The theme blocks of chapter 5 (Heading, Text, Button and the rest).
The Section, Rich text, Newsletter, Icon row, Stocked at and Custom Liquid sections can also go in the footer group.