Style the widget

The widget follows the cart settings your shop saved in the admin. You have two ways to change them from the page.

Override the settings at runtime

Pass any subset of the cart settings to setSettings. Keys you omit keep their value.

Restyle the widget
onReady((cart) => {
  cart.setSettings({
    accentColor: '#701eff',
    fontStyle: 'Inter'
  })
})

onReady is the helper from Wait for the widget.

Style it from your own CSS

The widget turns the settings into CSS custom properties, --accent and the like, and writes them on its container as inline styles. Your page can override a property with a rule on #subbly-cart-widget. Inline styles win over a stylesheet, so a property the settings do set needs !important; a property whose setting is empty, or a base token such as --gray-100, does not.

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

Do not style the widget through its component class names. They are hashed at build time and change between releases. Every property is on CSS variables, and the palette they fall back to is on Base tokens.