Styling the widget

To make the widget blend in with your shop, you can set several variables that will be picked up automatically.

CSS variables

To adjust the styling of the widgets there are several CSS variables available. It's best to place these in your own webshop's CSS, but if this is not an option please contact us so we can include them for you when the script is loaded.

The code below will transform the styling of the widget to the darkmode version.

#ws-widgets-container {
  --ws-default-border-radius: 1em;
  --ws-button-primary-color: white;
  --ws-button-primary-background-color: #da61ff;
  --ws-sidebar-handle-color: white;
  --ws-sidebar-handle-background-color: black;
  --ws-content-color: white;
  --ws-content-background-color: #091a2b;
  --ws-color-advice: #ff44d7;
}

Warning about styling elements via CSS directly

Although it's possible to apply styling by pointing CSS directives to the widget elements directly, this is not supported and might break when we do any future updates.