Shop the collection

Storefront starter: header, search, product grid, cart feedback and footer. Every component class below is defined in styles/components.css; the only local rules left are storefront geometry — the content column width, the product column minimum, the 4/3 media frame and the navbar row order.

E-commerce Starter Template — point the product cards at your catalog API and the Cart / Add buttons at your checkout. Toast, quick-view modal, mobile drawer and the theme toggle are wired by styles/mue.js.

Best sellers

Audio

Wireless headphones

$199.00

40-hour battery, adaptive noise cancelling.

In stock

Accessories

Minimalist watch

$149.00

Sapphire glass, 5 ATM water resistance.

In stock

Audio

Portable speaker

$89.00

IPX7, 12 hours of playback, USB-C.

Low stock

Photo

Compact camera

$549.00

26 MP sensor, 4K/60, in-body stabilisation.

New

Storefront markup

<header class="navbar" role="banner">
  <a class="nav-brand" href="#">STORE</a>
  <div class="field nav-search">
    <label class="sr-only" for="shopSearch">Search products</label>
    <div class="input-icon"><svg aria-hidden="true">…</svg><input id="shopSearch" type="search"></div>
  </div>
  <ul class="nav-links" id="navLinks">
    <li class="nav-item"><a class="nav-link" href="#" aria-current="page">Shop</a></li>
  </ul>
  <div class="nav-spacer"></div>
  <div class="row nav-actions">
    <button class="theme-toggle" type="button" data-theme-toggle aria-label="Toggle dark mode">
      <span data-theme-state>Dark mode</span><span class="dot" aria-hidden="true"></span>
    </button>
    <button class="btn-primary" type="button"><svg aria-hidden="true">…</svg><span class="btn-label">Cart</span></button>
  </div>
  <button class="hamburger" type="button" data-menu-toggle="#navLinks"
    aria-controls="navLinks" aria-expanded="false" aria-label="Toggle navigation">…</button>
</header>

<div class="alert alert-info" role="note">
  <span class="alert-icon" aria-hidden="true"><svg>…</svg></span>
  <span>Free shipping over $50.</span>
</div>

<div class="grid-auto products">
  <article class="card card-interactive">
    <div class="card-media product-media" role="img" aria-label="Wireless headphones">…</div>
    <div class="card-body">
      <span class="card-tag">Audio</span>
      <h3 class="card-title">Wireless headphones</h3>
      <p class="price">$199.00</p>
      <p class="card-desc">40-hour battery, adaptive noise cancelling.</p>
      <span class="badge badge-success"><span class="dot" aria-hidden="true"></span>In stock</span>
    </div>
    <div class="card-actions">
      <button class="btn-outline btn-sm" type="button" data-toast="cartToast">Add</button>
      <button class="btn-ghost btn-sm" type="button" data-open="quickView">Quick view</button>
    </div>
  </article>
</div>

<div class="overlay">
  <div class="modal" id="quickView" data-dialog role="dialog" aria-modal="true" aria-labelledby="quickViewTitle">
    <div class="modal-header">
      <h2 class="modal-title" id="quickViewTitle">Quick view</h2>
      <button class="dialog-close" type="button" data-close aria-label="Close">…</button>
    </div>
    <div class="modal-body">…</div>
    <div class="modal-footer"><button class="btn-outline" type="button" data-close>Close</button></div>
  </div>
</div>

<div class="toast-region" role="status" aria-live="polite">
  <div class="toast toast-success" id="cartToast" hidden>
    <span class="toast-icon" aria-hidden="true"><svg>…</svg></span>
    <div class="toast-body"><p class="toast-title">Added to cart</p></div>
    <button class="toast-close" type="button" aria-label="Dismiss">…</button>
  </div>
</div>

<footer class="footer">
  <div><div class="footer-brand">STORE</div><p class="footer-desc">…</p></div>
  <div><h2 class="footer-heading">Shop</h2><ul class="footer-links"><li><a href="#">All products</a></li></ul></div>
  <div class="footer-bottom"><span>&copy; 2026 STORE</span></div>
</footer>