Skip to main content

Digital theme

The Digital theme is DZBuild's most popular storefront — modern, animation-rich, mobile-first, designed to give your store the "premium app" feel that Algerian buyers expect on tech, apparel and beauty.

Highlights​

  • Sticky header with cart counter, search and language switcher
  • Animated hero — image / video / auto-rotating product carousel
  • Bold product grid — 2/3/4 columns, hover preview, optional badges (sale, new, bestseller)
  • 2-step accordion variant picker (with the Digital Product Variants addon) — image previews, price pill, scrolls the gallery to the variant's image when selected
  • Bottom navigation on mobile (Home, Categories, Search, Cart, Account)
  • Optional dark mode
  • Cart slide-in with localized strings for FR / AR / EN

Best for​

  • Phones, laptops, accessories, gadgets
  • Sneakers, streetwear, sportswear
  • Beauty + cosmetics
  • Anything where good photography + smooth animation builds desire

Where to customize​

The Digital theme has its own customize page at Dashboard → Customize → Digital (/dashboard/customize/digital). It exposes Digital-specific options on top of the shared /dashboard/customize controls:

  • Hero slot — single image, single video, or auto-rotating product carousel.
  • Hero CTA color + button shape (rounded / pill / sharp).
  • Banner uploader — Digital has a dedicated banner upload endpoint; upload from this page.
  • Card border radius — sharp vs rounded.
  • Product grid columns — 2 / 3 / 4 (desktop). Mobile is always 2.
  • Mobile bottom-nav toggle — keep the bottom nav, or fall back to a hamburger menu.

To upload a banner, the page calls /dashboard/customize/digital/upload-banner behind the scenes — no manual work needed, just drag and drop.

Variants on the Digital theme​

Digital is built around the 2-step variant accordion, available when you install the Digital Product Variants addon. The pattern:

  1. The customer opens the product page and sees a list of variant groups (e.g. Color → Size).
  2. Each option renders as a card with a preview image, name, and a price pill that shows the final price (base price + the option's price_adjustment).
  3. When the customer picks an option that's bound to a product image, the gallery scrolls to that image automatically.
  4. After the first group is picked, the second group expands.

This pattern handles both color, text and image_text variant types. Mark options that need extra visual weight (e.g. fashion colors, brand selectors) with show as card in the product editor.

See the variants guide for setting up variants.

Tips​

  • Keep the hero video short (≤ 8 s, looped, muted) — long autoplay videos hurt mobile load time on Algerian networks.
  • For grid layouts, 3 columns is the sweet spot on desktop; 4 only if your photos are bright and cropped consistently.
  • Use the price pill as a teaser — show the variant whose price beats the others first. Customers click further to compare.
  • The bottom nav on mobile keeps cart access permanent — don't disable it unless you're really sure.