Custom CSS
Overriding theme styles without editing core files.
Updated 2026-05-09
The simplest way to customize visuals without forking the theme.
Where to add it
Theme settings → Custom CSS (text area). Whatever you paste is appended at the end of the global CSS, so it overrides theme rules without specificity tricks.
Avoid editing files in
assets/. Custom CSS in settings survives theme updates; file edits don't.
CSS variables reference
The colour tokens are scheme-aware — they resolve to whichever color_scheme is active on the element's section / parent. So var(--color-accent) inside a .color-scheme-3 block uses scheme 3's accent, automatically.
Colour & surface
| Token | Purpose |
|---|---|
--color-background | Active scheme background |
--color-foreground | Active scheme text |
--color-accent | Active scheme accent |
--color-link | Active scheme link colour |
--color-border | Active scheme border / divider |
--color-overlay | Modal / drawer backdrop tint |
--color-text-secondary | Muted secondary text |
--color-page-background | Document body background (independent of any scheme) |
Motion
| Token | Purpose |
|---|---|
--motion-duration | Global transition duration. Resolves to 0ms when motion_enabled is off. |
--motion-ease, --ease | Global easing curves |
Shadows
| Token | Purpose |
|---|---|
--shadow-card | Default card elevation |
--shadow-card-hover | Card elevation on hover (when "Lift cards on hover" is on) |
--shadow-drawer | Cart drawer, quick view, dropdown panels |
Radius
| Token | Purpose |
|---|---|
--radius-button | Buttons |
--radius-input | Form inputs + <select> |
--radius-badge | Badges |
--radius-card | Product cards |
--radius-collection-card | Collection cards |
--radius-blog-card | Blog cards |
--radius-image | Image blocks |
--radius-drawer | Cart drawer, quick view, mega menu |
Layout & header geometry
| Token | Purpose |
|---|---|
--container-max | Boxed container max-width |
--page-gutter | clamp(20px, 4vw, 80px) horizontal page padding |
--header-height | Visible header bar (measured at runtime) |
--header-group-height | Full header group height |
--announcement-height | Announcement bar alone — drives sticky offset |
Typography
| Token | Purpose |
|---|---|
--font-heading-family, --font-body-family, --font-nav-family, --font-caption-family | Active font roles |
--font-size-h1 … --font-size-h6 | Per-tag heading sizes |
--font-size-md, --font-size-sm, --font-size-label, --font-size-caption | Body / small / label / caption scale |
--letter-spacing-nav, --letter-spacing-label, --letter-spacing-button | Tracking values |
--tt-nav, --tt-label, --tt-button | Uppercase toggles — resolve to uppercase or none |
Spacing
| Token | px |
|---|---|
--sp-1 | 8 |
--sp-2 | 16 |
--sp-3 | 24 |
--sp-4 | 32 |
--sp-5 | 48 |
--sp-6 | 64 |
--sp-7 | 80 |
--sp-8 | 120 |
Per-section scheme classes
Each section gets a .color-scheme-N class wrapping its root, set by the section's color_scheme picker. To scope custom CSS to only sections set to a given scheme:
.color-scheme-3 .my-custom-block {
border: 1px solid var(--color-border);
}
That rule paints --color-border from scheme 3 wherever the block appears, and is inert in sections using any other scheme.
Body class reference
Targeting <body> is the easiest way to scope by global style — handy because Shopify's section grouping makes element-level targeting brittle.
| Class | Set by |
|---|---|
style-button--<style> | Primary button shape |
style-card--<style> | Product card style |
style-card-align--<align> | Product card text alignment |
style-collection-card--<style> | Collection card style |
style-collection-card-align--<align> | Collection card alignment |
style-blog-card--<style> | Blog card style |
style-blog-card-align--<align> | Blog card alignment |
style-input--<style> | Form input variant (underline / bordered / filled / filled-pill) |
style-shadow-hover | Present when "Lift cards on hover" is on |
header-is-sticky | Present when the header has the sticky setting on |
template-<name>, template-<name>--<suffix> | Shopify standard, for per-template overrides |
Common overrides
/* Tighter section padding everywhere */
.shopify-section { --pad-top: 48px; --pad-bottom: 48px; }
/* Wider lookbook on desktop */
@media (min-width: 1200px) {
.lookbook__frame { padding: 0 var(--sp-5); }
}
/* Custom focus outline using the active scheme's accent */
:focus-visible {
outline: 2px solid var(--color-accent);
outline-offset: 2px;
}
/* Heavier shadow for product cards on a specific scheme */
.color-scheme-2 .product-card { box-shadow: var(--shadow-card-hover); }
Tips
- Use
:where()to keep your specificity flat —:where(.section-name) {}has zero specificity, easy to override later. - Test changes in preview mode before publishing.
- Keep custom CSS under ~200 lines. If it's longer, commission a proper theme code change.