# The Complete Guide to Fashion Ecommerce Store Design > Design a fashion store that answers will it suit me and will it fit me: photography, size guides, variants and collection organisation. - Type: Industry playbook - Level: Intermediate - Reading time: ** 12 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/industries/fashion-apparel/ - Part of: [Industry playbooks](https://academy.getzenbasket.com/industries/) on ZenBasket Academy --- ## What Makes a Fashion Store Work A fashion store is designed around two questions a shopper cannot answer alone: *will it suit me* and *will it fit me*. Photograph every style on a real person as well as flat. Keep one product per style with colour and size as variants. Give a size guide that matches the actual garment, in centimetres and inches, and say what size the model is wearing. Let people filter by the sizes you actually have in stock. Then treat returns as a normal part of selling clothing, because they are. --- ## What this guide covers 1. [Why fashion stores are designed differently](#1-why-fashion-stores-are-designed-differently) 2. [Collection organisation](#2-collection-organisation) 3. [Size and colour variants](#3-size-and-colour-variants) 4. [Size guides](#4-size-guides) 5. [Product photography](#5-product-photography) 6. [Lookbooks](#6-lookbooks) 7. [Filters](#7-filters) 8. [Returns](#8-returns) 9. [Mobile product pages](#9-mobile-product-pages) 10. [Related accessories](#10-related-accessories) 11. [Choosing a ZenBasket theme for your fashion store](#11-choosing-a-zenbasket-theme-for-your-fashion-store) 12. [Building it in ZenBasket](#12-building-it-in-zenbasket) 13. [Frequently asked questions](#13-frequently-asked-questions) --- --- ## 1. Why fashion stores are designed differently Fashion shoppers browse to discover, then try to predict how a garment they cannot touch will look on a body the website has never seen. Four consequences shape everything below. | The difference | What it does to your store | |---|---| | Fit cannot be judged from the page | [Sizing](https://help.getzenbasket.com/products/product-size-chart/) stops being a detail and becomes a conversion element. Get it wrong and you pay twice — abandoned carts, then returns. | | One product is thirty products | A shirt in five colours and six sizes. How you group them decides your URLs, your listing page and your stock admin. | | The image is the product | Photography carries the information a specification table carries in electronics — which makes image quality and image weight the same problem. | > **One claim worth arguing with:** for a new fashion store, photography budget beats design budget. A plain theme filled with excellent images outsells a distinctive one filled with mediocre images. Spend on a photographer and a model day first, then pick a theme that shows large images well. --- ## 2. Collection organisation Fashion stores need two structures at once, and confusing them is the most common information-architecture mistake in the category. - **Categories are permanent.** Dresses, Shirts, Footwear. They exist next year, they carry search traffic all year, and they are never deleted. - **Collections are campaigns.** Festive Edit, Summer Linen, The Denim Edit. They spike, then fade, and they need an end-of-life plan. If you sell to more than one audience, that split — women, men, kids — is the first choice in the menu and the first level of the URL. Everything else is a category beneath it, and anything that is really an attribute (colour, fabric, occasion) belongs in filters, not in the menu. ![1](https://bloggallery.s3.us-west-2.amazonaws.com/Zenbasket%20Docs/1_1791191515841.png) ### URL rules that survive a season change - Categories get short, permanent URLs describing the garment: `/women/dresses/`, never `/aw26-womens-dresses/`. - Collections live on their own path so they are visibly temporary. - A recurring collection — festive, summer, back to school — keeps its URL and is refreshed each year. Deleting it discards the authority the campaign earned. - A finished collection redirects to its parent category. Never leave an empty page live. - A discontinued style keeps its page while stock may return, marked out of stock with alternatives shown. Give **New in** and **Sale** permanent navigation slots and permanent URLs, populated by a rule — newest additions, anything reduced — rather than a hand-picked list someone has to maintain. Returning customers go straight there, and the pages accumulate authority instead of being rebuilt every season. **Brands:** Explore how to organise and showcase brands effectively in your fashion store. **Badges:** Use [product badges](https://help.getzenbasket.com/products/product-badge/) to highlight new arrivals, bestsellers, offers, and other key product information. The mechanics of category and collection pages are in the *category and collection page guide*. --- ## 3. Size and colour variants **The rule:** one product record per style. Colour and size are variants of it, sharing a description and a category. Each variant carries its own stock, its own price if it differs, and — where colour changes the look — its own images. Google expects the same shape: a `ProductGroup` with `hasVariant` entries and a `variesBy` listing which properties differ, with each variant reachable at a distinct URL that pre-selects the right image, price and availability. If you sell through Google Shopping, the same grouping is the `item_group_id` attribute, required for variant products. | The mistake | What it costs | |---|---| | Each colour loaded as a separate product | Near-duplicate pages competing in search, a repetitive listing page, and reviews split six ways instead of pooled. | | Sizes as separate products | Unusable listing pages, and a catalogue that multiplies every time you add a size run. | | Variant selection that never changes the URL | Nobody can share or bookmark "the green one", and search engines only ever see the default. | | Attributes typed as free text | "Navy", "navy blue" and "Navy Blue" become three filter options, and the filter panel becomes useless. | Agree a **controlled vocabulary** for colour, size, fabric, fit and occasion before the first product is loaded, and make every supplier upload conform to it. Filters, search, swatches, shopping feeds and structured data all read from that same list. This is the step small stores skip and later pay for. --- ## 4. Size guides The large majority of apparel sites do not give shoppers enough sizing information to choose confidently, and shoppers abandon rather than guess. Fixing it costs writing time, not development time, which makes it the cheapest advantage available to a small store. ### What the guide must contain - **Garment measurements taken flat** — chest, length, sleeve, waist, rise, inseam — so a shopper can compare against something they already own. The most useful thing on the page. - **Centimetres and inches, side by side.** Shoppers will not convert, and a conversion they get wrong becomes your return. - **Conventional and numeric sizes,** because different shoppers think in different systems. - **How to measure,** with a diagram. - **International conversions only for the markets you actually ship to** — you own the accuracy of every conversion you publish. - **A chart for this garment type,** not one store-wide table. A generic chart on a shoe page reads as carelessness and gets ignored. ### The size block on the product page Put the guide link beside the size selector, not in a tab at the bottom. Show sizes as buttons rather than a dropdown: buttons expose the range and the stock position at a glance, and Baymard found dropdowns produce more selection errors. Keep sold-out sizes visible and disabled with a notify-me — hiding them leaves shoppers unsure the size exists at all, and throws away an email address. **Waiting List:** Let shoppers join a waiting list and get notified when an unavailable product or variant becomes available. If the guide opens in an overlay, the browser Back button must close the overlay, not leave the product page. ```text Size [ Size guide & model fit ] ┌────┐ ┌────┐ ┌────┐ ┌────┐ ┌────┐ ┌────┐ │ XS │ │ S │ │ M │ │ L │ │ XL │ │╳XXL│ ← sold out, visible + disabled └────┘ └────┘ └────┘ └────┘ └────┘ └────┘ Notify me when XXL is back Fit ▁▂▇▂▁ True to size (from 148 reviews) small large Model is 5'8" / 173 cm and wears size M ``` Everything the fit decision needs, in one block, above the fold on a phone. Two additions do disproportionate work: 1. **Model measurements** — "model is 173 cm and wears M" — cost one line and let shoppers calibrate against a body they can see. 2. **An aggregate fit bar** built from two review questions ("how did it fit?", "what size did you order?") answers in a second what shoppers otherwise hunt through review text for, and tells you which styles run small. **Selling jewellery or watches?** Replace this section with dimensions in millimetres, weight, materials and a worn photograph — the question becomes "how big is it really". ![2](https://bloggallery.s3.us-west-2.amazonaws.com/Zenbasket%20Docs/2_1791192023358.png) --- ## 5. Product photography Baymard's apparel work found shoppers abandoning products they liked when there was no image of the garment on a person; mannequins and rendered figures tested worse than real models. | Shot | What it answers | Priority | |---|---|---| | On-model, full length, front | How it hangs and its proportions on a body | Essential | | On-model, back or three-quarter | The half the front shot hides | Essential | | Flat or ghost mannequin, plain ground | True colour, true shape, clean thumbnail | Essential | | Fabric close-up | Texture and weave — the closest thing to touching it | Essential | | Detail: buttons, hem, print, lining | Quality, which is what justifies your price | Recommended | | Short video or a turn | Movement and drape, especially dresses and outerwear | Optional, high value | **Consistency beats artistry.** Same framing, same background, same crop, and the same shot type as image one for every product — listing pages read as chaotic when one tile is a close-up and the next a lifestyle shot. Save variety for image two onwards. **Colour has to be honest.** Shoot under consistent light, correct against a reference card, and accept that a garment photographed warmer than it arrives is a guaranteed return and a bad review. **Supply images large enough to survive zoom.** Shoppers zoom to check fabric; a blurry crop looks like something is being hidden. On a phone, full-screen with pinch to zoom is the expectation. **Customer photos beat another studio shot.** They show the garment on ordinary bodies in ordinary light. Let people browse all reviewer images in one gallery rather than opening reviews one at a time, and ask for photos in your post-purchase email. ![3](https://bloggallery.s3.us-west-2.amazonaws.com/Zenbasket%20Docs/3_1791192096463.png) > **Image weight is why fashion stores feel slow.** Export at display size, compress, use a modern format, set width and height so the grid does not jump, and lazy-load everything except the first image. Google's thresholds — under 2.5 s for Largest Contentful Paint, under 0.1 for layout shift — are usually won or lost in the image export step alone. Test on a mid-range phone on mobile data, not on office Wi-Fi. --- ## 6. Lookbooks A lookbook answers "what do I wear this with", which is why outfit photography sells more units per order than product photography. There are two formats and they do different jobs. - **A lookbook page** — a sequence of styled looks, one per campaign or season. It is a discovery page, so every look must lead somewhere: each garment named, priced and linked. A beautiful gallery with no way to buy is a brochure. - **Shop-the-look** on a product or home page — a lifestyle image with tappable dots on each item, so styling becomes merchandising without a separate page. **Rules that prevent ageing:** - Never hotspot unsold items. - Refresh or redirect lookbooks with their collections. - Link every featured garment back to its product page. **Editorial content** — styling guides, fabric care, and occasion edits — drives search traffic, supports answer engines, and strengthens category-page links. Keep it connected to relevant products, not buried in a blog archive. --- ## 7. Filters Filters matter once you pass a few hundred styles; below that, a good sort control is enough, and a filter panel is clutter. In fashion the useful set is short: size, colour, price, then one or two of category-specific fabric, fit or occasion. - **Filtering by size must mean "in stock in my size".** A size filter that returns styles unavailable in that size is worse than no filter. - **Colour filters read from your controlled colour list,** not from free text. This is where the vocabulary decision pays off. - **On a phone, filters live in a drawer** with an apply button and the active count on the trigger — never re-fetch the page on every tap inside the drawer. - **Filter combinations are not indexable pages by default.** Promote one to a real page only where there is genuine demand: "black dresses" usually has it, "black dresses size 12 under ₹2,000 sorted by newest" does not. Filter panel mechanics are in the *filter pattern and the product listing page guide*. ![4](https://bloggallery.s3.us-west-2.amazonaws.com/Zenbasket%20Docs/4_1791192248818.png) --- ## 8. Returns Apparel sits at the high end, because fit cannot be verified before delivery. That makes returns a design problem, not just a policy page. **Pre-order:** Learn how to let customers [pre-order](https://help.getzenbasket.com/products/pre-order/) upcoming fashion products and clearly communicate expected availability. - **One plain sentence beside Add to cart.** "Free returns within 30 days" or "exchanges only, buyer pays shipping" — either is workable, but a restrictive policy must be paid for with much better fit information, or shoppers will not risk it. - **Make exchanges easier than refunds.** A wrong size is the commonest reason for a return and the easiest to keep as a sale. - **Repeat the size ordered** in the cart, at checkout and on the order confirmation, so a mis-tap is caught before dispatch. - **Tag every return with a reason.** If "too small" dominates one style, that size chart is wrong — not the customer. This is the feedback loop that makes section 5 improve over time. - **Mark up the policy.** Google supports a standard merchant return policy plus per-product override. Only mark up what is visible on the page. --- ## 9. Mobile product pages Fashion discovery is a phone activity, often on mobile data. Design the phone product page first and let desktop inherit from it. - **Swipeable gallery** with position indicators, full screen on tap, pinch to zoom. - **Size buttons at least 44 × 44 px** and spaced so neighbouring sizes are not mis-tapped. - **The fit block above the fold** — sizes, size guide link, model measurements — not below three paragraphs of brand copy. - **Size guide as a full-screen sheet,** not a desktop overlay squeezed onto a phone, closing back to the same scroll position. - **Sticky Add to cart** once the buy area scrolls away, showing the selected size so nobody adds the wrong one. - **Fabric, care and returns in expandable panels,** all of them readable text rather than an image of a label. ![5](https://bloggallery.s3.us-west-2.amazonaws.com/Zenbasket%20Docs/5_1791192350506.png) --- ## 10. Related accessories Accessories are where a fashion store's average order value is won, and where most stores show a random grid of "you may also like". The useful version is specific. - **"Complete the look" beats "related products".** Show the items styled with this garment in its own photograph — the shopper has already seen them and liked them together. - **Place it below the buy block,** not inside it. Nothing competes with the size selector and Add to cart. - **Make suggestions size-aware** where size matters. Recommending a belt or shoe in a size you cannot ship is worse than recommending nothing. - **The moment after Add to cart is the best one.** The decision is made and the basket is open — two or three accessories in the confirmation or the cart convert far better than the same grid on the product page. - **Stop at checkout.** The cart is a merchandising surface; checkout is not. Cross-sells there cost more orders than they add. - **Measure attach rate, not clicks.** Units per order is the number that tells you whether the block earns its space. Cart-stage merchandising in general is covered in the *cart page guide*. ![6](https://bloggallery.s3.us-west-2.amazonaws.com/Zenbasket%20Docs/6_1791192416428.png) --- ## 11. Choosing a ZenBasket theme for your fashion store Everything above is platform-independent. If you are building on [ZenBasket](https://help.getzenbasket.com/zenbasket-builder/), these themes already contain most of the structures this guide asks for. *From the ZenBasket theme collection; current pricing is on that page.* | If you sell | Start with | Why | |---|---|---| | Everyday and occasion clothing, small catalogue | **[FuFashia](https://storefront.getzenbasket.com/us/fufashia/home)** (free) | Hero, featured products, category tiles, brand carousel. Reproducible in a weekend and it does not look empty with forty styles in it. | | A styled apparel brand with a wider range | **[Trendrivo](https://storefront.getzenbasket.com/us/trendrivo/home)** (premium) | Mega menu, multi-slide hero, featured categories, shop-the-look hotspots, countdown, benefit strip, blog and social. Documented in the *Trendrivo theme guide*. | | Jewellery, watches and fine accessories | **[Gem Crown](https://storefront.getzenbasket.com/us/gemcrown/home)** (free) | Collection-led and close-up led, built around trust signals rather than size selection. | | Kidswear, or occasion and bridal wear | **[Giglyn](https://storefront.getzenbasket.com/us/giglyn/home)** (free), **[ShaadiVex](https://storefront.getzenbasket.com/us/shaadivex/home)** (premium) | Kids and wedding catalogues, where age-based sizing and lead times matter more than seasonal drops. | ### How to judge a fashion theme in ten minutes Open the live demo on your phone, not your laptop: 1. Does the product card show a second image and colour swatches? 2. Are sizes exposed as buttons, with room for a size guide link beside them? 3. Does the gallery go full screen and zoom cleanly? 4. Is there a section type for lookbook or shop-the-look imagery? 5. Is there an obvious home for "New in" and a campaign banner? 6. Does the layout still look right with only twelve products in it? A theme failing the first two costs more to fix than the price gap between any two themes in the collection. **What a premium theme buys you.** Not prettier pixels — more section types. Hotspots, mega menus and countdowns are the merchandising tools in sections 7 and 2. One drop a year and forty products: a free theme with good photography is genuinely enough. Weekly drops across several categories: the extra sections save you building workarounds every month. --- ## 12. Building it in ZenBasket Stores are assembled from drag-and-drop sections, so most of this is arrangement and content. Product data itself — colours, sizes, stock, prices — is managed in the catalogue, and the storefront swatches and filters are generated from it, so set your controlled vocabulary there first. | What this guide asks for | What to use | |---|---| | Shop-the-look and lookbook imagery | [Hotspot element](https://help.getzenbasket.com/zenbasket-builder/image-hotspot) | | Campaign hero with several looks | [Content Rotator](https://help.getzenbasket.com/zenbasket-builder/content-rotator/) or [Slider](https://help.getzenbasket.com/zenbasket-builder/slider/) | | Category-led navigation for a wide range | [Navigation menu](https://help.getzenbasket.com/zenbasket-builder/navigation-menu/), mega menu layout | | Gallery, variant area and buy block | [Product details page](https://help.getzenbasket.com/zenbasket-builder/product-details-page/) settings | | Listing grid, sorting and filters | [Product list page](https://help.getzenbasket.com/zenbasket-builder/product-list-page/) settings | | Size guide, fabric and care, returns | [Expandable panels](https://help.getzenbasket.com/zenbasket-builder/expandable-panels/) or [switchable panels](https://help.getzenbasket.com/zenbasket-builder/tab/) | | Drop countdown, set to a real end time | [Timer](https://help.getzenbasket.com/zenbasket-builder/timer/) element | | Search that copes with "kurta" and "kurti" | [Search variants](https://help.getzenbasket.com/zenbasket-builder/search-variants/) | | Free shipping or sale announcement | [Attention banners](https://help.getzenbasket.com/zenbasket-builder/attention-banners/) | | Logos, colours and typography | [Customising site themes](https://help.getzenbasket.com/zenbasket-builder/customizing-site-themes/) | New to the builder? Start with [Getting started](https://help.getzenbasket.com/zenbasket-builder/getting-started/), then [adding sections](https://help.getzenbasket.com/zenbasket-builder/adding-new-section/) and [customising them](https://help.getzenbasket.com/zenbasket-builder/customizing-sections/). --- ## 13. Frequently asked questions ### Do I need a size guide for an online fashion store? Yes. A clear size guide helps shoppers understand measurements and choose between available sizes with greater confidence. ### Should I show the model's size? When accurate information is available, showing the model's height and the size worn can give shoppers useful context about fit. ### How many images should a fashion product have? Use enough images to show the product clearly from relevant angles and highlight important details. There is no fixed number that works for every product. ### Should I use lifestyle photography? Yes. Lifestyle images can help customers understand how a garment or accessory looks in context, while product images provide clearer product detail. ### Should I use colour swatches? Use colour swatches when colour is an important purchasing decision. Include text labels so the colour is not communicated visually alone. ### How should I organise a fashion store? Start with clear product categories and use collections for seasonal, promotional or editorial merchandising. ### Should every colour have a separate product page? Not necessarily. Related colours of the same product can usually be presented as variants so shoppers can compare them easily. ### How important are filters for fashion stores? Filters become increasingly useful as the catalogue grows. Size, colour, price and other meaningful product attributes can help shoppers narrow their choices. ### Should unavailable sizes be hidden? No. Clearly showing unavailable options helps shoppers understand what is currently available and prevents unnecessary attempts. ### How important is photography for fashion ecommerce? Very important. Photography helps replace some of the information shoppers would normally get by seeing and handling a product physically.