Skip to main content

CSS Variables Reference

Wonder Theme uses CSS custom properties (variables) extensively for theming. You can override these in your custom CSS to change colors, typography, spacing, and more without editing theme files.

How to Override Variables​

Global override (all pages)​

Add to Theme Settings > Custom CSS:

:root {
  --border-radius: 12px;
  --gap: 12px;
}

Section-specific override​

Add to a section's Custom CSS field:

.section-{{ section.id }} {
  --color-background: #f5f5f5;
  --color-text: #333333;
}

Colors​

General​

VariableDescriptionDefault source
--color-backgroundPage/section backgroundTheme Settings > Colors
--color-textPrimary text colorTheme Settings > Colors
--color-linksLink colorTheme Settings > Colors
--color-overlayOverlay colorTheme Settings > Colors
--color-overlay-rgbOverlay color as RGB values (for rgba())Auto-generated

Header & Navigation​

VariableDescription
--color-header-textHeader text/icon color
--color-menu-textNavigation menu text
--color-transparent-headerHeader color in transparent mode
--color-announcement-backgroundAnnouncement bar background
--color-announcement-textAnnouncement bar text

Buttons​

VariableDescription
--color-button-primary-backgroundPrimary button background
--color-button-primary-textPrimary button text
--color-button-secondary-backgroundSecondary button background
--color-button-secondary-textSecondary button text
--color-button-secondary-borderSecondary button border

Forms & Inputs​

VariableDescription
--color-input-textInput field text
--color-input-backgroundInput field background
--color-input-borderInput field border
--color-success-backgroundSuccess message background
--color-error-textError message text

Product & Pricing​

VariableDescription
--color-priceRegular price color
--color-sale-priceSale price color
--color-star-ratingStar rating color
VariableDescription
--color-footer-backgroundFooter background
--color-footer-textFooter text

RGB Variants​

Many color variables have an -rgb variant for use with rgba():

/* Use the RGB variant for transparency */
background: rgba(var(--color-overlay-rgb), 0.5);

Typography​

Font Families​

VariableDescription
--font-baseBody/paragraph font family
--font-headlineHeading font family
--font-navigationNavigation menu font
--font-buttonButton text font
--font-pricePrice display font

Font Weights​

VariableDescription
--font-base-weightBody font weight
--font-headline-weightHeading font weight
--font-navigation-weightNavigation font weight
--font-button-weightButton font weight
--font-price-weightPrice font weight

Font Scaling​

Section-level font scaling is applied via multiplier variables:

VariableDescription
--font-headline-scale-deskDesktop heading scale (0-1)
--font-headline-scaleMobile heading scale (0-1)
--font-text-scale-deskDesktop body text scale
--font-text-scaleMobile body text scale

Spacing & Layout​

VariableDefaultDescription
--gap8pxBase spacing unit. Used with calc(var(--gap) * N) throughout
--section-gap-topvariesSection top padding
--section-gap-bottomvariesSection bottom padding
--grid-gapvariesGrid gap between items
--site-max-widthvariesMaximum content width
--site-max-width-bigvariesMaximum width for wide sections
--navbar-height56pxHeader navbar height

Grid Columns​

VariableDescription
--columns-desktopNumber of grid columns on desktop
--columns-mobileNumber of grid columns on mobile
--colsGeneric column count

Border Radius​

VariableDescription
--border-radiusGlobal border radius for containers
--border-radius-buttonButton border radius
--border-radius-button-videoVideo button border radius

Animation & Timing​

Durations​

VariableDefaultDescription
--duration-short100msQuick transitions (hover states)
--duration-default200msStandard transitions
--duration-medium300msMedium transitions
--duration-long500msLonger animations
--duration-extended3sExtended animations (slideshows)

Easing​

VariableDescription
--ease-out-slowCubic bezier easing for smooth deceleration

Hover Effects​

VariableDefaultDescription
--onhover-picture-scale1.05Image zoom scale on hover
--onhover-picture-duration1.5sImage zoom animation duration

Media & Aspect Ratios​

VariableDescription
--aspect-ratioSection/card aspect ratio
--aspect-ratio-portaitPortrait aspect ratio (0.67)
--section-heightMobile section height (fixed height mode)
--section-height-deskDesktop section height (fixed height mode)
--first-slide-ratioMobile aspect ratio of first slide (adapt mode)
--first-slide-ratio-deskDesktop aspect ratio of first slide (adapt mode)
--image-object-positionMobile image focal point
--image-object-position-desktopDesktop image focal point

Icons​

VariableDefaultDescription
--size-iconvariesIcon size (mobile)
--size-icon-deskvariesIcon size (desktop)

Section-Level Variables​

Individual sections set their own variables via inline styles. Common patterns:

Section Spacing​

Every section supports:

--section-gap-top: 40px;    /* Top padding */
--section-gap-bottom: 40px; /* Bottom padding */

Section Colors​

Sections can define independent color schemes:

--color-background: #1a1a1a;
--color-text: #ffffff;
--color-custom-text: #cccccc;
--color-overlay-rgb: 0, 0, 0;
--color-overlay-opacity: 0.4;

Block-Level Variables​

Individual blocks within sections:

--block-color-background: #f0f0f0;
--block-color-text: #333333;
--block-padding-top: 20px;
--block-padding-bottom: 20px;
--block-margin-top: 10px;
--block-margin-bottom: 10px;

Header-Specific Variables​

VariableDescription
--logo-widthMobile logo width
--logo-width-deskDesktop logo width

Examples​

Change global border radius​

:root {
  --border-radius: 16px;
  --border-radius-button: 8px;
}

Speed up hover animations​

:root {
  --onhover-picture-duration: 0.5s;
  --onhover-picture-scale: 1.08;
}

Custom section spacing​

/* Reduce spacing on a specific section */
.section-{{ section.id }} {
  --section-gap-top: 10px;
  --section-gap-bottom: 10px;
}

Override colors for dark sections​

.section-{{ section.id }} {
  --color-background: #111111;
  --color-text: #f5f5f5;
  --color-button-primary-background: #ffffff;
  --color-button-primary-text: #111111;
}
info

CSS variables are defined in assets/settings.css.liquid and layout/theme.liquid. Values are populated from theme settings configured in the Shopify theme editor.