Custom CSS guide

Custom CSS lets you fine-tune the look of your storefront beyond the customizer's built-in controls — rounder buttons, softer card shadows, a custom font, a sticky header, and much more. This guide is a complete, beginner-friendly walkthrough: how CSS works, where to paste it, the DZBuild selector cheat-sheet, and dozens of ready-to-paste templates.

Enterprise feature

Custom CSS is available on the Enterprise plan. On other plans the field shows as locked. See plans to upgrade.

Where to paste it

Dashboard → Customize → Custom CSS (CSS مخصّص / CSS personnalisé). Type or paste your CSS, watch the live preview update on the right, and click Save when it looks right. Your CSS loads after the theme's stylesheet, so your rules win.

You can't break anything permanently

Custom CSS only changes appearance — never your products, orders, or data. If the storefront looks wrong, clear the field and Save and you're back to normal. Always check the live preview before saving.

---

How CSS works (60-second primer)

CSS is a list of rules. Each rule has a selector (what to target) and a declaration block (what to change):

.btn-primary { color: white; background: #f59e0b; }
/* └─ selector ┘  └───── declarations: property: value; ─────┘ */

• A selector points at elements. The most common kinds:
  • .classname — every element with that class (e.g. .btn-primary). This is what you'll use 95% of the time.
  • tag — every element of a type (e.g. button, h1, img).
  • #id — the single element with that id.
  • .a .b — a .b inside an .a. .a > .b — a .b that is a direct child of .a.
  • .a:hover — an .a while the mouse is over it.
• A declaration is property: value;. Common properties: color, background, border, border-radius, padding, margin, font-size, box-shadow, display.
• The cascade: when two rules touch the same thing, the more specific one — or the one loaded later — wins. Because your CSS loads after the theme, your .btn-primary { … } beats the theme's.
• !important forces a value to win. Use it sparingly — only when a normal rule won't override the theme:

.btn-primary { border-radius: 999px !important; }

That's genuinely most of what you need. Everything below is copy-paste.

---

Finding the right selector

You rarely need to guess. Use your browser's inspector:

1. Open your storefront on a desktop browser (Chrome, Firefox, Edge).
2. Right-click the element you want to change → Inspect.
3. In the panel that opens, the highlighted line shows the element and its class="…". Pick a class name (e.g. product-card) and target it as .product-card.
4. Paste a test rule into the Custom CSS field and watch the live preview.

tip

Selectors can differ slightly between themes (Digital, Prestige, Showcase, Brico, Starter). When in doubt, inspect your own storefront rather than copying a class blindly — then drop it into the preview to confirm.

---

DZBuild selector cheat-sheet

The most useful, stable selectors across themes:

Selector	Targets
.navbar	The top header / navigation bar
.announcement-bar	The thin promo strip above the header
.header-search	The search box in the header
.hero	The big banner block at the top of the homepage
.product-card	A single product tile in any product grid
.product-image	The image inside a product card
.product-price	The price text on a product card
.product-actions	The hover action buttons on a product card
.add-to-cart	"Add to cart" buttons in grids
.btn-primary	Primary buttons (Buy now, Order, etc.)
.whatsapp-float	The floating WhatsApp button
.footer	The page footer

Some themes expose brand CSS variables you can override globally:

Variable	Controls
--primary	Primary brand color
--secondary	Secondary color
--gradient	Primary→secondary gradient (buttons, hero)
--btn-radius	Button corner roundness
--background	Page background

/* Re-brand the whole store in one block (themes that use variables) */
:root {
  --primary: #6d28d9;
  --secondary: #a78bfa;
  --btn-radius: 12px;
}

---

Templates

Copy any block into the Custom CSS field. Mix and match.

Buttons

/* Pill (fully rounded) buttons */
.btn-primary { border-radius: 999px; }

/* Gradient buttons with a subtle lift on hover */
.btn-primary {
  background: linear-gradient(135deg, #f59e0b 0%, #f97316 100%);
  border: none;
  transition: transform .15s ease, box-shadow .15s ease;
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(245, 158, 11, .35);
}

/* Outline style */
.btn-primary {
  background: transparent;
  color: #f59e0b;
  border: 2px solid #f59e0b;
}
.btn-primary:hover { background: #f59e0b; color: #fff; }

Product cards

/* Soft shadow + rounded corners */
.product-card {
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .08);
  overflow: hidden;
}

/* Lift the card on hover */
.product-card {
  transition: transform .2s ease, box-shadow .2s ease;
}
.product-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 32px rgba(0, 0, 0, .12);
}

/* Gentle zoom on the product image on hover */
.product-card:hover .product-image { transform: scale(1.04); }
.product-image { transition: transform .3s ease; }

/* Make the price bigger and bolder */
.product-price { font-size: 1.15rem; font-weight: 800; }

Header & navbar

/* Sticky header with a shadow */
.navbar {
  position: sticky;
  top: 0;
  z-index: 50;
  box-shadow: 0 2px 12px rgba(0, 0, 0, .06);
}

/* Solid brand-colored header */
.navbar { background: #111827; }

Announcement bar

/* Eye-catching gradient announcement bar */
.announcement-bar {
  background: linear-gradient(90deg, #f59e0b, #ef4444);
  color: #fff;
  font-weight: 600;
  letter-spacing: .3px;
}

Fonts & typography

Custom CSS supports @import, so you can load a Google Font and apply it everywhere. Put the @import line at the very top of the field.

/* Load a Google Font and use it across the store */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap');

body { font-family: 'Poppins', sans-serif; }

/* A different, heavier font just for headings */
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@600;800&display=swap');
h1, h2, .hero h1 { font-family: 'Sora', sans-serif; letter-spacing: -.5px; }

Arabic stores

For Arabic storefronts, pick a font with full Arabic glyph coverage — Cairo, Tajawal, or Almarai all work well: @import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;700&display=swap');

Hero

/* Darken the hero so overlaid text stays readable */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .35);
}
.hero h1 { position: relative; z-index: 1; text-shadow: 0 2px 12px rgba(0,0,0,.4); }

Footer

/* Dark footer with brand-colored link hovers */
.footer { background: #0f172a; color: #cbd5e1; }
.footer a { color: #cbd5e1; transition: color .15s ease; }
.footer a:hover { color: #f59e0b; }

Mobile-only tweaks

Wrap rules in a @media query so they only apply on small screens:

@media (max-width: 768px) {
  /* Bigger, easier-to-tap buttons on phones */
  .btn-primary { padding: 14px 18px; font-size: 1rem; }

  /* Hide the search bar on mobile to save space */
  .header-search { display: none; }

  /* Two columns of products instead of one */
  .product-grid { grid-template-columns: 1fr 1fr; }
}

Hide things you don't want

/* Hide the floating WhatsApp button */
.whatsapp-float { display: none; }

/* Hide the announcement bar */
.announcement-bar { display: none; }

warning

Never hide your Buy / Add to cart buttons (.btn-primary, .add-to-cart) — that stops customers from ordering. Use the live preview to confirm those stay visible.

Smooth micro-animations

/* Fade everything in nicely on load */
body { animation: dzfade .4s ease both; }
@keyframes dzfade { from { opacity: 0; } to { opacity: 1; } }

/* Smooth color/shadow transitions everywhere */
a, button, .product-card { transition: all .15s ease; }

---

Best practices

• Preview before you save — the right-hand panel updates live as you type. Save only when it looks right.
• Mobile first — most Algerian shoppers are on phones. Always check the mobile preview and a real phone.
• Don't hide critical UI — keep Buy/Add-to-cart, price, and checkout visible.
• Keep it small — a few focused rules beat a giant stylesheet. Less to maintain, less to break.
• Use the brand variables (--primary, --gradient) when your theme supports them — one change re-skins the whole store.
• Check both languages — if you sell in Arabic (RTL) and French/English (LTR), preview both so a margin-left tweak doesn't break the other direction.
• @import goes first — font imports must be at the very top of the field or the browser ignores them.

---

Troubleshooting

Symptom	Likely cause	Fix
My rule isn't applying	The theme's rule is more specific	Add !important, or target more precisely (e.g. .product-card .btn-primary)
Still nothing	Typo in the selector / missing ; or }	Re-check the block; one broken { } can disable the rest
Change shows in preview but not live	Edge cache	Wait a moment and hard-refresh (Ctrl/Cmd+Shift+R)
My font won't load	@import isn't at the top	Move every @import line to the very top of the field
The store looks broken	A rule went too far	Clear the field and Save to revert instantly — nothing is permanent

---

Revert anytime

Custom CSS is never destructive. To undo everything, clear the Custom CSS field and click Save — your storefront returns to the theme defaults immediately. Your products, orders, and settings are untouched.

Want to change layout, colors, fonts, or sections without code? Most of that is built into the visual editor — see Storefront customization.