# Ecommerce Homepage > How to design an ecommerce homepage that attracts more customers: the first screen, zone-by-zone anatomy, promotional content and mobile-first design. - Type: Store page blueprint - Level: Intermediate - Reading time: About 20 minutes - Audience: Written for store owners, builders, and designers refining high-performance ecommerce stores. - Last updated: 2026-10-30 - Canonical page: https://academy.getzenbasket.com/store-pages/ecommerce-homepage/ - Part of: [Store pages](https://academy.getzenbasket.com/store-pages/) on ZenBasket Academy --- ## What an ecommerce homepage is actually for The homepage attracts more design opinions than any other page in a store, and it is usually the page those opinions matter least on. Two uncomfortable facts explain why. First, for most established stores the homepage is not where most sessions start. Search engines send people directly to product and category pages, ads land on dedicated pages, and email and social links go straight to what they are advertising. Second, the visitors who do arrive on the homepage are disproportionately first-timers and brand searchers. They are not there to buy the thing in your hero. They are there to work out what you are. **Design the page against four jobs, in this order:** **Job 1: Say what this store is and what it** **sells.** A visitor should be able to describe your store in one sentence within a few seconds of landing. That means the homepage must communicate category. It also must communicate scope, and this is where most homepages quietly fail. **Job 2: Route people onward.** The homepage is a signpost. Every visitor should have an obvious next step: search, a category, a collection, or a specific product. **Job 3: Make a first-time visitor comfortable buying.** Someone who has never heard of your store is running a quick risk assessment: is this real, will my payment be safe, will the thing arrive, can I return it, is there a human here. Delivery terms, returns policy, payment methods, contact details and genuine social proof answer that. These belong on the homepage, not only in the footer. **Job 4: Give returning customers a shortcut.** Returning customers do not need your brand story again. They need reorder, account, [order tracking](https://help.getzenbasket.com/orders), new arrivals and current offers. A homepage that treats every visitor as a stranger wastes the attention of your most valuable ones. Even without personalisation technology, a visible [account entry point](https://help.getzenbasket.com/my-account), an order-tracking link and a clearly marked "New in" section serve this job. ![1](https://bloggallery.s3.us-west-2.amazonaws.com/Zenbasket%20Docs/1_1791189449743.png) --- ## Six decisions to make before you open a design tool **Decision 1: What share of your traffic lands here?** Pull the number from analytics before the project starts. A store where 8% of sessions begin on the homepage should not spend the same effort here as one where it is 40%. The number also tells you what the page is for: a low share usually means the homepage is mostly serving brand searchers and returning customers, which changes the content mix substantially. **Decision 2: What is your first-time to returning ratio?** A new store is almost entirely first-time visitors and needs to explain itself. An established store with high repeat purchase needs shortcuts, reorder paths and fresh merchandising. Most stores need both, arranged so that explanation sits above and shortcuts sit in the header and footer where returning visitors already look. **Decision 3: Broad catalogue, narrow catalogue, or single line?** This determines the page's centre of gravity. A broad catalogue leads with navigation, the homepage's main job is helping people find their department. A narrow catalogue leads with products, because you can simply show most of what you sell. A single product line leads with argument, the homepage becomes closer to a landing page, because the decision to buy can genuinely be made here. **Decision 4: Who maintains this page, and how often?** This is the decision teams skip and regret. A homepage built around rotating seasonal campaigns needs someone updating it every few weeks. If nobody owns that, you will have a Diwali banner in March. Design for the maintenance capacity you actually have: a simpler homepage that stays current beats an ambitious one that decays. **Decision 5: How promotional is your business model?** Some stores run continuous offers, others rarely discount. That determines whether you need a permanent promotional block, or whether that space is better spent on category navigation and proof. Building promotional real estate you do not use leaves visible holes. See section 7 below for how to design this zone once you know the answer. **Decision 6: Brand-led or product-led?** A brand-led homepage leads with story and aesthetic, then routes to products. A product-led one leads with what is for sale. Fashion, beauty and lifestyle stores often justify the former, grocery, electronics, spare parts and B2B almost never do. Be honest about which you are. Brand-led homepages on functional catalogues are a common and expensive mistake. --- ## The first screen: what has to work before anyone scrolls The first screen does not need to carry the whole page. It needs to carry enough that a visitor knows they are in the right place and knows what to do next. Four things earn a spot there: - **Store identity.** The logo, so a visitor arriving from an ad or a search result knows whose site they landed on. - **A way in.** A visible search field or clear navigation entry point, for the visitor who already knows what they want. - **A category signal.** Words or imagery that name what you sell, even if the full category grid sits below the fold. - **One next action.** A single button or the search field itself. Not three competing calls to action fighting for the same click. The most common failure here is a full-bleed decorative image or video with no text overlay. It looks polished and says nothing, forcing the visitor to scroll just to find out what the store sells, which defeats the purpose of a first screen entirely. --- ## The anatomy of a homepage, zone by zone ![2](https://bloggallery.s3.us-west-2.amazonaws.com/Zenbasket%20Docs/2_1791189472357.png) | **Zone** | **What it does** | |-----------------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | Announcement bar | One line only, free delivery threshold, sale, or shipping cutoff. Rotating multiple messages makes each one invisible most of the time. | | Header | Logo, navigation, search, account, wishlist, cart. Search should be a visible open field with placeholder text, not a hidden icon. Sticky on desktop, at least logo, search and cart pinned on mobile. | | Hero | States what the store sells, a genuine offer, or a specific collection, not just mood. Headline names the category, one supporting line, one button labelled with its destination. | | Category entry points | The load-bearing zone. Labels in real text, not baked into images, whole tile clickable, images show the [category](https://help.getzenbasket.com/products/categories/) itself rather than a styled scene. | | Product showcase | A small curated set, bestsellers, new arrivals, or a seasonal edit. Real product cards with price, rating, and a working link. | | Promotional / campaign | A single, time-boxed message with its own image and its own link, a seasonal sale, a launch, a festival campaign. Separate from the announcement bar because it needs a picture and a real destination, not just a text line. Remove or swap it the moment the offer ends, a live banner for an expired sale is one of the fastest ways to look abandoned. | | Trust & proof | Delivery terms, returns window, payment methods, [review score](https://help.getzenbasket.com/store-testimonials/), real certifications. Earned signals over generic "100% secure" badges. Delivery cost stated explicitly. | | Brand story (optional) | Who you are, how it's made, why it matters, with a link to a fuller page. Valuable for craft, founder-led or premium brands, low value on commodity catalogues. | | Content & guides (optional) | Buying guides, care tips, lookbooks, useful where products need explaining, and does quiet SEO work. | | Footer | A genuine second navigation: full category list, help, shipping and returns, policies, company info, grouped under clear headings, not a legal dumping ground. | --- ## Design decisions with real trade-offs **Carousel or static hero?** Recommendation: static, unless you have a specific reason and the discipline to build the carousel properly. **Mega menu, dropdown, or flat navigation?** Use a flat bar when you have roughly seven or fewer top-level categories and shallow depth. Use a dropdown for moderate depth. Use a mega menu when you have many categories that benefit from being seen together, it is the only pattern that shows breadth without a click. **How many products should the homepage show?** Enough to convey breadth, few enough to stay a signpost. For most stores that is two or three rows of four to six products, chosen to span different categories rather than clustering in one. **Pop-ups: when, if ever?** An email capture pop-up that appears immediately on a first visit interrupts exactly the moment a stranger is deciding whether you are worth their time. **Should the header be sticky?** Usually yes on desktop, and on mobile keep at least the logo, search and cart pinned. --- ## Promotional content: banners, campaigns and sale blocks Promotional content is different from the announcement bar and deserves its own decision. The announcement bar is always-on, functional, plain text, "free delivery over ₹999". Promotional content is time-boxed, visual, and tied to a specific event or offer, "monsoon sale, up to 40% off selected styles". A banner for a sale that ended last month is one of the fastest ways a homepage signals neglect. Whoever owns the homepage should have a standing reminder to pull the banner down, or swap the image and link, the day the offer ends. --- ## Designing for mobile first Building a genuinely mobile-first homepage means a few concrete changes, not just a smaller version of the desktop one: **Reduce zones, don't just shrink them.** Rather than compressing every desktop zone into a tiny version of itself, decide which zones matter most on mobile and let others collapse into a link. A six-item category grid can become a horizontally scrollable row, a paragraph of brand story can become a single line with a link to the full page. **Design for thumb reach.** The actions used most, search, cart, menu, should sit within easy reach of a thumb, generally near the top or bottom of the screen, not buried mid-page. **Keep the hero short.** A full-screen mobile hero that takes several swipes to get past is a common cause of high bounce. The category grid or search should be reachable within a scroll or two. **Pin the essentials.** At minimum, keep logo, search access and cart fixed on mobile, matching the sticky header guidance above. **Rethink category tiles.** A horizontal scroll row or a compact two or three column grid usually works better than a single column list, which pushes everything else too far down the page. --- ## Building this in ZenBasket Everything above is platform-independent. If you are building with [ZenBasket](https://getzenbasket.com/), the homepage is assembled from drag-and-drop sections that map onto the zones in this guide, so most of the work is arrangement and content rather than development. **Sections instead of code.** Every zone in the anatomy above, header, hero, category grid, product row, promotional banner, trust bar, footer, is a pre-built section you drag onto the page or edit directly. Hover any section for the toolbar to hide, duplicate, reorder or delete it. ![8](https://bloggallery.s3.us-west-2.amazonaws.com/Zenbasket%20Docs/8_1791190951963.png) **[Header and navigation](https://help.getzenbasket.com/zenbasket-builder/header-customization/), without touching code.** Logo, category menu, search bar, wishlist, login and cart are all toggles in one panel, including whether the header stays sticky on scroll. ![9](https://bloggallery.s3.us-west-2.amazonaws.com/Zenbasket%20Docs/9_1791190907058.png) **Hero, built from real slider options.** [Static or multi-slide](https://help.getzenbasket.com/zenbasket-builder/slider/), image or video, each slide links to a real category or product, so the headline in section 5 above always points somewhere real. ![10](https://bloggallery.s3.us-west-2.amazonaws.com/Zenbasket%20Docs/10_1791190821621.png) **A dedicated promotional block.** The Attention Banner element covers exactly the zone 5 promotional content described above, its own image, its own link, and it's a two-click job to swap or remove once the offer ends, so an expired campaign never lingers by accident. ![11](https://bloggallery.s3.us-west-2.amazonaws.com/Zenbasket%20Docs/11_1791190810397.png) **Footer as a real second navigation.** Category list, policies, contact and social links are toggled on section by section, matching the "[footer](https://help.getzenbasket.com/zenbasket-builder/footer-customization/) as second navigation" guidance in section 4. ![12](https://bloggallery.s3.us-west-2.amazonaws.com/Zenbasket%20Docs/12_1791190789950.png) **Mobile handled automatically.** Layouts are responsive by default, and the header, category grid and promotional block each have their own mobile-specific settings, so the mobile-first adjustments in section 9 above are configured, not rebuilt by hand. ![13](https://bloggallery.s3.us-west-2.amazonaws.com/Zenbasket%20Docs/13_1791190771153.png) See the step-by-step build guide for homepages → Prefer to watch it built? The [ZenBasket Builder video playlist](https://youtube.com/playlist?list=PLaCV5NxaAlPc&si=ZZAwGXLWRpEOlfaG) walks through assembling a homepage from these sections, step by step. --- ## Frequently asked questions **What is a value proposition and where does it go on the homepage?** It's the specific, provable reason to buy from this store rather than anywhere else selling the same category of product, distinct from simply naming the category. It usually sits as the supporting line under the hero headline, in one or two sentences built from who it's for, what makes it different, and a concrete reason to believe it. **Should I show prices on the homepage?** Yes, wherever you show a product card. A product image with no price is a small broken promise, and price is often the first filter a visitor applies mentally. The exception is B2B or quote-based selling, where pricing is account-specific, in which case say so explicitly rather than leaving a blank. **How is a promotional banner different from the announcement bar?** The announcement bar is a permanent, plain-text line covering something always true, like a delivery threshold. A promotional banner is a temporary, visual block tied to a specific offer or campaign, and it should have its own image, its own link to the actual sale collection, and a plan for removing it when the offer ends. **How do I make a new store look trustworthy on the homepage?** Use earned signals rather than generic badges. State delivery terms and the returns window in plain text, show real payment methods, publish a working phone number or contact address, be transparent about who runs the store and where it operates from, and surface real reviews as soon as you have them. A row of stock security badges does very little, a clear returns promise and a findable human do a great deal. **What should go in an ecommerce footer?** Treat it as a second navigation: the full category list, help and contact, shipping and returns, size or buying guides, account links, policies and company information, grouped under clear headings. Many visitors scroll straight to the footer looking for delivery information or a contact route, so it deserves real design rather than being a dumping ground for legal links. **Should the homepage have a video background?** Rarely worth it. A hero video is the heaviest possible element in the position that determines your load-speed score, it usually carries no information that a still could not, and it must be muted with visible controls to be acceptable. **What is the difference between a homepage and a landing page?** A homepage serves every kind of visitor and routes them onward, it is deliberately broad. A landing page serves one campaign and one audience with a single action, and deliberately removes routes away from that action. Sending paid traffic to a homepage wastes the targeting you paid for. The exception is a single-product store, where the homepage reasonably takes on landing page characteristics.