Prebo Digital

Multivendor Marketplace Web Design: The Seller-Panel and Payout Playbook for SA Operators

A design guide for platforms where third-party sellers list on your domain - covering seller onboarding, split carts, commission ledgers, catalogue moderation and marketplace GMV measurement.

Design the seller panel first

Multi-tenant seller surfaces and onboarding are the real marketplace design work.

Split carts and payout ledgers

Per-seller shipping, commissions and payouts are the hardest UX and backend layer.

Measure marketplace GMV, not ATC

Track adds-to-cart against marketplace share and seller activation rate, not traffic.
13 min readWeb Design
Get a Quote
web-design-south-africa — web-design hero

Scenario: The Johannesburg Homeware Retailer Onboarding 40 Sellers on One Domain

A Johannesburg homeware retailer turning over roughly R18m a year from its own stock decides to invite 40 independent makers to list on the same domain, take a commission, and let the operator handle traffic, checkout and trust. The brief lands with a web designer, and the first questions are about homepage layout and grid density. None mention seller onboarding, split carts, commission ledgers or catalogue moderation. That is the moment this article exists to prevent.

A multivendor marketplace is not a bigger online store. It is a multi-tenant commerce system where the operator sells its own stock, third parties sell theirs, and the two meet in one cart, one checkout and one payout schedule. Design decisions made in week one determine whether 50, 200 or 2,000 sellers can be onboarded without the support queue collapsing. This playbook covers the layers that differ from a single-seller build: seller panels, onboarding, buyer-facing surfaces, cart splitting, payout ledgers, platform choice, moderation, attribution and measurement.

Two Marketplace Models Hiding in One Keyword: Vendor Marketplace vs Multi-Tenant Storefront

Search traffic for marketplace design keywords blends two very different products. The first is the vendor marketplace: third-party sellers list on your domain, under your brand, with your checkout, and you take commission. Takealot's retail-plus-marketplace mix is the local reference point. The second is a multi-tenant storefront platform - services like Sharetribe or Arcadier where you operate the software and merchants run their own branded storefronts on your infrastructure. The UX, data model and commercial risk are not the same.

This article addresses the vendor marketplace model. The practical difference is who controls the customer: in a vendor marketplace, the operator owns the buyer relationship and the seller is a supplier with a panel; in a multi-tenant platform, the merchant owns the buyer and you own the platform. Confusing the two produces a scope document nobody can build against.

Info: In a vendor marketplace the operator typically owns checkout, payment, refunds and customer service. In a multi-tenant storefront the merchant owns those. Pick one before you scope a single screen.

The Seller Panel Is the Product You Are Actually Designing

Buyers see a storefront. Sellers see a panel. Most marketplace builds fail because the buyer storefront gets 90% of the design attention and the seller panel - the surface that determines whether sellers stay active - gets whatever is left. The seller panel is a multi-tenant application: authentication scoped to the seller's account, product CRUD restricted to that seller's catalogue, order views filtered to that seller's line items, and a ledger showing gross sales, commission deducted, refunds and net payable.

Design the panel against the seller's weekly rhythm, not the operator's monthly report. A seller logs in to see new orders, mark dispatch, print a packing slip, check when the last payout landed and fix a rejected listing. Every task should be reachable in two clicks. Panel modals for order status and inline editing of a single SKU matter more than a glossy dashboard chart.

Tip: Prototype the seller panel as a separate design system. Reusing buyer components usually produces a panel that a seller cannot operate on a phone.

Onboarding a Seller Without Breaking Your Support Queue: Identity, KYC and Catalogue Import

Onboarding is where marketplace economics are won or lost. If each new seller generates ten support emails, the operator's cost-to-serve eats the commission. A structured flow moves sellers from application to first live listing with minimal human touch:

  1. Application and identity capture - business name, registered entity, VAT status, banking details, primary contact, category interest.
  2. Verification / KYC - company registration, proof of address, bank confirmation letter. Flag POPIA-relevant data handling here.
  3. Commercial terms acceptance - commission rate, payout cycle, returns policy, dispatch SLA, prohibited categories.
  4. Catalogue import - CSV template, image folder structure, category mapping, stock file. This is the step sellers abandon most often.
  5. Listing review and first activation - operator approves, seller goes live, seller receives a first-order notification pattern.

Treat the CSV catalogue template as a design artefact. If it does not match the export your seller already has from their own Shopify or WooCommerce store, you have added a manual translation job to their week - and to your support queue. Publish column definitions, provide a validated sample file, and return clear per-row errors rather than a generic import failure.

Warning: Do not let sellers set their own payout bank account without verification. Payout redirection is a known fraud vector in marketplaces.

Buyer-Facing Surfaces That Change Once Sellers Are in the Mix

Adding sellers changes the buyer experience far beyond a product grid. Four surfaces need explicit design treatment:

  • Product page - seller name, seller rating or verification status, dispatch lead time and returns policy per seller. A single-page returns policy contradicts the actual terms.
  • Seller storefront - a sub-page within the domain that groups one seller's catalogue, with its own intro and contact rules, without diluting the operator's brand.
  • Seller trust badges - verified seller, dispatch SLA met, returns honoured. Design a small, consistent badge set rather than one-off icons per seller.
  • Category pages - must filter by seller, dispatch window and location without fragmenting into thousands of near-duplicate URLs.

All four are surfaces where the operator's brand carries the buyer's risk. The principle is consistent: the operator stays visible as the party the buyer transacts with, while the seller is clearly identified as the fulfilment party. Ambiguity here is where returns disputes are born.

Cart Splitting, Per-Seller Shipping and the Payout Ledger Explained

The single hardest layer in multivendor marketplace design is what happens when a buyer adds products from three sellers to one cart. Payment is usually taken once by the operator; fulfilment is three separate shipments; commission accrues to three separate ledgers. The work sits in three places:

  • Cart splitting. The basket must be grouped by seller at cart and checkout, with per-seller shipping lines, dispatch windows and subtotals visible before payment. Buyers accept multiple parcels if the cart explains it up front; they do not accept discovering it after payment.
  • Per-seller shipping rules. Flat rate, weight-based and free-over-threshold logic must be evaluated per seller group, then combined. Confirm which SA courier integrations your platform supports and how they price multi-parcel dispatches - treat gateway and courier feature claims as things to verify against vendor documentation, not assumptions.
  • Commission ledger. For every order line, record gross line value, commission rate applied, platform fee, refund deductions and net payable to the seller. This ledger - not the order record - is what a seller queries when they disagree with a payout.

Info: Split carts, per-seller shipping and payout ledgers are the layers most often missing from a marketplace scope document. Budget design and development time for them before the buyer storefront.

Which Platforms Support Seller Onboarding and Payouts - A Costed Comparison

The platform decision is a commission-ledger decision more than a design decision. Some stacks ship seller onboarding and payouts as first-class features; others require custom development that quietly doubles the project. ZAR licence estimates are indicative ranges only and vary with exchange rate and plan.

OptionSeller panel out-of-the-boxPayout / ledger supportIndicative annual licence (ZAR est.)Best fit
Shopify + marketplace / vendor appsPartial - app-dependentLimited; often externalR6k-R20k subscriptions + app feesSmall seller counts, fast launch
WooCommerce + Dokan / WCFMYes - mature multi-vendor pluginsYes, with commission and withdrawal modulesPlugin licences R3k-R15k/yr + hostingOperators who already run WooCommerce
CS-Cart Multi-VendorYes - purpose-builtYes - vendor payouts nativeFrom ~R20k-R60k+ depending on tierMarketplaces that want the model built in
Sharetribe / ArcadierYes - SaaS multi-tenantYes - platform-managedFrom ~R6k-R40k+ monthly-equivalentService and rental marketplaces
BigCommerce / Wix marketplace appsPartial - app and plan dependentLimitedPlan + app fees varyNon-commerce-led sites experimenting
Headless / custom (Magento, SAP Commerce, commercetools, Medusa, Hydrogen)Built to specBuilt to specBuild from ~R500k+; ongoing engineeringHigh seller counts, complex ledgers

For SA operators starting at 20-60 sellers, a WooCommerce-plus-Dokan/WCFM stack or CS-Cart Multi-Vendor typically delivers the seller panel and payout ledger with the least custom work. Headless custom stacks only earn their cost when seller count, commission complexity or catalogue governance outgrow plugin limits.

How to Choose a Platform: Five Evaluation Criteria Beyond the Licence Fee

Licence cost is the easiest number to compare and the least useful. Evaluate on these five criteria in order:

  1. Commission ledger depth. Can it record per-line commission, refunds, and seller-level statements? If not, you will build it.
  2. Seller panel quality. Is it mobile-usable, and does it support CSV import with row-level errors?
  3. Payout mechanism. Does it batch payouts, and how are SA gateways and bank payouts handled? Verify against the vendor documentation before committing.
  4. Catalogue moderation hooks. Approval queues, deduplication, category rules and bulk actions.
  5. Measurement and event model. Can you fire seller-scoped events to GA4 and server-side, or is tracking truncated at the order level? Pair this with a proper reporting approach from day one.

Warning: Do not choose a platform before you can describe your commission ledger and payout cycle in one paragraph. The platform must match the ledger, not the other way round.

Moderation, Deduplication and Catalogue Quality Rules That Scale Past 50 Sellers

At 10 sellers, moderation is manual and fine. At 50, the same rattan side table appears from six sellers with six descriptions and three near-identical images. The buyer gets a worse page and Google gets duplicate content. Design a moderation layer with three queues: new listing approval, duplicate review and quality flags (missing images, missing attributes, prohibited claims). Each queue needs bulk actions - approve, reject with reason, merge to canonical listing - and each rejection reason should be a selectable rule so sellers understand what to fix.

Deduplication is not auto-merge. Auto-merging produces wrong attributions and angry sellers. Run a similarity score, surface candidates to a human reviewer, and record the merge decision in the catalogue audit log.

Search and Faceted Navigation When Ten Sellers List the Same Product

Multi-seller catalogue search has a unique problem: identical products. The search layer needs to know whether it is ranking products, sellers or offers. Two design rules help: cluster offers under a canonical product where they exist, and rank offer choice within a product by seller rating, dispatch SLA, price and stock status. Faceted navigation on categories (seller, dispatch window, price range, location) must be controlled - noindex the deep filter combinations so crawl budget is spent on canonical product and category URLs, not thousands of facet permutations.

Commission Ledgers, Refunds and Dispute Flows: The Operator's Reporting Layer

The ledger is an accounting artefact and a UX surface. Design it with three views: seller view (my orders, my gross, my commission, my net, my next payout date), operator view (all sellers' ledgers, exceptions, refunds pending allocation), and finance export (payout batch file, ledger reconciliation). Refunds must be allocated back to the seller's ledger with the same commission logic applied at sale time. Dispute flows - item not as described, item not received - need a state machine that decides, per case, whether the operator or the seller carries the cost, and this decision must be visible in the ledger after the fact.

Tip: Build the operator-ledger view as a single screen with filter and export. Finance teams will not accept a ledger that requires clicking into 40 seller records.

Instrumenting Marketplace GMV, Seller Activation and Margin After Commission

Marketplace measurement has to separate operator-owned sales from seller-attributed sales, because the profit treatment is different. Platform-reported conversions at the order level are not enough - events need to carry seller identity and commission value so downstream reporting can split marketplace GMV, commission earned and net margin after commission. A minimal event schema, pushed to GA4 via server-side tagging, looks like this:

// view_item_list - carries selling tenant
{
  event: 'view_item_list',
  ecommerce: {
    item_list_id: 'category_rattan_furniture',
    items: [
      { item_id: 'SKU-2041', item_name: 'Rattan Side Table',
        tenant_id: 'seller_017', tenant_name: 'Kalk Bay Rattan',
        price: 1899.00, currency: 'ZAR' }
    ]
  }
}

// purchase - split across sellers, carries commission
{
  event: 'purchase',
  transaction_id: 'ORD-88213',
  ecommerce: {
    currency: 'ZAR', value: 4297.00,
    items: [
      { item_id: 'SKU-2041', tenant_id: 'seller_017',
        seller_id: '017', commission_rate: 0.12,
        commission_value: 227.88, price: 1899.00, quantity: 1 },
      { item_id: 'SKU-1180', tenant_id: 'seller_004',
        seller_id: '004', commission_rate: 0.12,
        commission_value: 287.76, price: 2398.00, quantity: 1 }
    ]
  }
}

Three measures matter on top of standard ecommerce reporting: seller activation rate (sellers who reach first live listing within a target window), marketplace GMV share (third-party revenue as a percentage of total revenue) and net margin after commission (gross revenue, less commission paid out, less platform operating cost). Also track support contact rate per seller and return rate split between operator and seller stock. These flag onboarding and catalogue quality problems long before revenue does.

In a vendor marketplace, the buyer's personal information flows through the operator and is disclosed to the seller for fulfilment. Under POPIA, the operator is generally the responsible party and the seller is an operator or a separate responsible party depending on the arrangement - a legal question to confirm, not to guess. From a design perspective the obligations are concrete: capture consent for the disclosure, restrict the seller panel to only the data the seller needs to fulfil (name, address, contact - not the buyer's full profile), log access to buyer data by seller accounts, and publish clear retention rules. Route buyer-seller messaging through the platform where possible, so contact data is not persistently exposed.

What "Good" Looks Like Six Months After Launch - A Framework, Not a Guarantee

Six months after launch, an efficiently built SA vendor marketplace tends to be measurable on six signals: high seller activation rate, stable listing quality (moderation queue hit rate falling), growing marketplace GMV share, return rate not rising disproportionately on third-party stock, net margin after commission covering platform cost, and support contact rate per seller declining. None are guarantees - they are the framework a well-designed marketplace is measured against. If any drifts the wrong way, the cause is usually in the seller panel, the onboarding flow or the moderation layer, not the storefront theme.

Trade-offs by Scale: When to Stay on an App and When to Move to a Dedicated Platform

An app or plugin stack on Shopify or WooCommerce carries operators well through early marketplace scale, and the trade-off is customisation. A dedicated multi-vendor platform such as CS-Cart or Sharetribe carries further on features but constrains design. A headless custom build on Magento, SAP Commerce, commercetools, Medusa or Hydrogen removes those ceilings at a much higher build and maintenance cost. The trigger for moving is rarely seller count alone - it is commission-ledger complexity, payout cycle control, or catalogue governance rules the plugin cannot express. Design the marketplace so the ledger, the seller panel and the event model are separable from the storefront, and the move between platforms becomes an engineering migration rather than a rebuild. In every case, pair the build with a proper web design and development approach and a conversion optimisation plan that starts on the seller panel and the split cart, not the homepage.

Sources

Get a Quote

Why Choose Us

Here's what sets us apart

  • 500+ Expert Articles

    A content hub covering SEO, paid media, CRO and web design for South African businesses.

  • 200+ Success Stories

    Campaigns and builds delivered across retail, services, B2B and ecommerce.

  • 200+ Happy Clients

    Businesses that trust Prebo Digital with their digital growth.

  • 4.9 Average Rating

    Rated 4.9 out of 5 across verified Google reviews.

  • 24h Response Time

    Questions answered within one business day, every time.

  • Google Premier Partner

    Premier Partner status since 2022, placing us in the top 3% of agencies.

  • Amazon Verified Partner

    One of the first verified Amazon Ads partners in South Africa.

  • Meta Business Partner

    Certified to run paid social across Facebook, Instagram and beyond.

What Our Clients Say

Don't just take our word for it

Featured

“Great service and professional team.”

ES
Emelda Schuster
Featured

“Shout out to Leesha @Prebo Digital for great diligence and care handling our Google Ads account. Other agencies take your money and do nothing until you ask. Not Leesha & Prebo Digital. They do what they say and show up with a friendly face. Work to fix issues. Highly recommended.”

BS
Bradley Schmidt
Featured

“Excellent service and support.”

DB
Des Brown
Featured

“Very skilled and knowledgeable in the digital industry and you understand the importance of budgets. Start-ups do not have hundreds of thousands to spend at first and you guys really make the most of every budget provided.”

CS
Cat street
Featured

“Prebo will take your business to the next level. Extremely smart people, great service. Always go above and beyond.”

MG
Mike Gray
Featured

“A dedicated, knowledgeable and enthusiastic team of individuals that are determined to see your brand grow!”

AW
Alastair Waldeck
Featured

“A great agency to work with that always provides excellent service. Very professional and dedicated team.”

LV
Lynelle van Niekerk
Featured

“In the 4 months since we joined hands with Prebo our leads quantity and quality has increased with much more direct impact on our target market. The team is on point and forever in contact with new ideas and solutions to maximize our potential within the set budget cap. Very innovative group of people!”

RB
Rikus Booyens
Featured

“Great service from Prebo Digital team.”

MC
Mothusi Calvin Mogorosi
Featured

“Great Agency - growth-minded, a diverse team of talented individuals with collaborative success at its heart”

DD
David Delaney
Featured

“Outstanding digital marketing services.”

DD
DUNCAN DUNSHAM
Featured

“Industry experts!”

RB
Ricardo Banda
Featured

“Excellent work and professional service.”

MM
Menzi Mohale
Featured

“Expertise, ethos, excellence”

AJ
Andrew Johnson
Featured

“Professional and reliable service.”

ED
Ebert Du Plessis
5.0/ 5
15 reviews

Keep reading

Related Articles

web-design-and-development — web-design heroWeb Design

SaaS Ecommerce Platform Design: The Self-Serve Purchase Flow Playbook for Subscription Businesses

Scenario: The Johannesburg SaaS at R2m ARR Where Signups Rise and Activated Accounts Do Not Picture a hypothetical B2B SaaS company in Johannesburg selling a project management tool to mid-sized firms. ARR sits around R2 million. LinkedIn and Google Ads drive traffic to a pricing page listing three plans. The signup form is short: work email, password, company name. Monthly signups have grown 40% quarter on quarter. Yet activated accounts - teams that create a project, invite a colleague, and hit the first value milestone - have barely moved. Trial-to-paid conversion sits at 8%, well below the 15-25% industry-typical range for self-serve B2B software. Blended CAC is rising because paid channels keep filling the top of the funnel while the bottom leaks. The CFO asks: “We are paying for trials, but are we paying for revenue?” This scenario is hypothetical and used to illustrate the design and measurement decisions that follow. It is not a client case study. The problem is not traffic. It is that the self-serve purchase flow - from pricing page to activated subscription - was treated as a marketing page, not as a commerce system. Fixing it means designing the entire journey: pricing surface, signup, in-product onboarding, paywall logic, and the event data that ties them together. SaaS Ecommerce Platform vs SaaS That Sells Ecommerce: Separating Two Ideas the Keyword Blends The phrase “SaaS ecommerce platform design” gets used for two very different things. Clarity here determines whether you brief a designer about a storefront or about a billing and account experience. Interpretation Who the reader is Primary surfaces to design Typical platforms SaaS ecommerce platform (a hosted storefront) Merchant selling physical or digital goods Product pages, cart, checkout Shopify, BigCommerce, Squarespace, Wix, commercetools SaaS business that bills subscriptions Product or marketing lead at a subscription software company Pricing page, signup, trial, account area, upgrade prompts Stripe Billing, Chargebee, Recurly, Paddle, Lemon Squeezy The first is a storefront design problem: catalogue, merchandising, cart abandonment. The second is a subscription commerce problem: trial conversion, expansion revenue, churn. This article focuses on the second - the self-serve purchase flow for subscription software - while acknowledging that some readers may also be evaluating hosted commerce platforms to sell their product. If you are a B2B SaaS or subscription business, anchor every design decision to SaaS economics: MRR, ARR, net revenue retention, churn, CAC payback, LTV:CAC, blended CAC and MER. Not revenue per session. Design choices on a pricing page or trial expiry screen directly influence these metrics. Where the Commerce Layer Actually Sits: Hosted Platforms, Billing Engines and In-Product Onboarding In a self-serve SaaS, the commerce layer is a sequence of connected surfaces, each with its own design logic and tracking requirements: Pricing page - where a visitor compares plans and decides whether to start a trial or book a demo. Signup/checkout - account creation, payment method capture, and consent collection. In-product onboarding - guided setup, first-value milestones, and usage prompts. Paywall or upgrade prompt - where a trial ends or a feature limit is reached. Account area - seats, usage dashboards, invoices, plan switches, cancellation. A billing engine such as Stripe Billing or Chargebee handles the transaction, tax, and invoice logic. But the design of the experience around it determines whether users convert and expand. If the account area shows usage against limits, that surface becomes an expansion lever. If it hides seat management, expansion is unlikely. Hosted commerce platforms like Shopify are built for product catalogues, not for managing subscription seats or usage-based pricing. If your model involves per-seat or metered billing, a dedicated billing engine is usually the better fit. Do not force a storefront platform to behave like a subscription management system. Pricing Page as the Primary Commerce Surface: Three Layout Patterns and When Each Fits The pricing page is where the sale starts. Three common patterns serve different pricing models: Pattern Best for Tracking implications Tier table (2-4 plans, feature list) Simple per-seat or flat-rate pricing Track clicks per plan; need dataLayer events for each CTA Usage calculator (sliders, estimates) Usage-based or metered pricing Track calculator interactions; server-side events for quote requests Quote builder (configurable options) Enterprise or hybrid sales-assisted models Track step completions; pass lead score to CRM For a self-serve SaaS, the tier table is the most common starting point. But if your pricing is usage-based, a static table creates anxiety: users cannot predict their bill. A calculator that updates an estimate as they adjust a slider reduces that friction. It also generates a valuable event: calculator_used with the estimated value, which can be sent to your CRM or ad platform as an intent signal. When designing a tier table, limit choices to three or four plans. Beyond that, choice overload reduces conversion. Use anchoring: place your most popular (or highest-value) plan in the middle or centre-left, and make the default selection visually distinct. Named-logo social proof above the table - “Trusted by [Company A], [Company B]” - is a behavioural lever that works if the logos are recognisable to your audience. Trial, Freemium and Reverse Trial: Designing the Signup and Expiry Experience Around Acquisition Economics The trial model you choose affects CAC payback and conversion rate. Three structures dominate: Free trial (time-limited): Full access for 7-14 days, then paywall. Common in B2B SaaS. Requires clear expiry messaging and a frictionless upgrade path. Freemium (feature-limited): Permanent free tier with limited seats or features. Lowers acquisition friction but can attract low-intent users who never convert. Reverse trial: Start with full access, then downgrade to free tier after a period. Uses loss aversion to drive conversion. Works best when the product’s value is obvious during the trial. Design the signup experience around the trial model. For a time-limited trial, the signup form should capture only what is needed to start: work email, password, and consent. Do not ask for company size, phone number, or role unless that data is immediately used to personalise onboarding. Every extra field reduces completion. The expiry experience is equally important. Instead of a hard lock, use a grace period with a downgrade path. Loss aversion is powerful: show what the user will lose (e.g., “Your team will lose access to [Project X] and [Report Y]”). Provide a one-click upgrade that preserves their data. This reduces churn and increases conversion. Measure trial-to-paid conversion as your primary checkout completion metric. Industry-typical ranges for self-serve B2B SaaS sit between 15% and 25%, but this varies widely by price point and product complexity. Use your own baseline to set improvement targets. The Self-Serve to Sales-Assist Handoff: Routing Enterprise Signals Without Breaking the Flow Many SaaS businesses operate a hybrid model: self-serve for small teams, sales-assist for larger opportunities. The design challenge is to detect enterprise intent without forcing every user through a sales conversation. Signals that suggest a sales-assist opportunity include: selecting a plan above a certain seat count, using the usage calculator with high values, requesting a custom quote, or signing up with a corporate email domain that matches your target account list. Route these signals to your CRM with a lead score, but keep the self-serve flow intact. Do not block the trial - let the user proceed while a sales rep reaches out in parallel. Design the pricing page to support this: include a “Contact sales” link alongside the self-serve CTAs, but do not make it the primary action. The primary action should always be the self-serve path. Sales-assist is an enhancement, not a gate.

Oct 15, 202612 min read
Read more
web-design-pricing — web-design heroWeb Design

Headless Ecommerce Web Design: The Decoupled Storefront Playbook for Design, SEO and Tracking

Scenario: The R2m-a-Month Shopify Store Where the Content Team Is Blocked and CPCs Keep Climbing Picture a mid-market retailer turning over roughly R2 million a month on Shopify. The catalogue spans three categories, the merchandising team wants a campaign-specific landing page for every product drop, and the content team is writing into a theme that only exposes the fields the theme developer anticipated two years ago. Every new module needs a developer ticket. The product page ships the same 1.4 MB of JavaScript to a user browsing two products. Meanwhile, Google Ads CPCs creep up because the landing experience is slow at p75 on mid-range Android devices - the segment doing most of the paid traffic. That is the situation headless ecommerce web design is actually built for: not a technology upgrade for its own sake, but a response to merchandising velocity and paid-media efficiency constraints that a monolithic theme cannot resolve. This playbook covers the decisions a marketing director, e-commerce manager or technical lead has to make before briefing an agency or an in-house team - architecture, design systems, SEO preservation, tracking rebuild and the honest cost model. Headless is not a performance patch. It removes a ceiling; it does not automatically lift you to that ceiling. If your Core Web Vitals problem sits in third-party scripts, a decoupled front end will simply inherit the same tax in a new framework. Why Headless Ecommerce Web Design Is a Measurement and Merchandising Decision, Not a Stack Decision The reason to decouple a storefront is almost never 'because React is faster'. It is because the presentation layer needs to move at a different cadence to the commerce engine. Merchandising wants to publish a new collection page template, a size-guide microsite or a market-specific landing experience without waiting on a cart or checkout release. Paid media wants landing pages that match ad intent precisely, with server-rendered content and correct structured data so that Google understands the page. Once the presentation layer is a separate codebase, the design system becomes the product. There is no theme marketplace to fall back on. Design tokens, component libraries, editorial CMS fields and merchandising rules all become assets your team owns - which is exactly why the cost conversation has to happen before the build conversation. Speaking to a partner who already runs this model, such as the team behind Prebo Digital's web development service , usually surfaces the trade-off quickly: you are buying velocity and control, and you are paying for it in engineering. What Actually Gets Decoupled: Commerce Engine vs Presentation Layer, Explained Without Jargon In a headless build, the commerce engine continues to own products, variants, pricing, inventory, carts, customers and orders. It exposes those through APIs - for Shopify that is the Storefront API (GraphQL) and the Customer Account API. The presentation layer is a separate application, typically built with Next.js, Nuxt, Remix, Astro or Shopify's own Hydrogen framework, which fetches data at build time or on request and renders the HTML your visitors see. What that means in practice for a design team is roughly the following: Product, collection and editorial page templates are code, not JSON theme sections. Apps installed from a theme marketplace are replaced by API integrations, each of which needs a home in the data layer. Cart state is managed in your front end and synchronised with the commerce engine, which changes how upsell and bundle experiences are designed. Search, filters and cross-sell logic are either rebuilt or delegated to a search service such as Algolia or Typesense. Rule of thumb: every Shopify app that renders UI in a theme becomes at least one API integration, one caching decision and one piece of error handling in a headless build. Audit your installed apps before you approve a scope. Headless, Composable and MACH: Sorting the Vocabulary Before You Brief Anyone Three overlapping terms appear in most headless briefs, and vendors use them interchangeably. Term What it actually means Where it fits Headless A commerce backend consumed via APIs, with no coupled front end Architectural starting point Composable Best-of-breed services (search, CMS, payments, CDP) composed together Broader strategy around the headless core MACH Microservices, API-first, Cloud-native, Headless - a vendor categorisation Useful shorthand for procurement and RFP language For procurement purposes, treat headless as the architectural choice and composable as the surrounding decision about which services you assemble. MACH is the label the vendor community uses for the same stack, and it is worth knowing so that you can read vendor documentation without being sold a different idea of the same thing. Which Platforms Support a Headless Storefront - and What Each One Costs You in Engineering Most modern commerce platforms have a headless path. The differences that matter are the maturity of the APIs, the checkout constraints and the ecosystem of front-end frameworks you can reasonably use. Platform Front-end options Checkout flexibility Engineering overhead Shopify (Hydrogen/Oxygen or any framework via Storefront API) Hydrogen, Next.js, Remix, Astro, Nuxt Shopify checkout on all plans; Checkout Extensibility on Plus Moderate - well-documented, wide talent pool BigCommerce Next.js, Nuxt, Gatsby, Catalyst Checkout SDK and custom checkout options on higher tiers Moderate - APIs are mature, ecosystem smaller than Shopify Commercetools Any - fully front-end agnostic Fully custom, you build and own the checkout High - enterprise-grade, requires a dedicated team WooCommerce (via WPGraphQL / Store API) Next.js, Nuxt, Hydrogen-adjacent patterns Custom checkout required; WooCommerce Blocks not usable headlessly High - you maintain the WordPress and JS stacks Adobe Commerce (Magento) PWA Studio, Next.js, Vue Storefront Customisable, heavy platform overhead Very high - enterprise licensing and ops cost The pattern is consistent: the easier the headless path, the more constrained the checkout. Shopify and BigCommerce give you a fast route to a live headless storefront because they keep you inside their checkout. Commercetools and WooCommerce give you full control, but you pay for that control with a front-end team, a hosting bill and a release process that your marketing team probably has not been briefed on. Shopify Hydrogen, BigCommerce, Commercetools, WooCommerce Headless and Adobe Commerce Compared Hydrogen ships with routing, data loading and a sensible caching model for the Storefront API, and it deploys naturally to Oxygen. BigCommerce's Catalyst starter offers a similar shape. Commercetools assumes you already have a platform engineering function. WooCommerce headless is usually a Next.js front end talking to WPGraphQL for content and the WooCommerce Store API for cart and checkout - viable, but you own two ecosystems. Adobe Commerce headless is a serious undertaking and generally only justified when the business already runs Magento at scale. The Checkout Boundary: What You Can and Cannot Decouple on Shopify Basic, Grow and Plus This is the most over-promised part of headless ecommerce. On Shopify, the checkout itself is not headless unless you are on Plus, and even then it is governed by Checkout Extensibility rather than a completely custom surface. The Storefront API is available across plans with rate limits, but the checkout step stays inside Shopify's hosted flow on Basic and Grow. Practically, that means you can present a highly customised product discovery, cart and upsell experience, then hand the user to Shopify's hosted checkout. The visual language of the checkout can be themed, but not fully rewritten outside Plus. Any agency promising a completely bespoke checkout on a Basic or Grow plan is either overselling or planning to route you through a third-party checkout - which has its own compliance and conversion consequences. What a Headless Design System Actually Looks Like: Tokens, Components and CMS-Driven Merchandising Without a theme, your design system is the storefront. In a well-run headless build, that means design tokens (colour, spacing, typography, radius) held in a single source of truth and consumed by both Figma and code, a component library reviewed in isolation with a tool such as Storybook, and editorial fields in a CMS - Sanity, Contentful, Storyblok or similar - that map directly to those components. Merchandising then becomes a data exercise. A collection page's layout, sort rules and promotional modules are defined in the CMS and the search service, not in a theme editor. That is what allows a content team to launch a campaign-specific landing page in a day instead of a sprint. It is also what allows the marketing team to run proper experiments - variant landing pages for paid traffic, structured-data variations, different above-the-fold treatments - without a developer in the loop for every change. The cost of this is that every one of those components has to be designed, engineered, tested and maintained. A theming exercise that used to be a five-day design project becomes a two-month system build with a retainer afterwards. That is the trade you are making when you choose headless design.

Oct 15, 202614 min read
Read more
how to read web design quote avoid hidden fees — web-design heroWeb Design

Shopify Store Design South Africa: The Storefront Playbook for SA Payments, Couriers and Checkout Reality

Context: The Cape Town Apparel Store Where the Cart Works but the Gateway Loses People A Cape Town apparel brand runs Meta ads to a mobile audience. The product pages look sharp, add-to-cart rates sit comfortably above the platform benchmark, and abandoned-cart emails recover a slice of revenue. Then the numbers stall: completed orders trail cart creation by a wide margin. The leak is not the design of the cart. It is the moment the shopper leaves the Shopify domain for a redirect-based payment gateway such as PayFast, Ozow, or a BNPL provider, lands on an unfamiliar page, and either abandons or fails the payment and never returns to a branded thank-you page. This is the specific production problem Shopify store design in South Africa has to solve. It is not a colour-palette exercise. It is a platform-constraint problem, a payment-gateway UX problem, and a trust-signal problem, and the decisions that matter most sit in places most design briefs never mention. Why Shopify Design in South Africa Is a Platform Constraint Problem, Not a Taste Problem Shopify gives you an unusually opinionated canvas. The theme controls the storefront. The checkout controls the transaction, and the checkout is locked outside of Plus. On Basic and Grow plans you cannot edit checkout.liquid ; you configure checkout branding, logo, colours, typography, and a small set of settings. Checkout extensibility functions are Plus-only. That single fact reshapes the whole brief: the job on a South African storefront is to make the shopper’s intent survive the handoff to a third-party payment page you do not control. Design implication: if the plan is Basic or Grow, every rupee of checkout completion improvement must come from the cart page, the cart drawer, order confirmation copy, and the surrounding trust signals, not from editing checkout itself. Shopify Payments availability for South Africa-domiciled merchants has shifted over time. Before any design decision is made, verify the current supported-countries list on Shopify’s help centre. If Shopify Payments is unavailable, the gateway stack becomes PayFast, Peach Payments, Yoco, PayGate, Ozow, or Stitch, plus BNPL options. Each of those has its own redirect behaviour, its own success and failure URLs, and its own copy. Online Store 2.0: Sections, Blocks, JSON Templates and Section Groups Explained for SA Merchants Modern Shopify themes use Online Store 2.0: JSON templates, sections that can appear on any page, blocks inside sections, and section groups for the header and footer. Practically, that means a South African merchant can reorder trust badges, delivery ETAs, and payment logos without touching code, and can build a reusable “size guide” or “spec table” section that appears on every product page via a metafield reference. Metafields and metaobjects are the mechanism. A size guide metafield attached to a product, rendered by a themed section, means the operations team updates sizing once and every PDP reflects it. The same pattern handles spec tables (fabric weight, GSM, care instructions), delivery windows per courier, and warranty terms. Sections beat hard-coded templates because they survive theme updates and handovers. The Checkout Boundary: What You Can and Cannot Design on Basic, Grow and Plus Surface Basic Grow Plus Checkout branding (logo, colours, typography, banner) Yes Yes Yes Edit checkout.liquid No No Yes (legacy) Checkout UI extensions No No Yes Custom thank-you page and order-status page No No Yes For most South African merchants on Basic or Grow, the realistic levers are upstream of checkout: the cart drawer, the cart page, the announcement bar, the product page FAQ, and the post-purchase order-confirmation email. Designing the Product Page: Metafields, Metaobjects, Size Guides and Spec Tables A South African PDP has to answer four questions before the cart button is tapped: what is this, what does it cost in rand including VAT, how long will delivery take, and can I return it. Metafields handle the last three. Metaobjects let you build repeated structures, such as a courier table with columns for region, courier, estimated working days, and cost. Themed sections render that table identically on every PDP, which removes the stock inconsistency that kills paid-traffic conversion. Build the spec table and size guide as sections backed by metaobjects, not as hard-coded HTML. It costs more upfront and far less over a twelve-month theme lifecycle. Collection and Navigation Design: Merchandising Rules That Survive a Paid Traffic Spike Collection pages break first under paid traffic. A search collection with AI-sorted results will reshuffle when inventory shifts, so pin the hero SKUs and design the grid to hold a stable first row. Use Shopify’s native filters for size, colour, and price band; avoid third-party filter apps that render client-side and reorder the DOM after paint. Navigation should expose the top three collections in the header and leave the long tail to the mega-menu. When a campaign sends ten thousand sessions to a collection in a day, pinned merchandising is what keeps the page legible. Cart Drawer vs Cart Page: Choosing the Right Pattern for ZAR Pricing and Free-Shipping Thresholds A cart drawer suits single-category stores with a small AOV and a clear free-shipping threshold. A cart page suits apparel and multi-category stores where cross-sells, gift notes, and courier selection matter. The decision should follow the funnel: if most sessions add one item and leave, the drawer reduces friction; if most sessions add two or more, the cart page earns its space. Both surfaces must show the ZAR total inclusive of VAT, the free-shipping progress bar, and the delivery estimate before the shopper taps checkout. Designing Around South African Payment Gateways: PayFast, Peach Payments, Yoco, Ozow and BNPL Redirects Each gateway has a distinct redirect pattern. Card gateways typically return the shopper to Shopify’s order-status page. Instant EFT providers hand off to a bank-selection screen and then back. BNPL providers, including Payflex, MoreTyme, and PayJustNow, run their own eligibility check before returning. Design must set expectations. On the cart page, name the gateways accepted, show their logos, and state that payment happens on a secure partner page. In the order confirmation email, use gateway-specific copy: “Your Ozow payment is complete” reads very differently from “Your card payment is processing”. Instant EFT Behaviour and Why It Changes Your Confirmation Copy Instant EFT is not instant in the shopper’s mind. They leave the store, log into their bank, approve, and return. Confirmation copy must acknowledge the gap: “If your bank shows a pending debit, your order is confirmed.” That single line pre-empts most support tickets. Pair it with a WhatsApp support button on the order-status page. Explore how conversion rate optimisation applies to SA payment flows.

Oct 14, 202610 min read
Read more
web design fixed price vs hourly vs retainer 2026 — web-design heroWeb Design

WordPress Ecommerce Design Guide: Building a WooCommerce Store That Converts

Context: The WooCommerce Store That Looks Fine and Converts Poorly Consider a hypothetical South African apparel brand running WooCommerce on a classic theme. The storefront looks polished in design reviews and traffic is stable, yet revenue per session drifts downward. An audit finds roughly 38 active plugins, a shortcode-based checkout, three plugins each injecting their own jQuery carousels, and a product template overridden four theme versions ago. The problem is not aesthetic but architectural: design decisions are tangled inside legacy PHP templates, plugin scripts, and a theme that no longer matches how WooCommerce evolves. This WordPress ecommerce design guide treats design as a platform-mechanics discipline, where visual decisions, template structure, script loading, and measurement are governed deliberately rather than inherited by accident. These principles feed directly into conversion rate optimisation and into the site build itself on our web design and development service. Why WordPress Ecommerce Design Is a Platform Decision, Not a Taste Decision WooCommerce is a WordPress plugin, and its design output is governed by the active theme plus any template overrides in that theme. Changing a colour is a token change; moving the add-to-cart form requires touching the single-product template; changing checkout layout depends on whether you run shortcode or block checkout. Each lives in a different layer of the stack. Treat design as four stacked layers: design tokens (colour, spacing, type), templates (shop archive, single product, cart, checkout, my-account), blocks and patterns, and the script layer (what plugins enqueue on the front end). A taste-led redesign usually edits only the top layer, which is why so many WooCommerce redesigns look better in Figma than in the browser. If you cannot describe your store as tokens, templates, blocks, and scripts, you do not yet have a design system - you have a theme. Block (FSE) Themes vs Classic Themes: What Changes for WooCommerce Design Block themes define design via theme.json and editable Site Editor templates; classic themes use PHP template files and the Customizer. For WooCommerce the difference is practical. Dimension Block / FSE theme Classic theme Design control theme.json tokens + Site Editor templates PHP templates + Customizer options Maintenance Edits in admin, less custom code Edits often require child theme code WooCommerce templates Increasingly block-based for archive and single product Override via /woocommerce/ folder in child theme Performance Smaller default CSS, but block styles can add weight Depends on theme framework and plugins Neither path is automatically faster. The decision should follow your team's editing model: if marketing must change product page layouts without a developer, block themes remove a dependency. With in-house PHP capability and a stable design, a classic child theme remains viable. The WooCommerce Template Set You Actually Need to Design Scope these templates explicitly rather than working page-by-page in the editor: Shop archive (product grid, sorting, filtering) Single product (gallery, variations, add-to-cart, tabs, related items) Cart (line items, quantity, coupon area, cross-sells) Checkout (contact, addresses, shipping, payment, order review) My Account (login, orders, addresses, payment methods) Order confirmation / thank-you page Designing the homepage hero, blog, or about page is standard web design work. The templates above are where WooCommerce mechanics live, and where most redesigns quietly break: coupon fields that vanish on mobile, my-account pages falling back to default styling, order confirmation screens that do not match the brand. Designing the Product Page: Blocks, Patterns, and Template Overrides On a classic theme, the single-product layout lives in woocommerce/content-single-product.php , and customisations belong in a child theme copy - never in plugin files, which are overwritten on update. On a block theme, the same layout is a block template editable in the Site Editor, with Woo-specific blocks for gallery, summary, and add-to-cart. Three product-page decisions drive conversion more than visual polish: Where the add-to-cart form and price sit relative to the gallery on mobile (thumb reach matters more than hero imagery) How variations are presented - dropdown, swatches, or buttons - and whether out-of-stock variations silently disappear Whether the page loads the same script bundle on a single-SKU product as on a variable one with 40 SKUs A product template override copied from an old WooCommerce version will not inherit later template changes. Track this with WooCommerce's template update warnings under WooCommerce → Status. Cart and Checkout: Shortcode Checkout vs Block Checkout WooCommerce has progressively moved Cart and Checkout to block-based experiences. The two paths differ in ways that affect design and testing: Shortcode checkout - [woocommerce_checkout] inside a page. Layout is controlled by PHP templates and hooks; customisation typically requires code and solid knowledge of Woo hooks. Block checkout - built from Cart and Checkout blocks, editable in the Site Editor. Layout, field order, and express payment placement need fewer code changes, though deeply non-standard layouts can require block development. If your team needs to test checkout layout variations without shipping code each time, block checkout removes friction. If your checkout relies on heavy legacy customisation (gift messaging, bespoke address validation), audit those hooks before migrating - a move to block checkout is not a one-line swap and should be staged. Number your checkout fields, count them on mobile, and treat every removed field as real friction reduction - each field should be a conscious decision, not an inherited one. Controlling the Plugin and Script Layer Before It Controls Your Design Every plugin touching the front end enqueues its own CSS and JavaScript. Left unmanaged, this is the biggest cause of WooCommerce stores that look fine in isolation and feel slow in practice. Start with an inventory. If you have WP-CLI: wp plugin list --status=active --format=table wp plugin list --status=inactive --format=table For each active plugin, note whether it loads anything on the front end, whether it loads on every page or only where needed, and whether an alternative loads conditionally. Common offenders include review widgets, chat widgets, upsell tools, and abandoned-cart scripts that fire site-wide even when no cart exists. Moving a script to load only on product or checkout pages is often more impactful than a new colour palette. Make plugin governance a standing item: fix a maximum active plugin count, require written justification for any plugin loading front-end assets on every page, and review quarterly. The aim is not minimalism - it is knowing exactly what loads and why.

Oct 14, 202610 min read
Read more

Need Help?

Office 17, Block A, Willowbrook Office Park, Roodepoort, 1724

Get Design Consultation

Speak with our web design specialists. Free design mockup & consultation.

GET FREE DESIGN QUOTE

Why Choose Us for Web Design

What working with Prebo Digital gets you on every Web Design project

Modern Design Focus

Clean, current interfaces built around your brand rather than a stock template.

Mobile-First Approach

Designed for mobile first, where the majority of South African traffic lands.

Fast Loading Sites

A 2.5 second average load time across the 300+ websites we have built.

Shopify Partners

Official Shopify partners for ecommerce builds, migrations and support.

Why Choose Us

Here's what sets us apart from the competition

500+ Expert Articles

A content hub covering SEO, paid media, CRO and web design for South African businesses.

200+ Success Stories

Campaigns and builds delivered across retail, services, B2B and ecommerce.

200+ Happy Clients

Businesses that trust Prebo Digital with their digital growth.

4.9 Average Rating

Rated 4.9 out of 5 across verified Google reviews.

24h Response Time

Questions answered within one business day, every time.

Google Premier Partner

Premier Partner status since 2022, placing us in the top 3% of agencies.

Amazon Verified Partner

One of the first verified Amazon Ads partners in South Africa.

Meta Business Partner

Certified to run paid social across Facebook, Instagram and beyond.

Frequently Asked Questions

Find answers to common questions

We provide functional, intuitive, and aesthetically engaging website designs optimized for user experience and conversions.

Our expertise includes Shopify, WordPress, Magento, and custom development solutions.

We focus on best practices in user experience navigation, mobile-first responsive design, and intuitive interfaces.