Style book elements

When you create a style book, you first select the category of the element whose appearance you are customizing. Then, you specify a setting.

This table shows the categories that you can select, the main groupings of elements within each category, and a description of the elements in the grouping.

Category Grouping Description
Main Utility Menu Section at the top of the web page. Contains the My Account menu, currency selector, language selector, etc.
Main Header Contains the company logo and header menu.
Main Main Section between the header and footer. Contains the content that is specific to the page, such as the Product List widget.
Main Footer Section at the bottom of the web page.
Main Alerts Content in the Alerts widget.
Buttons Button Radius Controls the shape of the corners of buttons.
Buttons Primary Button Buttons used to perform the main action in a widget. Samples include Add to Cart button and Checkout button.
Buttons Secondary Button Buttons used to perform a secondary action in a widget. Samples include the View Cart button in the mini-cart, the Continue Shopping button in the shopping cart, and the Cancel button on modal dialogs.
Links Primary Link Links to perform actions. Samples include the Clear Cart and Save Items as Template links in the shopping cart.
Links Secondary Link
Links Tertiary Link
Checkboxes Unchecked Appearance of check boxes when they are not selected. Samples include the product check boxes in the shopping cart and the Compare check box on the product list page.
Checkboxes Checked Appearance of check boxes when they are selected.
Toggles Enabled Toggles to enable or disable functions. An example includes the Customer View toggle.
Font family Font family Fonts used throughout the website. The H1-H6 font family setting is applied to headings, for example the My Account heading on the Dashboard page. The general font family setting is applied to text that is not styled as a heading.

If a font name contains more than one word, enclose it in single quotations, for example 'Times New Roman'. You can specify fallback font information in a comma-separated list.

Font Color Font Color Colors of fonts used throughout the website.
Font Weight Font Weight The thickness of the fonts.
Font Size P and H1 - H6 Font Size The sizes of the standard fonts. These settings correlate with the font settings in the Font Family, Font Color, and Font Weight categories.
Font Size Input Font Size Mobile The size of the font in fields on mobile devices. On desktops and tablets, the P font size is used in input fields.
Font Size Price Font Size Small, Price Font Size Large, Price Font Size Discount The size of prices and discounts, for example on the product list page. The Price settings are also used in the Order Summary section of the shopping cart.
Font Size Total Font Size Small and Total Font Size Large
Font Size Address Font Size The font size of the customer's address in the checkout.
Content Boxes Content Box Header Colors used in the context box header. Examples include the Ship From section in the checkout and the dashboard widgets.
Dynamic Menu Dynamic Menu The widths of the main dynamic menu and the sub-menus. An example is the Shop menu.