Customize your theme
You can customize your theme’s background, buttons and navigation tools. You can also customize the typography settings.
This section applies to Storefront Classic only.
This section includes the following information:
Access basic theme information
The About menu tab displays basic information related to any given theme. Such information includes Theme Name, Sites, Theme Notes, and details about the theme from which the current theme has been cloned.
You can edit the Theme Name and Theme Notes as required. You can also make a clone of your theme by clicking the Clone Theme button, regardless of whether or not the theme you are cloning is active.
Clicking the Go to Theme Code button opens that theme’s code for editing.
Style your theme’s background
The Backgrounds menu tab displays details on style, header, footer and navigation settings relevant to any given theme.
Background style settings
These settings allow you to choose an image or background color to be used as the backdrop for your web store.
Use these style settings to adjust the positioning, color settings, and repeat patterns for your web store’s background.
Header row
These settings allow you to choose an image or background color to be used as the backdrop for your web store’s top row header. This refers to the upper part of the header bar running across the top of your web pages. This section contains site links and customer login links.
Use these style settings to adjust the positioning, color settings, and repeat patterns for your Header Top Row.
Footer row
These settings allow you to choose an image or background colors to be used as the backdrop for your web store’s footer. This refers to the bottom section of your web pages.
Use these style settings to adjust the positioning, color settings, and repeat patterns for your Footer.
Style your theme’s buttons and navigation tools
Your theme’s Buttons & Nav Menu tab displays details on style settings, colors, fonts, and sizes when using buttons and navigation colors within your web store.
Buttons
Choose your theme’s button style settings for use throughout your web store. Button style settings include sizes, styles, colors, and fonts for both primary and secondary button types.
Navigation color settings
Choose your theme’s color settings for use throughout your web store’s navigation. Navigation color settings include top level, drop-down, and mobile navigation color settings.
Customize your theme’s typography setting
Choose your theme’s typography settings for use throughout your web store. Typography settings enable you to set up various link colors as well as your default base font settings, and you can add new fonts via an external URL. The Link Color and Base Font Settings can be inherited throughout all heading styles, or you can edit the heading styles and make any changes you require to each one individually.
Compile your customized theme
Themes are compiled automatically. However, you can also compile a theme manually after customization changes have been made, for example when you have added a new widget to a layout, or you have changed a theme’s code by updating a widget/stack Less file. You can also compile a theme manually if a compile build has failed.
To do so:
- On the Design page, click the Theme tab.
- Click the Theme Compilation tab.
- Click Build Theme.
- Click Save to save the compiled changes.
If you have a significant number of sites, you may find that you must wait a considerable amount of time for all pending automatic theme compilations that occur when you publish your changes. You can use the following endpoints to disable automatic theme compilation, where themes are compiled automatically when changes occur. For example when updates to stacks, slots, or page layouts are updated.
You can use the Admin API to review and set automatic compilation of themes.
To obtain the compilation settings for themes, issue a GET command to /ccadmin/v1/themes/compilationSettings/getThemeCompilationSettings. A successful response body will contain the compileThemesAutomatically boolean property that indicates if themes will be compiled automatically.
To configure compilation settings for themes, issue a PUT command to /ccadmin/v1/themes/compilationSettings/setThemeCompilationSettings with the compileThemesAutomatically property set to true or false. Setting the property to true indicates that the theme should be automatically compiled. If automatic theme compilation is disabled, you will need to manually compile your themes using the Themes tab of and administration interface before publishing any assets that contain style updates.
Once you have issued a PUT command, a successful response body contains the compileThemesAutomatically property that indicates whether or not the theme will be compiled automatically. Note that if compilation settings are invalid or cannot be saved, the 70030 error, which indicates that one or more of the given compilation settings is invalid, or the 70031 error, which indicates that an error occurred when trying to save the compilation settings, will display.