Storefront customization

DZBuild's customizer is a live editor: change a setting on the left, watch the storefront preview update on the right. Every save publishes within seconds.

🎬 Video — full customization walkthrough

Where to find it

• General customize page: Dashboard → Customize (/dashboard/customize) — works for every theme.
• Theme-specific pages (only for themes that need extra options):
  • Digital: /dashboard/customize/digital
  • Prestige: /dashboard/customize/prestige

If your active theme has a dedicated page, go there to find theme-only options like the Digital banner uploader or the Prestige hero overlay opacity.

What you can customize

Section	Controls
Brand	Logo, favicon, OG / social-card image
Colors	Primary, secondary, background, text
Typography	Body font (Cairo, Tajawal, Almarai, Inter, Roboto), optional heading font
Header	Logo position, search bar, cart icon, language switcher
Hero	Image / video / product carousel, headline, sub-headline, CTA button + link target
Banners	1–3 promotional banners, link target per banner
Featured products	Pick which products appear on the homepage
Featured categories	Featured categories block
Footer	Link columns, social icons, payment icons, contact info
Mobile menu	Bottom nav (Digital / Showcase) or hamburger (others)
Cart popup	Copy and translation strings for the slide-in cart
Custom CSS (Pro)	Inject any CSS to override theme defaults

Workflow

1. Open Dashboard → Customize.
2. The left panel has all controls; the right panel shows a live preview.
3. Toggle between desktop and mobile previews at the top.
4. Click Save when happy. Changes go live in ~2 seconds.
5. Use Discard to roll back unsaved changes.

Uploading images from the customizer

Drag-and-drop or click any image control to upload. Behind the scenes, the page calls:

• /dashboard/customize/upload — generic image upload (logo, favicon, OG image).
• /dashboard/customize/digital/upload-banner — Digital theme's dedicated banner uploader.

Images are stored on our CDN and served via cdn.dzbuild.app with on-the-fly resizing.

Reset to defaults

If a customization session goes sideways, Dashboard → Customize → Reset (/dashboard/customize/reset) restores the active theme's defaults. Your products, orders and other data are not affected — only the look-and-feel of the storefront.

Theme-specific options

Each theme exposes a small set of theme-only knobs. Highlights:

• Digital — hero variant (image / video / carousel), card border radius, mobile bottom-nav toggle, banner uploader.
• Prestige — hero overlay opacity, accent color, button style.
• Showcase — full-bleed hero behavior, product-page emphasis.
• Brico — grid density (2 / 3 / 4 cols), category card style.
• Starter — header layout, footer layout.

See the per-theme docs for what each one exposes.

Custom CSS (Pro)

The Pro plan exposes a Custom CSS field. Anything you put there is loaded after the theme stylesheet, so your rules win.

/* Round all primary buttons */
.btn-primary { border-radius: 999px; }

/* Hide the search bar on mobile */
@media (max-width: 768px) {
  .header-search { display: none; }
}

warning

Custom CSS is powerful but easy to break. If your storefront looks broken after a CSS edit, clear the field and save to revert — there's no destructive change.

Tips

• Preview on a real phone, not just the mobile preview tab. Algerian buyers shop overwhelmingly on mobile, often on slow networks.
• Watch the cart slide-in in every locale you support. Translation strings differ between themes — Prestige in particular uses different keys than the rest.
• Don't over-customize colors. Stick to two accent colors and let your photography do the rest.
• After a big customization push, share your URL in WhatsApp privately — the OG preview is a quick sanity check.