Directly accessing your web store’s code from the Code tab means you can make changes to your web store’s code. You can manipulate the code, preview all changes, and publish to your live store.

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 Understand the Layout tab sections.

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 Themes and Stack Templates via the Code menu locks you from the UI editor for that given theme. 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 Site Text you can open the Text Snippets which enable you to change the wording of your web store’s customizable text including messages, labels and help tips.