Landing pages
Landing pages are single-product conversion pages designed for paid traffic. Strip everything that doesn't sell, focus on one product, drive to a single CTA. DZBuild gives you a fast manual builder and a one-click AI generator on top of the same data model, so you can iterate without rebuilding.
Video
Storefront vs. landing page
| Use the storefront when | Use a landing page when |
|---|---|
| The customer is browsing | The customer clicked an ad |
| You sell 10+ products | You're pushing 1 product hard |
| Organic / repeat traffic | Facebook / TikTok / Google Ads |
| The customer needs to compare | One offer, one decision |
A landing page lives at https://{your-store}.dzbuild.app/landing/{slug} (or under your custom domain). It does not show your storefront navigation, search bar or footer — just the offer.
How many landing pages can I have?
Per-plan caps:
| Plan | Landing pages |
|---|---|
| Free | 0 |
| Pro | 3 |
| Unlimited | Unlimited |
| Enterprise | Unlimited |
Landing pages come with your plan. Individual pages are no longer sold separately, so the cap in the table is what you get.
Plan the expiry date around your campaigns: when a plan expires the whole storefront goes offline, and the landing pages go offline with it. Ads pointing at that URL keep spending on a dead page.
To upgrade or renew, open /dashboard/subscribe and click ▶ How to renew for the in-app guided tour, or check the video tutorials on the DZBuild YouTube channel.
Where to find landing pages
Open Dashboard → Landing pages at /dashboard/landing-pages. The page is a card grid with a search box above it, which filters the loaded cards by title or URL, client-side. Each card shows:
- The page title
- The creation date
- The number of sections
- The view count
- An Active badge
- The page's public URL in a read-only box with a copy button — the slug is visible inside that URL, there's no separate slug field on the card
Three actions per card: Edit, Preview (opens the live page in a new tab), Delete.
Every landing page is created and saved as active. There is no Draft state in the merchant UI.
Two ways to create
Option 1 — AI-generate a draft
Click Generate with AI at the top of the list (or go to /dashboard/landing-pages/ai-generate). Pick the product, optionally add a one-line angle ("Mother's day gift", "for hot summer"), and the planner builds a complete page in a couple of minutes:
- Headline + sub-headline
- Pain → solution sections
- Benefits list
- Generated scene images for the product in context
- Trust signals
- Call-to-action with the order form
What the wizard asks for:
- A product that already has at least one image. Products with no image are greyed out and cannot be selected.
- The angle / description — a free-text box that accepts up to 2,000 characters.
- The page language — Arabic, French or English.
- The page size — the standard page costs 20 AI credits, the tall (3-panel) page costs 45. The tall option is greyed out when your balance can't cover it.
See your balance at /dashboard/ai-credits.
The language you pick here is stored on the landing page itself — it does not follow your store language, and it drives the page's text direction. It is only settable in the AI wizard: manually created pages are always Arabic/RTL, and there is no way to change a page's language afterwards from the editor.
You can edit any section after generation and swap its images, but there is no per-block regenerate — to get a different draft you run the generator again, which charges credits again.
Option 2 — Build manually
Click Create a page (/dashboard/landing-pages/create). A 3-step wizard asks you to (1) pick the product, (2) enter the page title, URL slug and SEO description, (3) create. There are no templates — the page starts empty and you add sections in the editor.
The PAS blocks (Problem / Agitation / Before-after / Solution / Features / CTA) are produced only by the AI generator. They stay editable afterwards, but they cannot be added by hand.
Section types
Fourteen section types can be added manually, each with its own style controls:
| Section | What it does |
|---|---|
| Image | A single full-width image block. |
| Image carousel | Several images the visitor can swipe through. |
| Announcement bar | A thin banner strip for a promo line. |
| Special offer | A highlighted offer block. |
| Price display | Price + compare-at price as a standalone block. |
| Product offers | Quantity-tier offer cards ("1 box", "2 boxes", …). See below. |
| Order form | The full inline order form. |
| Order button | A CTA button that scrolls to / opens the order form. |
| Free text | Rich free text. |
| Contact button | A WhatsApp / phone contact button. |
| Countdown | A countdown timer for urgency. |
| Fake visitors | A "N people are viewing this page" counter. |
| Testimonials | Customer review cards. |
| Custom form | A lead form with your own fields (this is the only place an email field exists on a landing page). |
Product offers and follow_offers
Each offer row in a Product offers section carries its own quantity, price, compare-at price, badge, image, featured flag and free-shipping flag.
Separately, an Order button section (or an order form rendered as a button) has a follow offers toggle. When it is on and the quantity field is shown, the quantity the buyer picks is matched against the quantity offers configured on the product itself (Products → the product → offers) — not against this section's rows — and an exact match re-prices the order to that offer's price and applies its free-shipping flag. The match and the final price are always recalculated from the offers you saved on the product — the price the browser sends is never trusted. Free shipping chosen inside a Product offers section is likewise re-read from the offer you saved on that section.
Linking a product
Always pick a product when you create a landing page, even if you'll override the price and copy. Why?
When the order form is bound to a product, shipping is calculated from your store's per-wilaya rates plus any per-product overrides. A landing page without a product binding can silently undercharge shipping — especially with the Custom Product Shipping addon, which needs the product to look up the correct rate.
If you sell a bundle that doesn't map to one product, create a placeholder product (with the bundle's actual weight + dimensions + shipping rules) and bind the landing page to it.
Editing sections
In the landing-page editor (/dashboard/landing-pages/:id/edit):
- Drag sections by the grip handle to reorder — this is the reorder method on desktop. On a narrow screen (768px or less) each section card also shows ▲ / ▼ arrows that move it one place, disabled on the first and last section.
- Click Delete to remove a section.
- Click the section to open its editor on the right.
- A copy icon duplicates an individual section — but it only appears after you have added, deleted or moved a section in that editing session. On a freshly opened editor each card shows only Edit and Delete.
Save propagates instantly — no separate publish step.
The preview pane
The right-hand pane is not a mock-up: it is the actual public page, rendered by the same code that serves it to buyers, inside an iframe. What you see is what buyers get. Style and text edits patch the preview instantly; structural edits reload the iframe once the autosave confirms.
Don't try to share that preview URL — it is login-gated, requires the landing_pages.edit permission and is sent with noindex and a same-origin frame policy, so it is useless to anyone outside your dashboard. Use the card's Preview action (the real public URL) when you want to send the page to someone.
The order form
The most important block. Configure:
- Fields and their on/off switches — name, phone, commune, address and quantity each have a switch. Wilaya cannot be switched off — it is locked on and marked required in the editor.
- Required fields — the server accepts an order only if name and phone are filled and the phone matches the Algerian format
(0|213|+213)(5|6|7)XXXXXXXX. Switching the Name or Phone field OFF makes every submission from that section fail with "please fill all required fields", so leave name, phone and wilaya on. - Optional fields — full address, quantity, and one merchant-defined free-text field (label, placeholder, required toggle) whose value is appended to the order's seller notes. There is no email field on the landing-page order form — landing-page orders are always stored with an empty customer email. If you need an email address, add a Custom form section instead.
- Variants — the form renders the product's variant groups with full product-page parity (thumbnails, price pills, sold-out and dead-end states). The three group types are
color(colour swatch cards),text(plain option buttons — this is what a group named "Size" uses) andimage_text(thumbnail cards). Multi-selectselectablegroups reuse the image-text card markup and are optional rather than required. - Bundles / quantity offers — "Buy 2 + 1 free" with auto-quantity. Pair with the Offer Variant Popup addon for clean per-piece variant selection.
- Pixel events — the landing page fires
ViewContenton load andPurchaseon a successful order submit (browser pixel plus server-side Conversions API for Facebook, TikTok, Snapchat and Pinterest, deduplicated by event ID). A Custom form section firesLeadinstead (SubmitFormon TikTok,SIGN_UPon Snapchat,generate_leadon GA4) and produces noPurchase. Landing pages never fireAddToCartorInitiateCheckout.
Submission stays inline — no redirect, the confirmation appears on the same page so you don't lose customers between steps.
Pixels and analytics
Each landing page can override the store-level Pixel. Useful when:
- A specific campaign uses a different Pixel ID for clean attribution.
- You're A/B-testing two creatives and want separate audiences.
Set the Pixel in the page's Tracking section. See Pixels for the full setup.
Duplicating
Duplicating a whole landing page is not available in the dashboard today. To A/B-test a different headline, hero or CTA, create a second page and rebuild the sections.
You can duplicate an individual section inside the editor with the copy icon on the section card — see Editing sections for when that icon shows up.
Tips
- Always bind the page to a product, even for bundles. It's the only way shipping math is right.
- Show a "Cash on Delivery" badge prominently. Algerian buyers trust this and convert better.
- Keep the form short. Ask for what you need to deliver the order and nothing more.
- Real product photos beat stock images on Algerian traffic.
- Know what the built-in bot checks cover. Every landing-page form runs three of them: a cap of 15 orders per minute for the whole store, a hidden field a real buyer never fills in, and a check on how fast the form came back. The last two are reported by the visitor's browser, so a script written for your page can get past them. Treat them as a speed bump, not as protection.
- Add a captcha if fake orders from ads are costing you money. The addon puts a real challenge in front of the form.
- Test at phone width first. That is where your ad traffic lands.