CSS specific to the widget can be added under the widget directory:

<WIDGET TYPE> : the root folder of your widget
     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 Storefront, there are some bootstrap Less files, common Less files, and widget Less files, which are compiled together. The overall styling of the Storefront is known as a Theme. Oracle Commerce Cloud Service 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:

#myWidgetId {
  .myClass {
    color: red;
  }

  .otherClass {
    color: blue;
  }
}

In this case ‘myWidgetId’ is an id 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 will produce CSS in the format shown below, which ensures the changes to the styles for ‘otherClass’ are only applied within this widget:

#myWidgetId .myClass {
  color: red;
}

#myWidgetId .otherClass {
  color: blue;
}

Note: If you design a custom style as part of an external 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 tab) and make a superficial edit, then resave. This will force compilation of the style.