Color Settings
Sellzar uses a hybrid color mapping system that separates global main body styling from granular, independent header and footer color configurations.
Color System Philosophy
To provide maximum layout control without bloating Shopify Theme settings, Sellzar splits color customization into two distinct paradigms:
Uses unified global settings for the canvas backdrop, accents, and product components. Dark mode is handled dynamically by system preference overrides or a global class, shifting background tones automatically to prevent merchant setup overhead.
Uses explicit paired settings. Merchants define separate colors for Light and Dark modes. This lets you maintain distinct brand blocks (like a deep, dark header or footer) regardless of the main body's current color state.
1. Main Body Theme Colors
The main body colors configure the background, core branding accents, and standard UI elements (buttons, product lists, swatches) on collection and product pages.
--theme-primary-colorConfigured via Primary Color (default #d5ff34) and Secondary Color (default #2D4375). These variables are used for buttons, interactive swatches, badges, and layout markers.
--theme-products-price-colorProvides dedicated panels for title, price, comparison price, and button colors. These are paired with explicit Dark Mode override configurations in the customizer panel to keep product grids legible in dark themes.
2. Header Color Schemes
The header layout contains several sub-bars (Announcement Bar, Top Action Bar, Navigation Bar) which are controlled using dynamic classes and color scheme overrides.
Rather than relying on generic dark-theme fallback backgrounds, the header settings in the Shopify Customizer let you configure explicit light and dark modes:
- Primary Color (
#2e3900) - Secondary Color (
#d5ff34) - Text Color Primary (
#2e3900)
- Dark Mode: Primary Color
- Dark Mode: Secondary Color
- Dark Mode: Text Color Primary
Note: The header component automatically loads the Dark Mode set when the global dark mode toggle is activated.
3. Footer Color Schemes
Sellzar divides the footer system into three sections, allowing for gradient layouts and color transitions.
Controls the call-to-action area or newsletter form background and text. Supports independent light and dark backgrounds.
Defines colors for the background, headings, links, borders, and icons inside the navigation links area.
Configures styling for the bottom bar containing copyright info, payment provider icons, and social badges.
snippets/css-variables.liquid template. If you need to make custom style sheets, you can reference these CSS variables (e.g. var(--theme-primary-color)) directly.