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.
📝 Note — 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 main stylesheet, so your rules usually win. A few parts bring their own styles later in the page or on the element itself: the header on every page except product pages, the footer, the floating WhatsApp button, the product page's own styles and, on some themes, the announcement bar. A rule for those needs !important to win.
💡 Tip — 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.
⚠️ Warning — 50 KB limit — silent truncation
The field is capped at 50,000 characters: the box stops accepting text at that point, and the counter under it shows how many you have used. The saved copy is also cut at 50,000 bytes with no error shown, and an Arabic letter counts as two bytes, so CSS that contains Arabic text can lose its end even when the counter is under the limit. A cut 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.binside an.a..a > .b— a.bthat is a direct child of.a..a:hover— an.awhile 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-cartrule beats the theme's.!importantforces 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 |
| The top header / navigation bar, shared by every page (the same element also carries |
| The thin promo strip above the header. On the Promobi homepage the announcement scrolls in a |
| A single product tile in any product grid |
| The wrapper around a product-card image — target |
| The price text on a product card |
| The hover action buttons on a product card (hidden on touch devices — see below) |
| "Add to cart" / buy buttons in product grids |
| The floating WhatsApp button. Once you save the settings in Customize → Help widget, the button becomes |
| The page footer on every page, except the Brico homepage, which uses |
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,.search-section(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 brand color |
| Secondary color |
| Primary→secondary gradient (buttons, hero) |
| Button corner roundness |
| Product-card border |
| 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 and --border-color, and --footer-bg on all of them except Promobi). When in doubt, set both.
Product-page buttons read their own variables. When you pick the matching colour in Customize → Product page, the page sets these variables itself after your Custom CSS, so the picker wins; a value set here only applies while that picker is empty:
Variable | Controls |
| Buy Now button colour ( |
| Fast Checkout submit-button colour ( |
For a store-wide colour change, use the primary and secondary colour pickers in Customize → Colours & font: they reach every page, product pages included. The variables below only reach the pages that read them: the theme homepages, cart, checkout, category, all-products and order-tracking pages. Product pages use their own colour variables, the Promobi homepage reads --accent and --accent2, and several pages build --gradient from the saved colours, so set it as well.
/* Re-colour the pages that read these variables */
:root {
--primary: #6d28d9;
--secondary: #a78bfa;
--gradient: linear-gradient(135deg, #6d28d9 0%, #a78bfa 100%);
--accent: #6d28d9;
--accent2: #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; }
⚠️ Warning — 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.
Header & navbar
/* Header shadow */
.navbar-store {
box-shadow: 0 2px 12px rgba(0, 0, 0, .06) !important;
}/* Solid brand-colored header */
.navbar-store { background: #111827 !important; }
Sticky header, header shadow and header border already have switches in Customize → Header & Logo: use those first; they survive theme changes. Use the switch for a sticky header: a position rule here does nothing on most pages, and with !important it can leave a gap under the header on phones.
Announcement bar
/* Eye-catching gradient announcement bar */
.announcement-bar {
background: linear-gradient(90deg, #f59e0b, #ef4444) !important;
color: #fff !important;
font-weight: 600 !important;
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. Fonts from Google Fonts load; stylesheets and fonts from most other font services are blocked by the storefront's security policy.
/* Load Google Fonts and use them across the store */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@600;800&display=swap');body { font-family: 'Poppins', sans-serif; }/* A different, heavier font just for headings */
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.
💡 Tip — 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); }
Footer
/* Dark footer with brand-colored link hovers */
.footer { background: #0f172a !important; color: #cbd5e1 !important; }
.footer a { color: #cbd5e1 !important; transition: color .15s ease; }
.footer a:hover { color: #f59e0b !important; }
📝 Note
.footer covers every page except the Brico homepage, which renders its own footer: use .brico-footer there, next to .footer for Brico's other pages. 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,.search-section). The customizer has a Search bar show/hide switch: use that instead.Forcing a two-column product grid. Homepage product grids are already two-up on mobile: Bootstrap columns (
col-6 col-md-4 col-lg-3) on most themes,.pm-gridon Promobi. The all-products and category pages use.products-grid..product-gridis 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 (or switch it off in Customize → Help widget) */
.whatsapp-float, .dzhw-launcher { display: none !important; }/* 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 colour pickers for brand colours (Customize → Colours & font): one change re-skins the whole store. The CSS variables (
--primary,--gradient,--pd-buynow) only reach the pages that read them, as the variables section above explains.Check both languages — if you sell in Arabic (RTL) and French/English (LTR), preview both so a
margin-lefttweak doesn't break the other direction.@importgoes 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 |
My rule isn't applying | The selector doesn't exist on DZBuild |
|
Still nothing | Typo in the selector / missing | 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 | Storefront pages are cached for a few minutes | Wait about five minutes, then hard-refresh (Ctrl/Cmd+Shift+R) or open a private window. There is no manual purge, and a page a visitor already loaded keeps the old CSS until its cached copy expires |
My font won't load |
| Move every |
Nothing changes on my landing page | Custom CSS doesn't apply to | 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 |
📝 Note — 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 on the next page load. 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.