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 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 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 button and button. |
| Buttons | Secondary Button | Buttons used to perform a secondary action in a widget. Samples include the button in the mini-cart, the button in the shopping cart, and the 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 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 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. |