# 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`](/reference/cart-widget/methods#set-settings). Keys you omit
keep their value.

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

`onReady` is the helper from
[Wait for the widget](/developer-resources/cart-widget/install#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.

```css title="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](/reference/cart-widget/theming#css-variables), and the
palette they fall back to is on
[Base tokens](/reference/cart-widget/theming#base-tokens).