CSS specific to a widget is contained in the /widget/<widget-type>/less
directory:
<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 Cloud provides tools to manage Themes and allows merchants to change the storefront styling.
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:
.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 resave. This process forces compilation of the style.