Skip to main content

Landing pages

Single-product conversion pages for paid ads — manual builder, AI-generated drafts, sections, and accurate shipping when you bind a product.

Written by Support

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 included — purchasable for 1,000 DZD each (lifetime)

Pro

3

Unlimited

Unlimited

Enterprise

Unlimited

Free-tier merchants can buy individual landing pages for 1,000 DZD apiece — payment is verified by the DZBuild team after the receipt is uploaded, then the page is unlocked permanently for that store. Two consequences worth planning around:

  • While a receipt is still pending approval it does not unlock a slot yet — you cannot create the page until the team approves it.

  • When a paid plan lapses to Free, every landing page that was not individually purchased starts returning a 404 to visitors. 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) and image_text (thumbnail cards). Multi-select selectable groups 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 ViewContent on load and Purchase on 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 fires Lead instead (SubmitForm on TikTok, SIGN_UP on Snapchat, generate_lead on GA4) and produces no Purchase. Landing pages never fire AddToCart or InitiateCheckout.

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 ≤ 5 fields. Each extra field drops conversion roughly 10%.

  • Real product photos beat stock images by a wide margin on Algerian traffic.

  • Bot defences are already on. Every landing page automatically rejects submissions that look automated rather than human. You get this without installing anything.

  • Add a captcha on top of those if you still get fake orders from ads — the addon layers an extra challenge over the built-in checks.

  • Test on mobile width first. More than 80% of paid clicks are mobile in Algeria.

What's next

Did this answer your question?