You can make changes to your web store’s code by directly accessing it from the Code tab. From here you are able to manipulate the code, preview all changes, and publish to your live store. You can also click the Download Source button to download the widget file for each widget instance.

Note: All web store customer facing customizations are made via the Layout and Theme menu tabs.

Within the Code tab’s Widget Templates you can edit each widget’s code. Widget templates are in HTML format and widget style sheets are in LESS/CSS format. There is also a Widget Settings icon in the header row above each of the widget templates and style sheets. From here you can configure your widgets and/or elements as described in the Design Your Store Layout chapter.

Note: After editing the Product Recommendations Widget, Header Widget, Cart Shipping Widget and Product Details Widget via the Code menu, the UI editor for that widget may be locked. This occurs when the code edits are incompatible with the UI editor. You can unlock the UI editor by reverting to the last version saved by the system, therefore losing any changes made to the design code.

Within the Code tab’s Stack Templates you can also edit the code in HTML format and the widget style sheets in LESS/CSS format. In addition to these options there is also a Style Variables tab where you can edit the color settings and text alignment per progress tracker instance.

Within the Code tab’s Theme CSS you can edit the Style Variables tab related to color, size, alignment, etc., and the widget style sheets in LESS/CSS format.

Note: Editing the theme via the Code menu locks the theme UI editor. Editing the stack via the Code menu locks the stack settings in the UI editor. You can unlock the UI editor by reverting to the last version saved by the system, therefore losing any changes made to the design code.

Within the Code tab’s Advanced options you can open the Text Snippets segment which enables you to change the wording of your web store’s customizable text. This can include messages, labels, and help tips. Refer to Customize your store’s text for further details. You can also choose which widgets and stacks you wish to hide/display in the Component Selection segment, as described in Customize your component library widgets. Within Advanced options you can also choose to Import Layouts and Export Layouts to import and export files containing layouts and widget instances. For details on using this feature you can refer to the Extending Oracle Commerce Cloud Service guide.