Theming

Style the widget with the CSS custom properties it writes on its container.

#subbly-cart-widget { --accent }

The custom properties the widget computes from the cart settings and writes on its container. A property whose setting is empty is not written, and the widget falls back to the base token. To override them from your own CSS, see Style the widget.

Properties

--accentcolor

From accentColor, else the shop's brand colour. Default var(--black).

--accent-alpha-01color

The accent at 10% opacity. Default var(--black-alpha-01).

--accent-alpha-08color

The accent at 80% opacity. Default var(--black-alpha-08).

--accent-fontcolor

Text on the accent. The widget picks dark text on a light accent, white on a dark one. Default var(--white).

--backdrop-bgcolor

From backgroundColor. The screen behind the widget. Default var(--black-alpha-06).

--widget-bgcolor

From widgetBackgroundColor, and a gradient down to widgetBackgroundDarker when that is set. Default #EAEFF3.

--font-primaryfont stack

From fontStyle, in front of the system stack. Default the system stack.

--font-color-primarycolor

From fontColorPrimary. Default var(--black).

--font-color-secondarycolor

From fontColorSecondary. Default var(--gray-600).

--font-color-secondary-alpha-08color

The secondary colour at 80% opacity. Default #464646aa.

--font-color-secondary-alpha-01color

The secondary colour at 10% opacity. Default #4646461a.

--button-border-radiuslength

From buttonStyle, in pixels. Default 8px.

--card-bgcolor

From cardBackgroundColor. Default var(--white).

--card-border-colorcolor

From cardBorderColor. Default #D3D9DE.

--card-border-radiuslength

From cardStyle, in pixels. Default 8px.

--card-divider-colorcolor

From cardDividerColor. Default #D6D1C2.

--card-paddinglength

No setting drives it. Default 14px.

--control-hover-bgcolor

Computed from cardBackgroundColor: a shade darker on a light card, brighter on a dark one. Default var(--gray-125).

--header-heightlength

From headerHeight, in pixels. Default 52px.

--header-bgcolor

From headerBackgroundColor, else widgetBackgroundColor. Default var(--widget-bg).

--header-font-colorcolor

From headerFontColor. Default var(--font-color-primary).

--footer-bgcolor

From footerBackground, else widgetBackgroundDarker. Default var(--widget-bg).

--footer-font-colorcolor

From footerFontColor, else fontColorPrimary. Default var(--font-color-primary).

--input-bgcolor

From inputBackground. Default var(--white).

--input-border-colorcolor

From inputBorderColor. Default var(--gray-300).

--input-font-colorcolor

From inputFontColor. Default var(--black).

--segment-control-bgcolor

From segmentControlBackground. Default var(--accent).

--segment-control-font-colorcolor

Text on the segmented control, computed from its background. Default var(--accent-font).

--cart-button-icon-colorcolor

Icon on the floating cart button, computed from the accent. Default #F9FDFF.

--cart-button-bg, --cart-button-text-colorcolor

Written from accentColor and its computed text colour, but no stylesheet reads them. The floating cart button paints its background with var(--accent). Override the accent to change it.


Override the accent
#subbly-cart-widget {
  --accent: #701eff !important;
  --button-border-radius: 24px !important;
}

.SubblyAppContainer { --gray-100 }

The palette the widget's own styles are built on. No setting changes these. They are declared on the container class .SubblyAppContainer, so a rule on #subbly-cart-widget overrides them without !important.

Tokens

--black, --whitecolor

#000 and #fff.

--black-alpha-01 … --black-alpha-08color

Black at five alpha steps: #0001, #0002, #0004, #0006 and #0008, which is about 7%, 13%, 27%, 40% and 53% opacity.

--gray-100 … --gray-800color

The grey ramp: 100, 125, 150, 175, 200, 250, 300, 350, 375, 400, 450, 500, 600 and 800, from #F7F7F7 down to #1B1B1B.

--blue-700color

#1624A4.

--red-100, --red-200, --red-700color

The error colours: #FCF0ED, #E49D92 and #C92E2E.

--orange-500color

#D35307, for warnings.

--green-200, --green-400, --green-700color

The success colours: #E8F2ED, #82CEA2 and #16A480.

--successcolor

var(--green-700).

--focus-outlinecolor

var(--blue-700). The ring around a focused control.


Match the widget to your own palette
#subbly-cart-widget {
  --gray-100: #f5f3ef;
  --focus-outline: #701eff;
}

Last modified on September 15, 2026