Design Settings
Use the Design tab in Site Manager > Site Configuration to maintain supported storefront styles and branding without editing every CSS declaration individually.
Visual design settings
The Design tab provides quick navigation among groups of visual settings. Use its text fields and color pickers to maintain supported values for:
- Font families.
- Brand colors.
- Navigation colors.
- Footer colors.
- Button colors.
Review the storefront at supported viewport sizes after changing shared values because one variable can affect multiple pages and controls.
Branding
The branding options maintain the identity displayed by the storefront.
| Setting | Purpose |
|---|---|
| Company Brand Name | Text used for the company identity. |
| Company Logo | Image used as the storefront logo. |
| Favicon | Icon displayed for the site in browser tabs and related browser UI. |
Use production-ready image assets with dimensions and file formats appropriate for the active theme.
Reset and publish changes
The Design tab separates the current editor values from the published stylesheet.
- Select Reset to restore the editor to the current values in
variables.css. - Select Publish to write the edited values to
variables.cssand make them available to the storefront.
Test Design changes outside production before publishing them. Shared variables can affect navigation, buttons, footers, and other components across the site.
Edit CSS variables directly
Use the Code tab to edit variables.css directly when the required supported change is not exposed by a visual field. Reset and Publish apply to this workflow as well.
Keep an accepted copy of variables.css in source control and validate the CSS before publishing. See CyberStore Themes for theme-file planning and promotion guidance.
Global CSS and JavaScript optimization
CyberStore automatically minifies and caches global.css and global.js during application startup. The process assigns a GUID-based identifier to generated filenames, removes outdated generated files, and supplies the current generated assets to the page engine.
If a minified file is unavailable or cannot be generated, CyberStore falls back to the original global file. It can regenerate missing output on a later load. Diagnostic environments may load the original files to support troubleshooting.
Make custom changes in the applicable source file rather than in generated minified output. After publishing a design change, verify the resulting storefront and use browser developer tools only as a confirmation of which generated asset the current page loaded.