Web Components

Use these framework-agnostic custom elements to render Open Shop commerce UI on any site.

Available components

Cart Button Cart icon with a live item-count badge. Toggles the cart slideout.

Cart Slideout Slide-in cart panel with line items, quantity controls, and checkout.

Product Details Full product detail page with media, variants, and add-to-cart.

Product List Grid of products with optional collection filtering.

Referral Tracker Capture and persist referral codes from the URL.

Single Product Card Compact card for a single product on any page.

API conventions

• Attributes are listed in kebab-case exactly as used on each custom element.
• If a component has no configurable attributes, the attributes table states None.

Styling

Open Shop web components do not use the Shadow DOM. Their internal markup is rendered into the regular light DOM of your page, which means:

• Your site’s stylesheets apply to them — utility classes flow through normally.
• You can override any internal style by writing CSS selectors that target the elements inside a component. No ::part(), no :host, no piercing tricks required.
• The browser’s developer tools show the full component markup, so you can inspect any element and write a selector against it.

Overriding styles

Write selectors scoped to the custom element tag so your overrides only affect Open Shop components:

/* Restyle the cart button */
os-cart-button button {
  background: #111;
  color: #fff;
  border-radius: 9999px;
}

/* Restyle product cards inside the product list */
os-product-list .product-card {
  border: 1px solid #e5e7eb;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

If a rule isn’t applying, check specificity first — Open Shop’s own styles are plain class selectors, so a slightly more specific selector (or one extra class) is usually enough. Avoid !important unless you’ve ruled out specificity as the cause.

Theming with CSS variables

Most visual styling is exposed through --os-* CSS custom properties, so you can re-theme components without writing element selectors. Set them anywhere that cascades to the component — :root, a wrapper element, or the custom element tag itself:

:root {
  --os-primary: #ff5a5f;
  --os-cart-btn-radius: 9999px;
}

Each component page lists its own variables. The global tokens below are inherited by every component, and most component-specific variables fall back to them — so overriding these five re-themes the whole UI at once:

CSS variable	Default
--os-foreground	#020617
--os-muted-foreground	#64748b
--os-primary	#5eb3e4
--os-primary-foreground	#fafafa
--os-border	#e2e8f0