Modify theme code

You use the code editing options available within the Theme tab to modify the theme's CSS.

This section applies to Storefront Classic only.

To modify theme code:

1. Open the Theme option on the Design page.
2. Scroll to the Theme CSS section, where all your web store’s themes reside.
3. Select the theme you want to edit.
   The design code window for that Theme CSS opens.
4. Choose to make your edits using any of the following options:
   • The Style Variables option accesses the variables file.
   • The Style Sheet option accesses the full theme Less/CSS.

     Note: Editing the theme code locks the theme UI editor. You can unlock the UI editor by clicking the Restore button to revert to the last version of the theme saved via the theme UI editor, however, you will lose any changes made to the design code.

   • The Additional CSS option appends to the end of the style sheet.

     You can append additional CSS for each individual Theme CSS. The additional code entered is appended to the end of the global style sheet. If you add CSS to this tab and do not modify the code on the Style Variables or Style Sheet tabs, then you are not locked from editing that theme in the theme UI editor.

     A separate custom CSS file exists for each theme.

5. Modify the code as required.
6. Save your changes.

Customize theme bootstrap variables

Your storefront Theme CSS is made up of Bootstrap Less files and widget-specific Less files. You can use the Style Variables option within the Theme CSS to customize, and add to, a theme’s bootstrap style variables. For example, if you would like to change your theme’s viewport sizes, you can copy the Bootstrap variable from your Bootstrap documentation and paste it to the end of the Style Variables file, for instance:

@screen-sm-min: 720px.

See Configure a widget’s style for more information.