Theme Customizer & Visual Builder
Personalize colors, typography, hero banners, product grids, and layout modules with real-time viewport preview
The Visual Customizer Workspace
Navigate to Storefront > Visual Builder (`/storefront/builder`) in your merchant dashboard. The interface is engineered as a high-productivity split-screen studio:
- Left Configuration Panel: Structured tabs covering all visual and functional components of your active storefront theme.
- Center Live Canvas: Real-time, sandboxed rendering of your storefront that reacts instantly as you adjust color pickers, typography selectors, or banner toggles.
- Top Utility Bar: Device viewport switchers, direct link to live storefront, reset to template defaults, and the one-click "Save & Publish" button.
Multi-Device Viewport Preview (Desktop, Tablet, Mobile)
Because mobile shoppers represent the vast majority of online transactions, you must ensure your store looks flawless across every screen size before publishing changes.
Use the three viewport buttons at the top of the canvas to toggle preview modes on the fly:
| Mode | Canvas Width | What to Inspect |
|---|---|---|
| Desktop | 100% full-width view | Multi-column mega menus, full hero banner aspect ratios, 4-column product grids, and wide footer layouts. |
| Tablet | 768px medium viewport | Adaptive 2-column or 3-column product cards, tablet header navigation, and compressed hero banner typography. |
| Mobile | 375px compact smartphone | Sticky bottom navigation bar, single or 2-column product cards, tap targets, mobile drawer menu, and announcement banner text wrapping. |
Color Tokens & Curated Palette Presets
Teyweb uses a CSS custom property (variable) design token architecture. When you change a brand color, every button, badge, link, active tab, and focus ring updates consistently across all storefront templates.
You can fine-tune individual hex codes or click any of our curated one-click color presets:
| Preset Name | Primary Tone | Accent Shade | Recommended Brand Style |
|---|---|---|---|
| Classic Blue | #2563EB (Royal Blue) | #F59E0B (Amber Gold) | Corporate, electronics, professional apparel, general retail. |
| Emerald Luxury | #059669 (Deep Emerald) | #D97706 (Warm Ochre) | Luxury jewelry, organic skincare, natural botanicals, high-end crafts. |
| Midnight Slate | #0F172A (Obsidian Slate) | #38BDF8 (Sky Cyan) | Tech gadgets, streetwear, modern menswear, premium hardware. |
| Sunset Ochre | #D97706 (Warm Amber) | #DC2626 (Vibrant Crimson) | Artisanal crafts, African fashion, food and spices, lifestyle goods. |
| Crimson Velvet | #E11D48 (Rose Crimson) | #8B5CF6 (Royal Purple) | Beauty, cosmetics, evening wear, boutique perfumes. |
| Pastel Chic | #8B5CF6 (Soft Violet) | #EC4899 (Pink Fuchsia) | Baby & kids, confectionery, gifts, modern accessories. |
Typography Engine & Google Font Pairings
Typography defines brand personality and reading comfort. The customizer provides curated Google Fonts pairings loaded asynchronously from edge CDN servers to avoid render-blocking delays:
- Modern / Clean: Inter (Body) paired with Plus Jakarta Sans or Outfit (Headings).
- Luxury / Editorial: Playfair Display, Cormorant Garamond, or Merriweather paired with clean sans-serif body text.
- Geometric / Tech: Roboto or Poppins paired with Space Grotesk or Nunito.
You can adjust font weights, heading letter-spacing, and text sizes while previewing real product descriptions live on screen.
Homepage Sections Ordering & Visibility
Tailor your storefront homepage layout by reordering and toggling modules with the Move Up and Move Down controls:
Key Takeaways
- Hero Banner: The top promotional slider or video banner.
- Category Slider / Pills: Quick horizontal category navigation allowing shoppers to filter products with a single tap.
- Featured Products: Curated 4 to 12 bestseller showcase.
- Promotional Collections: Seasonal campaign banners (e.g. "Ramadan Essentials", "Black Friday Drops").
- Brand Story / Manifesto: Narrative block explaining your brand heritage and quality promise.
- Verified Customer Reviews: Social proof slider displaying 5-star verified buyer ratings.
- Newsletter Subscription: Email capture card for email marketing outreach.
Product Display, Aspect Ratios & Sorting
Control how your catalog listings appear across collection and search pages:
- Image Card Aspect Ratio: Select Square (1:1), Portrait (4:5, optimal for fashion and clothing), or Wide (16:9, optimal for electronics and appliances).
- Image Fit Mode: "Cover" fills the card completely; "Contain" ensures full product borders are visible without cropping.
- Default Catalog Sorting: Choose between Newest Releases, Most Popular, Price: Low to High, Price: High to Low, or Alphabetical (A-Z).
- Stock Level Indicators: Toggle low stock warning badges (e.g. "Only 3 left in stock!") to drive purchase urgency.
Saving, Publishing & Resetting Defaults
As you make changes, the live preview updates immediately in memory without modifying your public store.
When you are ready, click "Save & Publish" in the top action bar. Changes propagate across edge CDN nodes in seconds.
If you ever want to revert your styling back to the original theme defaults, click the "Reset to Defaults" button to restore factory layout and colors.
Was this guide helpful?
Help us improve our merchant documentation by sharing your feedback.