Store category navigation ↗
Small catalogs often benefit from a direct product list. Larger catalogs can use category hubs to help customers choose a direction.
Find guidance for the task
you want to improve.
Search for a shopper problem, choose a task or explore articles referencing a storefront design. Each article explains data sources, boundaries and what to test.
34 of 87 articles
Search matches Norwegian and English text. A design reference does not mean every feature is implemented; read the example boundary.
Search, categories and product lists ↗
13Product search and zero results ↗
An empty search result should offer relevant ways forward. Shoppers need to revise their search without restarting their visit.
Collection filters and variant matching ↗
Show applied filters and result counts. Allow multiple choices within a filter group so, for example, either of two colors can match.
Mobile filters: apply and cancel ↗
A separate mobile filter interface should let shoppers make several selections and apply them together with a clear, easily reachable button.
Breadcrumbs and return to product lists ↗
Separate category hierarchy from the previous results list. A return action should preserve query, filters and sort.
Homepage: communicate the actual catalog ↗
Show several relevant catalog entry points. A large campaign image should not make the whole store look like one product line.
Navigation labels shoppers understand ↗
Use product and need-based navigation labels. Creative campaign names need an explanation of what the link contains.
Category landing page or direct product list? ↗
A category landing page should help shoppers choose a meaningful subgroup, with a clear route to all products.
Mobile menus with clear product entry points ↗
Make product categories easy to find when opening the menu. Closing should be as easy as opening.
Filters: OR within an attribute, AND across attributes ↗
Brown or black can both be acceptable colors. Size L and stock status must still apply to the same variant.
Applied filters: overview and individual removal ↗
Show active constraints above results with readable labels. Let shoppers remove one choice without resetting everything.
Filter counts and zero matches without losing choices ↗
A facet count should describe its effect in the current context. Keep selected zero-count values removable.
Incremental loading and returning to the product list ↗
Preserve filters, sorting and position when returning from a product. Incremental loading needs a recognizable end.
Product selection, images and information ↗
11Product images, thumbnails and zoom ↗
Thumbnails show what additional images contain. Make them accessible on mobile too so shoppers can discover the other views.
Colors, sizes and variant selection ↗
Visible size buttons make available and sold-out sizes easier to discover than a closed dropdown.
Stock, sold-out items and backorders ↗
Temporarily unavailable products need a path forward. Backorders can help when the business can actually deliver later and explains expectations.
Size guides and measurements beside selection ↗
A size label alone gives little basis for judging fit. Provide relevant measurements and explain how to take them.
Product information in visible sections ↗
Core information should be visible or in clearly labeled vertical sections. Avoid hiding important details in horizontal tabs.
Variant images follow the selected color ↗
The main image and variant name should reflect the same selection. A color change must not leave the old image visible.
Color and size names as text, not just symbols ↗
Provide readable color and size names. A swatch supplements the text rather than replacing it.
Unavailable sizes: explain status and alternatives ↗
Keep unavailable sizes visible and explain why they cannot be selected. Backorders need separate wording.
Mobile image zoom with clear closing and focus ↗
Let shoppers inspect a larger image without losing selection. Provide visible closing controls and keyboard access.
Product video supplements facts and images ↗
Use video to show movement or use. Essential information must also exist as text and still images.
Sticky mobile purchase controls retain variant and price ↗
A sticky purchase control must share product-selection state without covering information or focus.
Cart, checkout and payment ↗
4Cart quantities, removal and undo ↗
Plus/minus paired with a number field makes quantity changes easier. Update totals automatically and let shoppers undo a removed line.
Cart drawers: editing, totals and a clear exit ↗
A drawer should confirm the added item and allow continuation, editing or closing. Do not make it a dead end.
Edit cart size or color without starting over ↗
Let shoppers correct a variant without removing the item and finding it again. Preserve quantity when editing.
Recheck availability before checkout ↗
A saved cart is an intention, not a stock reservation. Explain changed purchasability before payment.
Store SEO and content structure ↗
2Product-page SEO: stable identity and accurate information ↗
A product page needs a descriptive name, stable URL and accurate availability. Rich product data must describe real products.
Image SEO: descriptions, dimensions and appropriate formats ↗
Use relevant images with descriptive alt text and reserved layout space. Formats should support quality and loading, not keyword quotas.
CRO, measurement and performance ↗
1Store performance: loading, response and stability ↗
Measure whether pages become visible, respond to shoppers and keep elements stable. Evaluate speed on real devices and shopping tasks.
Accessible choices, forms and dialogs ↗
3Dialogs: keyboard access, Escape and focus return ↗
Opening should move focus into the dialog; closing should return shoppers to a meaningful control.
Reduced motion without losing feedback ↗
Respect reduced motion for scrolling and nonessential transitions. Shoppers should still perceive state changes.
Touch targets for colors, sizes and cart controls ↗
Give small choices sufficient hit area and spacing. A visible swatch may be small while its button is larger.