Storefront & Website Builder•Popular•Beginner

Theme Styling: Custom Colors, Typography & Brand Presets

Personalize your storefront design with custom brand color palettes, Google font pairings, card styles, and accessible contrast ratios.

5 min read•Updated 2026-09-18

In This Guide

Select your primary brand accent, secondary highlights, and dark/light background palettes.
Pair professional Google Fonts for headings and body copy with automated web font loading.
Configure corner radii for buttons, product cards, and input fields (Sharp, Rounded, Pill).
Ensure WCAG-compliant color contrast so text remains legible for all shoppers.

Prerequisites

Before configuring this feature, confirm that your store meets the following requirements:

Brand Style Guide:Your brand’s primary HEX color codes and preferred typography styles.

conversora.io/admin/storefront-builder

Click to enlarge

Interface view for this workflow.

1. Configuring Global Brand Colors

Your color palette establishes the mood of your shopping experience. Conversora uses three core color tokens:

Primary Brand Color: Applied to main call-to-action buttons, checkout highlights, and active navigation links.
Secondary Accent Color: Used for sale badges, notification ribbons, and promotional accents.
Surface & Background Color: Defines the backdrop tone (e.g., crisp modern white, warm linen, or sleek midnight dark).

Open Theme Settings

From the admin sidebar, navigate to Website Builder and select 'Theme Styling'.

Path:Admin Sidebar → Website Builder → Theme Styling

Choose or Enter Colors

Click the color picker or input your exact brand HEX codes (e.g., #0F172A).

Path:Theme Palette Panel → Color Pickers

Inspect Contrast Score

Verify that the contrast indicator shows 'Pass / AA' to guarantee readability.

Path:Color Card → Contrast Badge

2. Selecting Typography & Web Fonts

Typography guides the shopper's eye across product titles, descriptions, and pricing tables.

Conversora integrates directly with Google Fonts. You can choose from popular modern pairings such as Inter (clean & modern), Plus Jakarta Sans (tech-forward & crisp), or Playfair Display (editorial & luxury).

Open Typography Tab

Switch to the 'Typography' tab in the Theme Styling panel.

Path:Theme Styling → Typography Tab

Select Heading & Body Fonts

Choose your preferred font families for headlines and body text from the dropdown menus.

Path:Typography Panel → Heading Font / Body Font

Preview & Save

Observe the live font preview in the canvas card and click 'Save Theme'.

Path:Theme Styling → Save Theme

Practical Business Scenarios

How leading merchants implement this functionality in daily operations:

Luxury Jewelry Brand Rebranding

Situation: An artisanal jewelry brand wants their online store to feel sophisticated and editorial.

Best practice: Pair 'Cinzel' or 'Playfair Display' for headings with 'Inter' for body copy, set primary brand color to deep emerald (#064E3B), and choose sharp corner radii for product cards.

Troubleshooting & Common Issues

Diagnose and resolve frequent failure points quickly:

Problem: White text on primary buttons is difficult to read

Why this occurs: The chosen primary brand color is too light (e.g. pastel yellow or bright cyan), failing minimum contrast requirements.

Resolution: Darken the primary color slightly until the contrast badge displays 'AA Passed', or choose a dark text color for buttons.

Frequently Asked Questions

Can I upload custom .woff2 font files?

Enterprise plans support custom corporate font file uploads via Cloudflare R2 storage. Contact support to enable custom font uploads for your organization.