The Spire Style Guide is a tool that lets you change the visual appearance of your Configured Commerce storefront's colors, typography, and components.
Style Guide changes are immediate and affect every element that you are updating. For example, changing the level one heading typography affects every level one heading on your storefront.
What you can change
After launching Spire, you can access the Style Guide to update the site's styling by using available configurations instead of relying on code changes. The Style Guide displays the website's basic configurable styles and contains three main areas - Site Colors, Site Typography, and Site Configurations.
- Site Colors are the colors that display on your website. Most colors also have a Contrast option to display text or iconography when you primary color is the background.
If accessibility is a priority for your project, choose colors that provide adequate contrast on your site. Use the contrast checker to see if your colors meet accessibility standards.
- Site Typography is the website's text styles, including the color, font weight, size, line height, styling (such as underline and italics), and text transformations (such as uppercase or lowercase styling).
You can override text styles using the Rich Text Editor. For example, if your usual body text is black, you can use the Rich Text Editor to change the styling. Additionally, the Rich Text Editor shows the Style Guide's defined text styles.
- Site Configurations are functional elements on your Configured Commerce frontend. The Style Guide groups some options together for consistent styling. For example, Form Field Options includes styles for things like text entry fields, drop-downs, and text areas. Field Set Options work similarly for groups like radio buttons or checkboxes.
Site configuration settings
The Style Guide gives you the ability to update static content and site elements without a partner or developer, thereby minimizing maintenance costs.
- Accordion – Edit the Header Text and Icon Configuration settings.
- Breadcrumb – Update the typography.
- Button – Edit settings such as the color, shape, hover animation, and typography of the Primary Button, Secondary Button, and Tertiary Button.
- Form Field Options – Edit the Border, Size Variant, Error Text, Label Text, and Hint Text settings.
- Field Set Options – Edit the Color, Size Variant, Group Label Text Properties, and Item Label Text Properties settings.
- Checkbox – Set the Icon, Indeterminate Icon, and Indeterminate Color. You can choose whether to Use a direct source for the icons, or select from a pre-existing list.
- Code Injection – Inject code directly into the Head. This option is only available if the Advanced Spire CMS setting is On.
- Date Picker – Edit settings such as the Format, Calendar Type, Year Placeholder, Month Placeholder, Calendar Icon Configuration, and Clear Icon Configuration.
- File Upload – Edit the Button Props and Icon Configuration settings.
- Full Width – Toggle on full width for the Header, Content, and Footer. When toggled On, you can choose to use Solid Color or Image styling.
- Header – Edit Compact Header settings such as Background Color, Link Color, Drop Shadow, and Border.
- Spinner – Set the Color.
- Swatch – Choose a Swatch Type.
- Overflow Menu – Edit the Primary Button and Icon Configuration settings.
- Pagination – Choose the Current Page Variant and edit the Other Buttons settings.
- Tag – Set the Color and edit the Icon Configuration and Typography.
- Tooltip – Edit the Icon Configuration and Typography settings.
Example styling options
- Icon Configuration – You can select a color, source and size for the icon on components. The source is a URL of an icon file. The size is a numeric value in pixels.
- Typography – The typography options are similar to the options for general site typography but apply to specific components. This lets you change the text's color and style more granularly.
- Color – You can specify a color using the color picker field or entering hexcode or RGB values. You can also set colors as a transparency using the Alpha channel slider or entering a percentage in the input box. This creates a lighter and less saturated version of the color.
Update website styles
- Add /contentadmin to the end of your site URL, or access the Content Editor through the Dashboard of the Admin Console.
- Select Style Guide from the tab menu.
- Select the element to change, such as the body text.
- Update the values desired. Your changes are automatically saved to draft. To close the editor, click outside or press Escape on your keyboard.
- You can preview changes by scrolling the staging area until you see the element you are updating.
- Click Save to publish changes.
Undo or redo changes
Click the Undo button to undo your changes. You can undo changes to the first change you made during your current session. Use the Redo button to redo a change that you have previously undone.
Clicking Save publishes the changes and resets the undo/redo actions.
You can also click Reset Styles to Default to return all styles to the default theme. You can undo this selection prior to saving if you would like to revert to the customizations you made.
How styles are applied
The Style Guide uses the theming principles of the Mobius component library to globally apply changes made to related components. Your Style Guide changes do not apply to elements styled outside of the Mobius theme. For example, if your partner has implemented a custom promotional banner with a rounded green button, changing the button shape or color in the Style Guide does not affect this button. Additionally, if your partner includes a post-styleguide theme in your site, the theme overrides the values in the Style Guide.