Global UI — Header, Footer, Drawers & Popups
Every storefront page that uses layout/theme.liquid renders inside this global shell.
Overview
| Item | Detail |
|---|---|
| Layout | layout/theme.liquid |
| Header group | sections/header-group.json → announcement + header |
| Footer group | sections/footer-group.json → footer-promotions + footer |
| Popup group | sections/popup-group.json → newsletter + age verification |
| Cart type | Drawer (theme setting) |
Page shell structure
- Announcement bar (optional)
- Header (logo, nav, search, account, cart)
- Page content (
{{ content_for_layout }}) - Footer
- Global helpers: video modal, photoswipe, tooltips
Step-by-step: Header
Step 1 — Announcement bar
- Section:
sections/announcement.liquid - Shows a store-wide promotion or message
- Change the text, link and colours in the Theme Editor
Step 2 — Logo
- Snippet:
header-logo-block - Click → Homepage (
/)
Step 3 — Main navigation
- Desktop:
header-desktop-nav/header-split-nav - Main menu:
main-menu - Mega menu blocks (e.g. New, Clothing) with promo tiles
- Toolbar menu:
new-toolbar
Step 4 — Mobile / drawer menu
- Snippet:
snippets/drawer-menu.liquid(#NavDrawer)
- Tap the hamburger icon
- Nested accordion links expand and collapse
- Mega-menu promo tiles are shown
- Account links are available in the drawer too
Step 5 — Search
- Header search icon → predictive search overlay
- Suggestions appear as you type, matching product title and variant SKU (including mid-code fragments such as
1212insideCK2P1212-SJ-NT) - Enter / View all →
/search?q=…(full Search page) - Details: 16-search.md
Step 6 — Account icon
- Logged out →
/account/login - Logged in →
/account - Snippet:
customer-account
Step 7 — Cart icon
settings.cart_type == drawer→ the cart drawer opens- Otherwise the
/cartpage - Snippet:
snippets/cart-drawer.liquid
Step 8 — Locale / currency (if enabled)
- Selectors in the header
- Snippet: related multi-selector helpers
Step-by-step: Cart Drawer
- Click the cart icon
- The drawer slides out
- Its content loads over AJAX from
templates/cart.ajax.liquid - Line items:
cart-itemsnippet - Quantity +/- updates (AJAX refresh)
- Subtotal, discounts, optional note and terms
- Checkout or additional wallet buttons
- Empty cart → continue shopping CTA
Step-by-step: Footer
- Optional footer promotions strip (
footer-promotions— may currently be disabled) - Footer menus (Shop, Company, Get Help)
- Newsletter signup (
footer-newsletter) - Logo and custom text blocks
- Social / Follow shop CTA
- Locale selectors if configured
Related: sections/footer.liquid, footer-menu, footer-logo, multi-selectors
Popups (global overlays)
| Popup | Section | Status note |
|---|---|---|
| Newsletter popup | newsletter-popup | Configured in popup-group; may be disabled |
| Age verification | age-verification-popup | Configured in popup-group; may be disabled |
<!-- BEGIN GENERATED: theme-editor -->
Theme Editor settings
Each section below links to its full settings reference — every setting with id, type, default and a screenshot of the panel.
| Section | Type | Settings | Blocks |
|---|---|---|---|
| Age verification popup | age-verification-popup | 15 | 0 |
| Announcement (Trends-WD) | announcement-bar-trends-wd | 21 | 1 |
| Announcement bar | announcement | 3 | 2 |
| Footer promotions | footer-promotions | 1 | 1 |
| Footer | footer | 11 | 5 |
| Header | header | 20 | 1 |
| Popup | newsletter-popup | 16 | 1 |
| Quick view | quick-view | 38 | 0 |
Global theme settings
Full index: settings reference
<!-- END GENERATED: theme-editor -->Related files
layout/theme.liquid
sections/header-group.json
sections/header.liquid
sections/announcement.liquid
sections/footer-group.json
sections/footer.liquid
sections/popup-group.json
snippets/drawer-menu.liquid
snippets/cart-drawer.liquid
snippets/predictive-search.liquid
snippets/header-icons.liquid
templates/cart.ajax.liquid