TABLE OF CONTENTS
Dynamic Styles Introduction
Navigate to: CMS > Store Experience > choose your store > General Settings
In General Settings, you can add and manage Dynamic Styles. Dynamic Styles allow you to customize the look and feel of your web store by adding CSS code directly in this section.
When using the Starter Theme, a number of color and style attributes can be modified through Dynamic Styles.
After adding your Dynamic Schema, you must publish the CMS content from either Stores or the Store Experience module for the changes to take effect.
Starter Theme - Dynamic Styling Variables
Note: This article contains additional comments that are not visible in the Store Experience area. These comments have been added here to provide context and help explain how the variables are organized.
:root {
/* header variables */
--header-bg: #ffffff;
/* footer variables */
--footer-bg: #f3f4f6;
--footer-primary-text: #000000;
--footer-secondary-text: #454545;
/* navigation variables */
--navigation-bar-bg: #f3f4f6;
--navigation-text: #605458;
/* button variables */
--primary-btn-bg: #000000;
--secondary-btn-bg: #ffffff;
--primary-btn-text: #ffffff;
--secondary-btn-text: #000000;
--btn-border: #000000;
--btn-border-radius: 0.25rem;
/* card variables */
--card-border: #e2e8f0;
--card-radius: 0.25rem;
/* input variables */
--input-border: #d3d3d3;
--input-radius: 0.25rem;
/* extra variables */
--mega-menu-bg: #f1f1f1;
--mega-menu-link: #605458;
--ticker-bg: #000000;
--loader-color: #000000;
/* general variables */
--primary: #000000;
--secondary: #ffffff;
--accent: #000000;
--success: #22c55e;
--error: #ef4444;
--hover: #3b82f6;
--link: #1e40af;
--breadcrumbs-text: #9a9a9a;
--separator: #9ca3af;
}
Header Variables
--header-bg: #ffffff;
Defines the background color for the site header.
Footer Variables
--footer-bg: #f3f4f6;
Background color of the footer.
--footer-primary-text: #000000;
Used for footer heading/label text (may vary based on Page Builder configuration).
--footer-secondary-text: #454545;
Text color for secondary buttons in the footer.
Navigation Variables
--navigation-bar-bg: #f3f4f6;
Top navigation bar background color.
--navigation-text: #605458;
Text color for top navigation, header buttons, and the cart icon.
Button Variables
--primary-btn-bg: #000000;
Background color for primary action buttons (e.g., “Add to Cart,” “Call to Order”).
--secondary-btn-bg: #ffffff;
Used for secondary buttons such as “Continue Shopping” or “Checkout.”
--primary-btn-text: #ffffff;
Text color for primary buttons.
--secondary-btn-text: #000000;
Text color for secondary buttons.
--btn-border: #000000;
Border color for all buttons.
--btn-border-radius: 0.25rem;
Defines the corner radius for buttons.
Card Variables
--card-border: #e2e8f0;
Border color for product listing cards (PLP).
--card-radius: 0.25rem;
Corner radius for product cards.
Input Variables
--input-border: #d3d3d3;
Border color for input fields, such as the quantity box.
--input-radius: 0.25rem;
Corner radius for input fields.
Extra Variables
--mega-menu-bg: #f1f1f1;
Background color of the shop’s department mega menu.
--mega-menu-link: #605458;
Link color for categories and subcategories in the mega menu on hover.
--ticker-bg: #000000;
Background color for the homepage ticker.
--loader-color: #000000;
Color of the page loader, if displayed.
General Variables
--primary: #000000;
Used for category and brand heading text, such as on PLP and PDP pages.
--secondary: #ffffff;
Secondary background color, commonly used as a background fill.
--accent: #000000;
Color used for radio buttons and checkboxes.
--success: #22c55e;
Color for success messages and states.
--error: #ef4444;
Used for error states.
--hover: #3b82f6;
Color for links or buttons on hover.
--link: #1e40af;
Link color used on PLP/PDP pages (e.g., category links).
--breadcrumbs-text: #9a9a9a;
Text color for breadcrumb navigation.
--separator: #9ca3af;
Color for separator lines below categories, brands, products, widgets, etc.
References
Hex Color Reference
Hex colors are a way of writing colors on the web using a special code. Each color is written as a six-digit code that starts with a # symbol, for example #FFFFFF for white or #000000 for black. The code is made up of numbers and letters, and it tells the computer how much red, green, and blue to mix together to create the color. Hex codes are helpful because they make sure colors look the same on every screen, no matter what device or browser someone is using.
The following are the starter theme default colors as seen above:
#ffffff – White (used for the header background, secondary background, secondary buttons, and primary button text)
#f3f4f6 – Light Gray (used for the footer background and navigation bar background)
#000000 – Black (used as the primary brand color, button backgrounds, borders, accents, loader/ticker backgrounds, and footer headings)
#454545 – Dark Gray (used for secondary footer text)
#605458 – Muted Gray-Brown (used for navigation text, header buttons, cart icon, and mega menu links)
#e2e8f0 – Light Gray (used for product card borders)
#d3d3d3 – Medium Gray (used for input borders such as quantity boxes)
#f1f1f1 – Very Light Gray (used for mega menu background)
#22c55e – Bright Green (used for success messages and states)
#ef4444 – Bright Red (used for error states)
#3b82f6 – Bright Blue (used for hover states on links and buttons)
#1e40af – Deep Blue (used for links, especially on PLP/PDP pages)
#9a9a9a – Neutral Gray (used for breadcrumb text)
#9ca3af – Cool Gray (used for separators and dividing lines)
Radius Reference
In web design, a radius is a setting that controls how rounded the corners of an element (like a button, card, or input box) appear. A border radius value tells the browser how much curve to apply to each corner. A radius of 0 means sharp square corners, while larger values (like 1rem or 50%) create more rounded edges—up to a circle or oval shape. Radiuses help give websites a softer, more modern look and are commonly used for buttons, cards, and form fields.
- --btn-border-radius: 0.25rem;
Gives buttons slightly rounded corners for a modern, clickable look. - --card-radius: 0.25rem;
Applies the same slight rounding to product cards on listing pages. - --input-radius: 0.25rem;
Adds rounded edges to input fields, such as quantity boxes or forms.