Store Shell

Top navigation, a simplified category panel, and a site footer around one main region.

Customer chrome

The shell frames every storefront page. Keep one main for page content and name secondary navigation regions.

Northmarket

Cart (2) Account

Welcome to Northmarket

Primary page content sits here. Later lessons fill this canvas with grids, filters, and checkout forms.

Important pattern

Name each navigation region. Keep brand and primary links in the topbar.

<header class="store-topbar">
  <p class="store-brand">Northmarket</p>
  <nav class="store-nav" aria-label="Store primary">...</nav>
</header>
<nav class="category-panel" aria-label="Product categories">...</nav>