Start with a coherent preset
Open Website Editor > Style. Choose a theme whose hierarchy and mood fit your products, then adjust only the colors and fonts that make the brand clearer. A restrained palette usually gives product photography more room to work.
Plan availability: Theme presets and theme customization, including colors and fonts, are Free in the active production matrix. Custom CSS is a separate Scale feature. Pro and Legacy Lifetime inherit their configured access.
Save the style in a safe order
Theme colors and typography live in the Style panel; advanced Custom CSS remains a separate control.
- Select a theme and choose Apply Theme.
- Review Colors & Fonts, including the primary, accent, background, text, heading, and body choices.
- Choose readable Heading Font and Body Font combinations. Decorative fonts should not reduce scanability.
- Save with Save Customizations, then switch the live preview through desktop, tablet, and mobile.
- Use Reset to Defaults when experimentation creates a confusing contrast or inconsistent visual hierarchy.
What customers see
Customers see color and type choices on buttons, headings, product cards, navigation, forms, and checkout. Test the highest-contrast text and the smallest text, not only the large hero heading.
Common problems
- Text disappears on a colored background. Return to the preset or choose a darker text color rather than relying on a shadow.
- The body font is difficult to read. Use a simpler body family and reserve a distinctive font for headings.
- My changes do not appear. Save customizations, wait for the working draft to finish, and hard-refresh the public storefront.
- I need one-off layout changes. Try Structure and Content first; Custom CSS is a Scale control and can affect every page.
Next steps
Keywords
theme customization, Apply Theme, Colors and Fonts, Heading Font, Body Font, Save Customizations, Reset to Defaults, contrast, typography