Shopify's theme architecture exposes color settings through the Theme Editor (Customizer). Most themes provide slots for primary color, secondary color, background, text, button colors, and sale/accent colors. PaletteRx generates the values to fill these slots with an accessible, balanced palette.
How Shopify Themes Handle Color
Each Shopify theme defines its own color settings in the settings_schema.json file. The Theme Editor exposes these as color pickers. Dawn (Shopify's default theme) provides settings for background colors, text colors, button colors, and accent colors across different sections.
The challenge is that every theme structures these settings differently. Some have 4 color slots, others have 20. PaletteRx's role-based export gives you a universal reference: Primary maps to your main brand/CTA color, Secondary to accents, and bases to backgrounds and text.
Exporting from PaletteRx
Select Shopify from the Website Builders section in PaletteRx's export step. The output provides hex values labeled by role along with CSS variables you can inject into your theme's custom CSS.
Applying Colors in Theme Editor
Open Online Store, Themes, Customize in your Shopify admin. Navigate to Theme Settings (the gear icon), then Colors. Map your PaletteRx colors to the available slots: Primary becomes your accent or brand color, Secondary fills the secondary accent slots, Dark Base maps to text colors, and Light Base maps to background colors.
Test across key pages: product pages, collection pages, cart, and checkout. Ensure your button colors have sufficient contrast against their backgrounds (PaletteRx already verified this, but Shopify themes sometimes override button text colors).
Custom CSS for Full Control
For themes with limited color settings, paste PaletteRx's CSS variables into your theme's Additional CSS panel. You can then override any element's color using your palette variables, ensuring consistency even where the theme editor falls short.