Styling

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.

We use TailwindCSS to style the web components, which are isolated from your global CSS so that they do not affect the rest of your website. There are two ways to customise the styling:

CSS Variables - For simple changes like colours, border radius, and font size. Override a few variables and all components update automatically. This is the quickest way to match your brand colours.
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 colours, 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;
}

Colour Variables - Primary

Variable	Default	Description
`--marzipan-color-primary`	`#3b82f6`	Primary brand colour
`--marzipan-color-primary-hover`	`#60a5fa`	Primary colour on hover state

Colour Variables - Secondary

Variable	Default	Description
`--marzipan-color-secondary`	`#e5e7eb`	Secondary background colour
`--marzipan-color-secondary-hover`	`#d1d5db`	Secondary colour on hover state

Colour Variables - Button Borders

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

Colour Variables - Text

Variable	Default	Description
`--marzipan-color-text`	`#111827`	Primary text colour
`--marzipan-color-text-muted`	`#6b7280`	Muted/secondary text colour
`--marzipan-color-text-inverse`	`#ffffff`	Inverse text colour for dark backgrounds

Colour Variables - Backgrounds

Variable	Default	Description
`--marzipan-color-bg`	`#ffffff`	Primary background colour
`--marzipan-color-bg-muted`	`#f9fafb`	Muted background colour
`--marzipan-color-bg-overlay`	`rgba(107, 114, 128, 0.4)`	Overlay background with transparency

Colour Variables - Borders

Variable	Default	Description
`--marzipan-color-border`	`#d1d5db`	Standard border colour
`--marzipan-color-border-muted`	`#e5e7eb`	Muted border colour

Colour Variables - Status

Variable	Default	Description
`--marzipan-color-error`	`#ef4444`	Error state colour
`--marzipan-color-error-bg`	`#fef2f2`	Error background colour
`--marzipan-color-success`	`#22c55e`	Success state colour
`--marzipan-color-success-bg`	`#f0fdf4`	Success background colour
`--marzipan-color-warning`	`#f59e0b`	Warning state colour
`--marzipan-color-warning-bg`	`#fffbeb`	Warning background colour

Colour Variables - Badges

Variable	Default	Description
`--marzipan-color-badge-bg`	`#ffedd5`	Badge background colour
`--marzipan-color-badge-text`	`#9a3412`	Badge text colour

Colour Variables - Inputs

Variable	Default	Description
`--marzipan-color-input-bg`	`#ffffff`	Input field background colour
`--marzipan-color-input-disabled-bg`	`#f9fafb`	Disabled input background colour

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;
}

And this CSS would target the cart icon of the cart icon component using traditional CSS.

marzipan-carticon::part(cart-icon) {
    color: #bebebe;
}

Because of how the web components are structured and how 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.

Get Started

Components

Plugins

Introduction

CSS Variables

Example

Colour Variables - Primary

Colour Variables - Secondary

Colour Variables - Button Borders

Colour Variables - Text

Colour Variables - Backgrounds

Colour Variables - Borders

Colour Variables - Status

Colour Variables - Badges

Colour Variables - Inputs

Border Radius Variables

Font Size Variable

CSS Parts

Examples

Available parts

​Introduction

​CSS Variables

​Example

​Colour Variables - Primary

​Colour Variables - Secondary

​Colour Variables - Button Borders

​Colour Variables - Text

​Colour Variables - Backgrounds

​Colour Variables - Borders

​Colour Variables - Status

​Colour Variables - Badges

​Colour Variables - Inputs

​Border Radius Variables

​Font Size Variable

​CSS Parts

​Examples

​Available parts

Introduction

CSS Variables

Example

Colour Variables - Primary

Colour Variables - Secondary

Colour Variables - Button Borders

Colour Variables - Text

Colour Variables - Backgrounds

Colour Variables - Borders

Colour Variables - Status

Colour Variables - Badges

Colour Variables - Inputs

Border Radius Variables

Font Size Variable

CSS Parts

Examples

Available parts