Use the Spire CMS Style Guide
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 typography of the level one heading 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 on your website. Most colors also have a Contrast option to display text or iconography when your primary color is the background.
Note
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 color, font weight, size, line height, styling (underlining and italics), and text transformations (uppercase or lowercase). 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. The Rich Text Editor also 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 lets you update static content and site elements without a partner or developer, 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 drop-down 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. You can also Format based on language, letting the date picker match the currently selected language.
- 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 those 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 by entering hexcode or RGB values. You can also set color transparency using the Alpha channel slider or by 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 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 Undo to undo your changes. You can undo changes to the first change you made during your current session. Click Redo 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. If you want to revert the customizations you made, you can undo this selection before saving.
How styles are applied
The Style Guide uses the theming principles of the Mobius component library to apply changes made to related components globally. Your Style Guide changes do not apply to elements outside 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. Additionally, if your partner includes a post-style guide theme in your site, the theme overrides the values in the Style Guide.