Introduction
You can customise the appearance of the web components to match your branding in two ways:
- Dashboard settings — Use the Customisation page in Settings > Web Components to set colours, card styles, border radius, and more — no code required.
- CSS overrides — For more control, add custom CSS to your website using CSS variables and CSS parts (described below).
Most stores only need the dashboard settings. CSS overrides are optional and recommended only if you need fine-grained control that goes beyond what the dashboard offers. If you do use CSS, ask your web developer for help.
-
CSS Variables - For simple changes like colors, border radius, and font size. Override a few variables and all components update automatically. This is the quickest way to match your brand colors.
-
CSS Parts - For more in-depth control over individual elements within components. Use the
::part() selector to target specific buttons, icons, text, and other elements with full CSS flexibility.
Most sites only need CSS variables. Use parts when you need fine-grained control over specific elements.
CSS Variables
You can override the default colors, border radius, and font size used by all web components by setting CSS custom properties (variables) on your page. These variables are defined on the :host selector and can be overridden globally.
Example
:root {
--marzipan-color-primary: #8b5cf6;
--marzipan-color-primary-hover: #a78bfa;
--marzipan-radius: 0.5rem;
}
Color Variables - Primary
| Variable | Default | Description |
|---|
--marzipan-color-primary | #3b82f6 | Primary brand color |
--marzipan-color-primary-hover | #60a5fa | Primary color on hover state |
Color Variables - Secondary
| Variable | Default | Description |
|---|
--marzipan-color-secondary | #e5e7eb | Secondary background color |
--marzipan-color-secondary-hover | #d1d5db | Secondary color on hover state |
| Variable | Default | Description |
|---|
--marzipan-color-button-border | transparent | Border colour for primary buttons |
--marzipan-color-button-border-hover | transparent | Border colour for primary buttons on hover |
--marzipan-color-secondary-border | transparent | Border colour for secondary buttons |
--marzipan-color-secondary-border-hover | transparent | Border colour for secondary buttons on hover |
Color Variables - Text
| Variable | Default | Description |
|---|
--marzipan-color-text | #111827 | Primary text color |
--marzipan-color-text-muted | #6b7280 | Muted/secondary text color |
--marzipan-color-text-inverse | #ffffff | Inverse text color for dark backgrounds |
Color Variables - Backgrounds
| Variable | Default | Description |
|---|
--marzipan-color-bg | #ffffff | Primary background color |
--marzipan-color-bg-muted | #f9fafb | Muted background color |
--marzipan-color-bg-overlay | rgba(107, 114, 128, 0.4) | Overlay background with transparency |
Color Variables - Borders
| Variable | Default | Description |
|---|
--marzipan-color-border | #d1d5db | Standard border color |
--marzipan-color-border-muted | #e5e7eb | Muted border color |
Color Variables - Status
| Variable | Default | Description |
|---|
--marzipan-color-error | #ef4444 | Error state color |
--marzipan-color-error-bg | #fef2f2 | Error background color |
--marzipan-color-success | #22c55e | Success state color |
--marzipan-color-success-bg | #f0fdf4 | Success background color |
--marzipan-color-warning | #f59e0b | Warning state color |
--marzipan-color-warning-bg | #fffbeb | Warning background color |
Color Variables - Badges
| Variable | Default | Description |
|---|
--marzipan-color-badge-bg | #ffedd5 | Badge background color |
--marzipan-color-badge-text | #9a3412 | Badge text color |
| Variable | Default | Description |
|---|
--marzipan-color-input-bg | #ffffff | Input field background color |
--marzipan-color-input-disabled-bg | #f9fafb | Disabled input background color |
Border Radius Variables
| Variable | Default | Description |
|---|
--marzipan-radius | 0.375rem | Standard border radius |
--marzipan-radius-lg | 0.5rem | Larger border radius |
Font Size Variable
| Variable | Default | Description |
|---|
--marzipan-font-size | 16px | Base font size for components |
CSS Parts
We use the part attribute to style individual elements within the web components. The format is always web-component::part(element-name).
Examples
This CSS would target the button within the add to cart component, using Tailwind classes that exist with your own CSS styles.
marzipan-addtocart::part(--add-to-cart-button) {
@apply text-white py-3 px-4 uppercase no-underline text-sm hover:bg-zinc-900;
}
marzipan-carticon::part(cart-icon) {
color: #bebebe;
}
part works, we may use the same name for the same part in different components. For example, the --marzipan-spinner part is used in multiple components. However you must target each part separately:
marzipan-cart::part(--marzipan-spinner), marzipan-checkout::part(--marzipan-spinner) {
color: #399383
}
Available parts
Available parts are listed under each component’s Styling section.
