Components & page composition

Use the live catalog to inspect a pattern, then keep its CSS, controller and surrounding markup together.

Inspect before copying

Open the component catalog. Search a pattern, expand its source and copy or download the literal markup. The catalog demonstrates populated, empty, validation and disabled states. Its fragments are not standalone commerce applications.

A product card

This snippet comes from the packaged example. The asset path is relative to a storefront page.

<article class="product-card">
  <div class="card-image">
    <a href="product.html?id=canvas">
      <img src="assets/img/sneaker.webp" width="1254" height="1254"
           alt="The Everyday Canvas in Midnight / Ecru" loading="lazy">
    </a>
    <button type="button" data-add="canvas"
            aria-label="Choose options for The Everyday Canvas">+</button>
  </div>
  <div class="card-info">
    <div>
      <h3><a href="product.html?id=canvas">The Everyday Canvas</a></h3>
      <p>Midnight / Ecru</p>
    </div>
    <span>€68</span>
  </div>
</article>

Keep the dependencies

Product cards / quick-add

assets/css/base.css, assets/css/home.css, assets/css/identity.css and assets/css/responsive.css; assets/js/catalog-data.js before store.js. Quick-add also needs the quick-view and bag dialogs and cart status element.

Wishlist

assets/js/wishlist.js, assets/css/wishlist.css and the shared header dropdown markup.

Comparison

assets/js/compare.js, its styles, shared store controls and compare.html.

Forms and catalog specimens

assets/js/components.js initializes the full catalog. Extract a matching controller for an isolated specimen; do not load the entire controller on an unrelated page.

Compose safely

Native details/summary works without a custom controller. Calculated totals and custom state changes do not. Keep labels, error messages and visible focus. Avoid duplicate IDs when pasting forms; update the controller selectors if you rename them.

Use the product preview and shopping behavior reference to check the result.