---
id: shop-css
title: Online shop CSS customization contract
---

# Online shop CSS customization contract

> Generated from `src/lib/customization/shop-css-contract.json`. Do not edit this file directly.

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

> Security: Custom CSS can load external resources and disclose visitor data such as IP address, referrer, and page context. Use only reviewed HTTPS resources from trusted hosts and account for consent and privacy requirements.

## 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

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

### Style the shop header through a stable hook

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

### Limit a rule to checkout

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