Header, menus and footer
Chapter 3 of the Clasp 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 thin velvet bar across the top of every page. Colour scheme: Lining band (default), Page or Champagne band. From 1100px wide it has three parts: Left text ("Made by hand in Fremantle, WA": where you are) at the start, your messages in the middle, and up to two links at the end (First link label and First link, Second link label and Second link; a link needs both). Under 1100px only the messages show. Up to four blocks:
- Announcement: Text ("Free gift box with every order") and Link. Several announcements sit side by side, separated by small facets, 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.
Header
| Setting | Default | What it does |
|---|---|---|
| Menu | Main menu | The header's menu |
| Layout on desktop | Inline | Inline: one row, the wordmark (or logo) at the start, your menu's top-level links centred, then the ring size link and the search, account and bag icons. Stacked: the wordmark and the icons on one row, the links centred on a row under it. |
| 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. |
| Ring size link label | Ring sizes | A text link with a small ring icon, shown on desktops beside the icons and in the menu on phones. Leave blank to hide it. |
| Ring size link | Empty | Leave blank to use the Printable ring sizer page from Theme settings › Jewelry (chapter 9) |
| Stack builder link label | Build a stack | Shown in the menu on phones and tablets when a link is set |
| Stack builder link | Empty | Where "Build a stack" goes, such as /#stack for the stack builder on your home page (chapter 11). The Clasp and Charm presets use /#stack. |
| Show search | On | Search placeholder: "Search rings, hoops and chains". The search button opens a search panel under the header with suggestions and matching products 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) |
Inline switches to Stacked by itself when it can't fit: when the menu has more than 7 top-level links, when the shop name (text logo) is longer than 18 characters, when the image logo is set wider than 220px, and on screens from 1100 to 1279px wide. That's why the Charm and Heirloom presets, whose demo names are long, use Stacked. A stacked row of links that still doesn't fit moves into the menu, as on phones. Under 1100px the header is the menu button and search on the left, the wordmark in the middle and the bag on the right; a long shop name steps down in size and wraps onto two lines, never under the icons. 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 small photo tile to the end of a mega menu panel: your Image set in an Arch or an Oval (Image shape) with its gilt keyline, a Heading ("Build your stack") and a Link with its Link label ("Start stacking"). Set Menu item to the title of the top-level link it belongs to, such as Rings. 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; 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 (Rings › By style › Stacking bands, Signet rings, Solitaires; Rings › By stone › Birthstone rings) opens a mega panel: up to three columns, one per child, each headed by the child's title with its own links under it, then that link's menu promos.
- A top-level link with one level of children (Earrings › Hoops, Studs, Drops, Ear cuffs) opens a dropdown.
- A top-level link without children is a plain link.
The current page's link is marked with a fine accent rule. A good main menu for a jewelry store: New in, Rings ▸, Earrings ▸, Necklaces ▸, Bracelets, Build a stack, Gifts. Keep to 7 top-level links or fewer for the inline layout.
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 the Ring sizes link, Build a stack (when its link is set), Log in or Account, and the country and language selectors.
Footer
The footer is a lining band. It holds these blocks, in any order:
- Brand: your logo or shop name, Text ("Small gold and silver jewelry, made by hand in a studio above a bookshop…") and Show social links (on; add the links in Theme settings › Social media).
- Menu column: Heading ("Shop") and Menu (the footer menu by default). The presets have Shop and Help columns.
- Text column: Heading ("Visit the studio") and Text, for your address, opening hours and a link to book a fitting.
- 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).
- Social media: Heading ("Follow us") and the icons.
Footer settings: Colour scheme (Lining band by default), 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.
The Section, Rich text, Newsletter, Materials, As seen in and Custom Liquid sections can also go in the footer group.