Customize your theme

You can customize your theme’s background, buttons and navigation tools. You can also customize the typography settings.

This section includes the following information:

• Access basic theme information

• Style your theme’s background

• Style your theme’s buttons and navigation tools

• Customize your theme’s typography setting

• Compile your customized theme

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:

1. On the Design page, click the Theme tab.
2. Click the Theme Compilation tab.
3. Click Build Theme.
4. Click Save to save the compiled changes.