Appearance
Customise the look and feel of your storefront from Admin Dashboard → Appearance. Changes take effect immediately after saving — no code editing required.
The Appearance panel is organised into five tabs: Branding, Homepage, Colors, Typography, and Advanced.
Branding
Control your site's logo, favicon, and related display options.
Logo
Upload your main logo using the upload button. This logo appears in the site header on every page. Supported formats: PNG, JPG, SVG, WebP.
- Logo Max Width — Drag the slider to constrain how wide the logo renders (in pixels). Leave at Auto to let the logo display at its natural size.
- Logo Alt Text — The text read by screen readers and shown if the image fails to load. Defaults to your site name if left blank.
Dark Mode Logo
If your logo doesn't look good on dark backgrounds, upload a separate version here. It will automatically be served to visitors using dark mode. Leave blank to use the main logo for both modes.
Favicon
The small icon displayed in browser tabs and bookmarks. Recommended size: 32×32 px or 64×64 px PNG.
Homepage
Show, hide, and reorder the sections that appear on your public homepage.
Each section card displays:
- A toggle (on/off) to show or hide that section entirely.
- A drag handle on the right — drag cards up or down to change the order sections appear on the page.
- An item count field (where applicable) to control how many items are listed (e.g. how many products or blog posts to show).
Click Save when you are happy with the arrangement.
| Section | What it shows |
|---|---|
| Hero Banner | The main banner / headline area at the top of the page |
| Latest Products | A grid of your most recently published products |
| Latest Blog Posts | A row of recent blog articles |
Colors
Fine-tune the colour palette used across the frontend. Colours are grouped into three sections:
Brand Colors
| Setting | Where it's used |
|---|---|
| Primary | Buttons, links, active states, highlights |
| Primary Dark | Hover state of primary buttons |
| Accent | Secondary highlights, badges, decorative elements |
Background & Surface
| Setting | Where it's used |
|---|---|
| Background (light mode) | Page background in light mode |
| Background (dark mode) | Page background in dark mode |
| Surface (light mode) | Card and panel backgrounds in light mode |
| Surface (dark mode) | Card and panel backgrounds in dark mode |
Text & Border
| Setting | Where it's used |
|---|---|
| Text — Primary | Headings and body copy |
| Text — Muted | Secondary / hint text, labels |
| Border (light mode) | Dividers and card outlines in light mode |
| Border (dark mode) | Dividers and card outlines in dark mode |
How to change a colour: Click the colour swatch to open the colour picker, or type a hex code (e.g. #3b82f6) directly into the text field beside it.
Reset to defaults: Each group has a Reset button that restores only that group's colours to the original ChargePanda defaults. Your other groups are not affected.
Typography
Choose the fonts and text sizes used across the storefront.
Font Family
Click a font card to preview and select it. Fonts other than Inter are loaded from Google Fonts automatically — no manual setup needed.
Available choices: Inter (default), Roboto, Poppins, Lato, Open Sans.
Base Font Size
Sets the base text size in pixels. Most body text scales relative to this value.
| Value | When to use |
|---|---|
| 14 px | Compact / information-dense layouts |
| 15 px | Slightly smaller than default |
| 16 px | Default — recommended for most sites |
| 17 px | Slightly more readable |
| 18 px | Large, accessibility-friendly size |
Heading Weight
Controls how bold headings appear across the site.
| Value | Appearance |
|---|---|
| 600 | Semi-bold — lighter, modern feel |
| 700 | Bold — default |
| 800 | Extra bold — strong visual hierarchy |
Advanced
Custom CSS
Paste any CSS you want injected into every frontend page. This is useful for minor style tweaks that aren't covered by the colour or typography settings — for example, adjusting spacing, hiding a specific element, or overriding a font style.
/* Example: make product card titles italic */
.product-card h3 {
font-style: italic;
}WARNING
Custom CSS is injected as-is. Avoid including </style> tags. For large style changes, consider the Colors and Typography tabs first.
Click Save Custom CSS to apply your changes.
Export & Import
Use Export and Import to back up your appearance settings or copy them from one installation to another.
To export: Click Export Settings (JSON). Your browser will download a appearance-export.json file containing all your current colour, typography, homepage, and custom CSS settings.
To import:
- Click Choose File and select a previously exported
.jsonfile. - Click Preview Import. A table will appear showing exactly what will change (current value → imported value). Nothing is applied yet.
- Review the changes. If they look correct, click Apply Changes. To cancel without making any changes, click Cancel.
TIP
Import only updates settings that differ from your current values. Settings not included in the file are left untouched.