Skip to content
Free express shipping on orders over $150 — Australia wide 30-day free returns from any AusPost parcel locker Spring edit: up to 40% off outerwear & footwear
Welcome to ApexCommerce
Sign in Create account
Track an order Help centre
Wishlist
Phase 01 — Global UI

Global chrome

The header you're looking at is the live component — scroll, resize, open the cart. Everything below documents its states, anatomy and mobile twins. This markup becomes the storefront layout partial; no page may fork it.

Sticky header 72px Bottom nav ≤991px Cart drawer, not a page jump Skip link + focus order
1

Header anatomy

Two rows on desktop: identity + search + account, then categories. One row on mobile with a drawer for everything else. Search is the widest element on desktop — discovery is the job.

  1. 1Announcement bar — dark green, 3 rotating messages (5s), dismissible once per session. Amber reserved for the value word. Height 38px; when dismissed, the sticky offset collapses.
  2. 2Logo — 34px mark + Fraunces wordmark + “Australia” subline. Never scales down below 28px; on mobile the subline drops.
  3. 3Search — pill, max 544px, suggestions panel on 2+ chars (products, categories, recent searches). Enter goes to results; Escape closes.
  4. 4Account — signed out: sign-in menu with create-account + guest order tracking (guests must never hit a login wall to track). Signed in: avatar, name, dashboard menu.
  5. 5Wishlist & cart — icon + label on desktop, badge counts in red (action) — cart badge bumps with a spring pop on add.
  6. 6Category row — 7 categories + Sale in red; mega menu for the two deepest trees; right side carries track-order + help for reassurance.
  7. 7Scroll behaviour — past 8px the header gains an sm shadow; the announce bar scrolls away while the header stays.
Mobile header (≤991px)
  • a56px row; five 44px+ targets; search opens a full-width row that pushes content (no overlay trap).
  • bHamburger opens the nav drawer from the left; cart opens from the right — direction = destination.
  • cNo category row on mobile: categories live in the drawer + bottom nav “Shop”.
3

Mobile nav drawer & cart drawer

The nav drawer leads with identity (sign-in or avatar), then categories with accordions, then utility links. The cart drawer is a miniature checkout: line items with quantity, coupon teaser, subtotal, checkout CTA — the user should never need the full cart page to buy.

Nav drawer · slides from left · 320ms
Menu
CN Hi Charlotte2 orders in transit
Men Home & Living Electronics Sale
Track order Wishlist Account settings Help centre
Ships to Australia · prices in AUD incl. GST
Cart drawer · slides from right · 320ms
Your cart
3 items · $486.85

Eucalyptus Hooded Parka

Size M · Sage
$249.00

Aria Wireless Headphones

Ink
$299.00$349.00
$150.15 away from free express
Subtotal$548.00
Spring sale−$61.15
Total$486.85

Includes GST of $44.26 · shipping calculated at checkout

4

Mobile bottom navigation

Five destinations, thumb-reachable, always visible above content: Home, Shop, Wishlist, Cart, Account. The active item gets a green tick-mark at the top edge. Body content is padded so nothing hides behind it.

Bottom nav · 60px + safe-area
Home Shop Wishlist4 Cart3 Account
5

Trust bar, newsletter & cookie notice

Trust is infrastructure in Australian e-commerce: delivery promise, returns promise, payment safety and local support appear on every page, above the footer.

Free express over $150
1–3 days metro, 3–6 regional. Flat $8.95 below that.
30-day free returns
Print-free labels at 4,000+ AusPost lockers.
Secure checkout
Stripe, Apple Pay, Google Pay, Afterpay. PCI-DSS.
Aussie support
Melbourne team, 7 days, chat or 1300 number.
The Apex Edit

One email a week. Worth opening.

New arrivals, restocks and member-only offers. Unsubscribe any time — we'd rather be missed than muted.

Cookie notice — bottom sheet on mobile
Your privacy, plainly

We use cookies for the cart, analytics and personalised offers. Essential cookies can't be switched off; the rest are yours to choose.

  • 1Appears after 1.5s, once per session, never on checkout (distraction = abandoned carts).
  • 2Three honest actions — accept, essential-only, manage. No dark pattern where “reject” is a text link.
  • 3Sits above the bottom nav on mobile; xl shadow; dismisses on any choice or after 20s with essential-only.
  • 4Newsletter validates inline, swaps to a success state with the email echoed — no page reload.