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

Sidebar Personnaliser la boutique / تخصيص المتجر → Personnaliser / تخصيص → CSS personnalisé / CSS مخصّص. 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.

50 KB limit — silent truncation

The field is capped at 50 KB. Anything past that is cut off when you save, with no error shown, which can leave a rule half-written and disable everything after it. Keep the stylesheet small, and if the tail of your CSS stops working, check its length first.

Where it applies: the homepage, product pages, category and all-products pages, cart, checkout, order tracking and the order-confirmation page. It does not apply to landing pages at /landing/{slug} — those render outside the theme system.

Check for a built-in switch first

Several of the templates below duplicate — and can fight with — a control that already exists in the customizer:

What you want	Built-in control
Sticky header, header shadow, header border	Customize → Header & Logo
Product-card corner radius (0 / 8 / 16 / 24 px)	Customize → Product card
Hide the grid add-to-cart button or the hover action	Customize → Product card
Show/hide the announcement bar, and its colours	Customize → Announcement bar (Pro)
Show/hide the search bar	Customize → Search bar
Footer colour, hide "Powered by DZBuild"	Customize → Footer
Buy Now / Fast Checkout button colours	Customize → Product page (Pro)

Use the switch when there is one — it survives theme changes and won't be overridden by a future stylesheet update.

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):

.add-to-cart { 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. .add-to-cart). 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 .add-to-cart rule beats the theme's.
!important forces a value to win. Use it sparingly — only when a normal rule won't override the theme:

.add-to-cart { 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:

Open your storefront on a desktop browser (Chrome, Firefox, Edge).
Right-click the element you want to change → Inspect.
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.
Paste a test rule into the Custom CSS field and watch the live preview.

tip

Selectors differ between themes (Starter, Digital, Brico, Started V2, Prestige, Promobi, Bloom) — hero and search boxes especially. When in doubt, inspect your own storefront rather than copying a class blindly, then drop the rule into the preview to confirm.

DZBuild selector cheat-sheet

The most useful, stable selectors across themes:

Selector	Targets
`.navbar-store`	The top header / navigation bar, shared by every page (the same element also carries `id="navbar"`, so `#navbar` works too)
`.announcement-bar`	The thin promo strip above the header
`.product-card`	A single product tile in any product grid
`.product-image`	The wrapper around a product-card image — target `.product-image img` for the picture itself
`.product-price`	The price text on a product card
`.product-actions`	The hover action buttons on a product card (hidden on touch devices — see below)
`.add-to-cart`	"Add to cart" / buy buttons in product grids
`.whatsapp-float`	The floating WhatsApp button
`.footer`	The page footer on every theme except Brico, which ships its own `.brico-footer`

Three selectors that circulate in older snippets do not work on DZBuild storefronts:

.btn-primary — exists only on the order-confirmation page, nowhere else. To recolour the Buy Now and Fast Checkout buttons, use the built-in pickers (Customize → Product page) or the CSS variables below.
.header-search — no storefront markup uses it. The shared navbar has no search box at all, so a header-search rule can never work on the product, cart, category or checkout pages. Search is theme-specific and homepage-only: .brico-search, .sc-search (Started V2 and Bloom), .pr-search, .pm-search, .mobile-search (Starter and Digital).
.hero — the real hero classes are theme-specific too: .hero-section (Starter), .dt-hero-section (Digital), .sc-hero (Started V2 and Bloom), .pr-hero (Prestige), .pm-hero (Promobi). Brico has no hero.

Brand CSS variables

Declared by all 7 active themes:

Variable	Controls
`--primary`	Primary brand color
`--secondary`	Secondary color
`--gradient`	Primary→secondary gradient (buttons, hero)
`--btn-radius`	Button corner roundness
`--card-border`	Product-card border
`--card-shadow`	Product-card shadow

Page background differs by theme: Starter and Digital use --background; Bloom, Brico, Prestige, Promobi and Started V2 use --bg (plus --navbar-bg, --footer-bg, --border-color). When in doubt, set both.

Product-page buttons expose their own variables, emitted when you set the matching colour in Customize → Product page:

Variable	Controls
`--pd-buynow`	Buy Now button colour (`--pd-buynow-hover` for hover)
`--pd-fc-btn`	Fast Checkout submit-button colour (`--pd-fc-btn-hover` for hover)

/* Re-brand the whole store in one block */
:root {
  --primary: #6d28d9;
  --secondary: #a78bfa;
  --btn-radius: 12px;
  --background: #faf7f2;
  --bg: #faf7f2;
}

Templates

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

Buttons

These target .add-to-cart, the buy button on product-grid tiles. For the Buy Now and Fast Checkout buttons on the product page, set --pd-buynow / --pd-fc-btn (or use the colour pickers in Customize → Product page) rather than chasing a class.

/* Pill (fully rounded) buttons */
.add-to-cart { border-radius: 999px; }

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

/* Outline style */
.add-to-cart {
  background: transparent;
  color: #f59e0b;
  border: 2px solid #f59e0b;
}
.add-to-cart: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 img { transform: scale(1.04); }
.product-image img { transition: transform .3s ease; }

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

Hover effects are switched off on phones — leave them off

Every theme ships @media (hover: none) and (pointer: coarse) overrides marked !important that neutralise .product-card:hover transforms and hide .product-actions. This is deliberate: the whole card is clickable, and on iOS an active hover state eats the shopper's first tap, so the product stops opening on the first touch. Don't force hover styles back on for touch devices.

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

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

Sticky header, header shadow and header border already have switches in Customize → Header & Logo — use those first; they survive theme changes.

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 { font-family: 'Sora', sans-serif; letter-spacing: -.5px; }

Remember the 50 KB cap: a long list of @import lines plus a big stylesheet can hit it and be silently truncated.

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

There is no shared .hero class — swap in your theme's hero selector: .hero-section (Starter), .dt-hero-section (Digital), .sc-hero (Started V2, Bloom), .pr-hero (Prestige), .pm-hero (Promobi). The example below uses Starter's.

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

/* 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; }

note

.footer covers every theme except Brico, which renders its own footer — use .brico-footer there. Footer colour also has a built-in picker (Customize → Footer, Pro+).

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 */
  .add-to-cart { padding: 14px 18px; font-size: 1rem; }

  /* Softer card corners on phones */
  .product-card { border-radius: 12px; }
}

Two things people try here that don't work:

Hiding the search box. There is no shared search class; search is homepage-only and theme-specific (.brico-search, .sc-search, .pr-search, .pm-search, .mobile-search). The customizer has a Search bar show/hide switch — use that instead.
Forcing a two-column product grid. Homepage product grids are Bootstrap columns (col-6 col-md-4 col-lg-3) and are already two-up on mobile. The all-products and category pages use .products-grid. .product-grid is the product-detail page's gallery + info wrapper — retargeting it squeezes the gallery and the info column side-by-side on phones and does nothing to the homepage.

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 (.add-to-cart, the Buy Now and Fast Checkout buttons) — that stops customers from ordering. Use the live preview to confirm those stay visible. If you genuinely want them gone on some pages, the customizer has proper switches for it (Customize → Product card and Customize → Product page, Pro+).

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, and the field is hard-capped at 50 KB with silent truncation past that point.
Use a built-in switch when one exists — see the table at the top of this page. A customizer setting won't be undone by a theme update.
Use the brand variables (--primary, --gradient, --pd-buynow) — 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 .add-to-cart`)
My rule isn't applying	The selector doesn't exist on DZBuild	`.btn-primary`, `.header-search` and `.hero` are the usual culprits — see the cheat-sheet
Still nothing	Typo in the selector / missing `;` or `}`	Re-check the block; one broken brace can disable the rest
The end of my stylesheet does nothing	You crossed the 50 KB cap and it was truncated on save	Shorten the CSS
Change shows in preview but not live	Your own browser cache	A saved change reaches visitors within seconds, so it should be live for everyone already. Hard-refresh (Ctrl/Cmd+Shift+R) or open a private window
My font won't load	`@import` isn't at the top	Move every `@import` line to the very top of the field
Nothing changes on my landing page	Custom CSS doesn't apply to `/landing/…` pages	Style the landing page from the landing-page editor
The store looks broken	A rule went too far	Clear the field and Save to revert instantly — nothing is permanent

A stray closing tag can't break your page

If a </style> or </script> string ends up in the field, DZBuild escapes it before it reaches the page, so it can't terminate the stylesheet or inject markup. It is escaped rather than preserved, so don't expect such text to render.

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.

Where to paste it​

Check for a built-in switch first​

How CSS works (60-second primer)​

Finding the right selector​

DZBuild selector cheat-sheet​

Brand CSS variables​

Templates​

Buttons​

Product cards​

Header & navbar​

Announcement bar​

Fonts & typography​

Hero​

Footer​

Mobile-only tweaks​

Hide things you don't want​

Smooth micro-animations​

Best practices​

Troubleshooting​

Revert anytime​