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.