Configure a widget’s style
You can customize your widgets by configuring the styles they use.
CSS specific to a widget is contained in the /widget/widget-type/less
directory. The following is an example:
<extension-name> : the root folder of your extension
ext.json
widget/
<widget-type>/
widget.json
less/
widget.less
These files are always named widget.less
and any CSS can be added
here. Styling across the storefront is built using Less. A Less file, like
widget.less
, can define style using the Less language or native
CSS. Less files are compiled to make one CSS file.
For the storefront, there are some Bootstrap Less files, common Less files,
and widget-specific Less files, which are compiled together into
storefront.css
. The overall styling of the storefront is known as a
Theme. Commerce provides tools to manage Themes and allows merchants to change the storefront
styling. You can use the Theme Manager, or the Theme CSS to customize variables. See
Customize your theme, or Modify theme code. For information on working
with Bootstrap variables, refer to your Bootstrap documentation.
It is important that any style overridden within a widget Less file only applies to that widget, and does not change the style across the storefront. One way to achieve this is to format the widget’s styles using the Less nested format, for example:
.myWidgetClass {
.myClass {
color: red;
}
.otherClass {
color: blue;
}
}
In this case myWidgetClass
is a class applied at the top-level of the
widget’s template, myClass
is a class created for this widget and
otherClass
is a class that already exists but the styles need to be
modified slightly for this widget.
When this Less file is compiled, it produces CSS in the format shown below, which ensures the changes to the styles for otherClass
are only applied within this widget. The following is an example:
.myWidgetClass .myClass {
color: red;
}
.myWidgetClass .otherClass {
color: blue;
}
Note: If you design a custom style as part of an extension, the Less style may not be compiled immediately after uploading the extension package. If this happens, open the widget’s style in the code editor (on the Design page), make a superficial edit, and then save. This process forces compilation of the style.