Online shop CSS customization contract

Use theme settings and supported CSS custom properties first. Use data-shop-* hooks only when a token cannot express the change.

Supported tokens

palette

--color-primary, --color-primary-50, --color-primary-100, --color-primary-200, --color-primary-300, --color-primary-400, --color-primary-500, --color-primary-600, --color-primary-700, --color-primary-800, --color-primary-900, --color-primary-950, --color-accent, --color-accent-50, --color-accent-100, --color-accent-200, --color-accent-300, --color-accent-400, --color-accent-500, --color-accent-600, --color-accent-700, --color-accent-800, --color-accent-900, --color-accent-950

surfacesAndText

--color-background, --color-foreground, --color-surface, --color-surface-variant, --color-surface-elevated, --color-text-heading, --color-text-body, --color-text-muted, --color-text-muted-readable, --color-text-placeholder, --color-text-disabled, --color-text-link, --color-text-link-hover, --color-primary-readable

fields

--color-field-background, --color-field-text, --color-field-placeholder, --color-field-border, --color-field-focus, --color-choice-background, --color-choice-unselected-border, --color-choice-border

borders

--color-border, --color-border-light, --color-border-dark, --border-width-thin, --border-width, --border-width-thick, --radius-sm, --radius-md, --radius-lg, --radius-xl

semantic

--color-semantic-success, --color-semantic-success-light, --color-semantic-success-border, --color-semantic-success-readable, --color-semantic-error, --color-semantic-error-light, --color-semantic-error-border, --color-semantic-error-readable, --color-semantic-warning, --color-semantic-warning-light, --color-semantic-warning-border, --color-semantic-warning-readable, --color-semantic-info, --color-semantic-info-light, --color-semantic-info-border, --color-semantic-info-readable

sections

--header-bg, --header-text, --header-link, --header-link-hover, --header-border, --footer-bg, --footer-text, --footer-link, --footer-link-hover, --footer-border

buttons

--color-btn-primary-bg, --color-btn-primary-text, --color-btn-primary-hover, --color-btn-primary-border, --color-btn-secondary-bg, --color-btn-secondary-text, --color-btn-secondary-hover, --color-btn-secondary-border

typographyAndLayout

--font-family-heading, --font-heading-weights, --font-family-body, --font-body-weights, --font-family-mono, --font-monospace-weights, --spacing-base, --shop-image-aspect-ratio, --shop-image-object-fit

Stable hooks

data-shop-root

Supported values: true.

data-shop-platform

Supported values: ce-shop-next.

data-shop-shell

Supported values: site, checkout.

data-shop-section

Supported values: site-shell, checkout-shell, header, main, footer, mobile-menu, offer-page, offer-detail, offer-grid, offer-list, quantity-selection, booking-time, global-search, search-page, link-card, link-card-list, image-gallery-lightbox.

data-shop-component

Supported values: booking-prices, booking-time, pricing-selectors, price-line-item, quantity-stepper, request-item-card, offer-card, offer-filters, link-card.

data-shop-item

Supported values: offer-list-item, offer-list-link-card, link-card-list-item.

data-shop-action

Supported values: book-now, clear-filters.

data-shop-nav-kind

Supported values: admissions, events, products, vouchers.

Use a listed value to target navigation links for that page kind. The attribute is omitted when a navigation item has no page kind.

data-shop-nav-custom

Supported values: true.

Unsupported selector patterns

[data-route-id]

Internal route IDs can change with routing implementation.

.utility-class

Tailwind utility classes are implementation details and may change without notice.

.parent > :nth-child(...) or other DOM ancestry

DOM structure is not a customization contract.

#generated-id or [data-block-id]

Generated IDs and page-builder record IDs are instance data, not stable hooks.

private data-* attributes not listed as supported hooks

Unlisted attributes can change without notice.

Examples

Change primary actions through a token

:root {
  --color-btn-primary-bg: #0057b8;
}

Style the shop header through a stable hook

[data-shop-section="header"] {
  box-shadow: 0 2px 8px rgb(0 0 0 / 12%);
}

Limit a rule to checkout

[data-shop-shell="checkout"] [data-shop-component="request-item-card"] {
  border-radius: var(--radius-lg);
}