This article covers the Styles menu selection in the Store Editor app.

The Styles section contains three subsections for most themes: Colors, Fonts, and Custom Styles. Press one to make related edits.

Colors

This subsection contains several pre-selected color palettes defined by your theme. Press one to see how it would affect your website display in the Storefront Panel. To apply it, save. For information on adding a custom palette, see the "Custom Styles" section below.

Fonts

This subsection contains several pre-selected font styles defined by your theme. Press one to see how it would affect your website text in the Storefront Panel. To apply it, save. To add a custom font, see the "Custom Styles" section below.

Custom Styles

This subsection is divided into four headings: General, Headings, Links, and Advanced CSS Editor. Press the one of your choice to make related edits.

General

Edits you make to the Primary Brand Color, Body Background Color, Text Color, and Border Color values appear in the Colors subsection under the Custom label. Any selection you make from the Font menu will appear in the Fonts subsection under the Custom label.

Headings

Edits you make to the Text Color value will appear in the Colors subsection under the Custom label:

Edits you make to the Font Size, Font, and Font Style values will likewise appear in the Fonts subsection under the Custom label.

Links

Edits you make to the Text Color value will appear in the Colors subsection under the Custom label. Edits you make to the Font Style value will appear in the Fonts subsection under the Custom label.

Advanced CSS Editor

This option lets you add custom CSS directly to your theme file. We only recommend this tool to users with extensive experience working with CSS.

For details on other global selections in the Store Editor app menu, see the following articles:

Did this answer your question?