Configurator Custom CSS

* Note that this is beta functionality which can be subject to heavy changes in the future. Your account must be flagged as a beta account. Please notify us if you want to make use of this feature, so we can enable beta features on your account and can take into account your customizations in future releases.

You can write your own CSS to control the markup of our configurator module by supplying your CSS rules on the following page:

Settings -> Integrations -> "Your shop" ->  Addon: Dynamic Configurator -> Custom CSS

Since the configurator uses the Shadow DOM API to render separately from the main DOM tree, you can write simple rules without worrying about rules being leaked outside of the configurator. As an example, you can use the following snippet to apply a yellow background to all input fields:

input { background:yellow; }

You can use your browsers inspector to find the elements you want to apply markup to. In general you'll want to target the elements that have a class name prefixed with ss-

Since the markup of the configurator is written using Tailwind CSS, and the basic markup (colors of the container/buttons/steps) is applied with inline CSS, you may find that you have to override certain elements with an !important flag appended.