What is Theme Customization in CustomerHub?
While the Brand Center controls global branding (logos, colors, fonts), the Theme settings allow you to fine-tune the detailed presentation of your site, including:
Header styling
Typography overrides
Button styles
Background colors
Section spacing and layout
Additional theme-specific visual options
Theme customization gives you more precise control over how your site looks and feels.
Why Theme Customization Matters
Theme-level adjustments help you:
Ensure brand fonts map correctly to headers and body text
Improve readability and visual hierarchy
Match the exact look of your brand
Adjust elements that the Brand Center doesn’t control
Fine-tune the layout for a cleaner member experience
A well-tuned theme elevates your membership beyond basic branding.
Open Your Theme Settings
Go to Admin → Settings → Theme
This opens your current active theme editor.
Browse the available customization panels
Themes typically include sections for fonts, colors, layout, header settings, and component styling.Confirm your active theme
Theme changes only apply to your current active theme.
Adjust Theme Fonts
Brand Center defines your global fonts, but theme fonts determine how they map to specific areas of your site.
Open the Fonts section of your theme
Update the font used for headers
If you want your secondary font (from Brand Center) to appear on headers, select it here.Update the font used for body text
Use a clean, readable font for paragraphs and labels.Save your changes
Publish the theme
After publishing, refresh your preview to confirm the correct fonts appear.
Adjust Theme Colors
Theme colors allow you to override or fine-tune how your Brand Center colors are applied to specific elements.
Open the Colors section of your theme
Adjust Primary, Secondary, and Accent colors
Adjust Heading colors
Adjust button styles if available
Save and publish your theme
This is especially useful if your brand palette needs contrast adjustments or finer control.
Modify Components, Header, Footer, and Layout Settings
You can adjust visual layout elements to match your brand experience.
Open the Components, Parts, or Layout section of your theme
Click Customize to adjust styling options
Use HTML to adjust spacing, padding, or layout-specific options as allowed
Click SAVE to update the changes and click the X to exit
Save and Publish the theme
Preview your changes
Changes appear after theme publishing completes.
Add Custom CSS or Javascript
CustomerHub allows you to enhance your site’s design and functionality by adding custom CSS and JavaScript to your theme. This is ideal for applying advanced styles, adding custom interactions, or integrating third-party tools.
How to Add Custom Code
Go to Settings → Themes in your Admin Console
Click Edit on your active theme
Use the available tabs to add your code:
CSS Tab → Use the Overrides section to paste your custom CSS
JavaScript Tab → Paste your JS code (no
<script>tags needed)Parts Tab → Customize the Header or Footer for script-based embeds (e.g., tracking pixels or external libraries)
Click Save
Click Publish to apply your changes to the live site
⚠️ Only the “Overrides” section in the CSS tab is editable. Other CSS areas are theme-locked.
Use Cases
Custom CSS: Adjust spacing, fonts, colors, hover effects, or responsive layouts
Custom JavaScript: Add analytics, embed tools, create dynamic UI interactions
Always preview your site after publishing to confirm your changes display correctly.
Publish and Review Your Theme
Click Publish to update the theme
Publishing is required before changes go live.Open your site Preview
Review headers, typography, spacing, and layout.Make any additional adjustments needed
Theme customization is iterative—refine as needed.
Best Practices for Theme Customization
Map your secondary font to header text for strong visual hierarchy
Keep body fonts clean and readable
Use dark, high-contrast header backgrounds for clarity
Adjust button styles for consistent branding
Refresh preview after each theme publish to confirm updates
Avoid using long or oversized fonts in all caps (can look distorted depending on theme)
Troubleshooting / FAQ
“My font changes aren’t showing up.”
Make sure you published the theme and refreshed your preview. Some themes override Brand Center fonts, so theme-level changes are required.
“Why are my headers in all caps?”
This is a theme styling choice. Adjust header typography in the theme font settings.
“My colors don’t match what I set in Brand Center.”
Theme colors may override global colors. Update them in the Theme → Colors panel.
“How do I revert theme changes?”
You can re-select default values or adjust settings manually at any time. Publishing applies the new configuration.