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.
87 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 ↗
22Product 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.
Product cards: price and decision attributes ↗
Show prices and key attributes on the card. Group variants into one product card and preserve the shopper’s place when returning from a product.
Search types: names, SKUs, attributes and help ↗
A query may name a product, a feature or a question about the store. Provide a relevant destination for each.
Editable autocomplete with keyboard support ↗
Let shoppers navigate suggestions with the keyboard and edit the active suggestion before submitting.
Breadcrumbs and return to product lists ↗
Separate category hierarchy from the previous results list. A return action should preserve query, filters and sort.
Product sorting with reliable data ↗
Sorting should fit the shopping task. Price, recency, popularity and ratings each need their own data.
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.
Visible search with an editable query ↗
Give search a label, submit button and the previous query. Shoppers should refine a search without starting over.
Search synonyms without misleading matches ↗
Map shopper vocabulary to documented product types and attributes. Synonyms should bridge language, not invent functionality.
Typos: suggest corrections and keep the query ↗
Offer a recognizable correction for known typos. Retain the original query until the shopper chooses it.
Search scope: products, help or all content ↗
Show what the search covers. Let shoppers widen its scope without losing the query.
No results with useful recovery paths ↗
Explain zero results without blaming the shopper. Offer correction, a wider scope or removal of constraints.
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 ↗
20Product 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.
Unit and pack prices in product lists ↗
When pack sizes differ, show both the total price and a comparable unit price.
Product comparison for technical purchases ↗
A specification table can help technical purchases. Use visible selection controls and a clear summary of selected products.
Product information in visible sections ↗
Core information should be visible or in clearly labeled vertical sections. Avoid hiding important details in horizontal tabs.
Product descriptions: uses and limitations ↗
Organize information around the questions shoppers need to answer. Specific facts help more than long, generic promises.
Returns and policies beside product selection ↗
Provide a short, understandable route to return and delivery policies while the shopper evaluates the product.
Product ratings: counts and data sources ↗
When genuine ratings exist, show both average and count. No reviews means unknown experience, not a zero-star score.
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.
Product images that explain size and scale ↗
Supplement images with dimensions and a known reference when size affects choice. An attractive crop does not establish scale.
Mobile image zoom with clear closing and focus ↗
Let shoppers inspect a larger image without losing selection. Provide visible closing controls and keyboard access.
From-prices and variant price ranges ↗
Explain from-prices and update to the selected variant price. Do not present an irrelevant cheap variant as the purchase price.
Product video supplements facts and images ↗
Use video to show movement or use. Essential information must also exist as text and still images.
Specifications with units and unknown values ↗
Show numbers with units and explain unknown information. Zero is not the same as missing data.
Comparison: show differences while retaining price ↗
Let shoppers hide identical attributes while keeping product names, prices and unknown-value explanations.
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 ↗
22Cart 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.
Total cost and shipping before checkout ↗
Shipping cost affects product choice. Show a relevant estimate or explain clearly what remains to be calculated rather than hiding costs until the final step.
Guest checkout without forced accounts ↗
Guest checkout should be easy to find and use. Account creation should not be a required detour for someone who simply wants to buy.
Shipping, pickup points and local pickup ↗
Show all available fulfillment methods where shoppers choose fulfillment. Explain cost, location and timing before they decide.
Payment: totals, next steps and status ↗
Show the total before payment and label the button with the next step. Payment choices should be clear, including any departure from the storefront.
Checkout errors and recovery ↗
After an error, shoppers should retain their input and find what needs correction. Explain the problem at the field and make the next action clear.
Delivery dates, costs and pickup times ↗
An estimated arrival date makes the choice concrete. Cost and expectations should be available before final confirmation.
Checkout fields for consumers and B2B ↗
Mark required and optional fields. Reveal extra fields only when the purchase context needs them.
Relevant accessories in the cart ↗
Suggest accessories that solve a specific need for the selected product. Explain the relationship and let shoppers proceed without the extra.
Discount codes: eligibility and feedback ↗
Keep the promo field out of the main task. When used, explain eligible items and how the discount changes the total.
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.
Free shipping: explain thresholds and exceptions ↗
Show both the condition and current shipping charge. A free-shipping banner is insufficient when the order is ineligible.
Shipping estimates before completing checkout ↗
Provide early delivery-cost information and explain what a precise quote needs. Unknown shipping must not look free.
Coupon errors with explanations and preserved baskets ↗
Explain whether a code is unknown, expired or ineligible. Preserve the basket and typed code for correction.
Guest checkout email without mandatory registration ↗
Explain email as purchase contact information. Newsletter signup and account creation are separate choices.
Autofill and appropriate checkout keyboards ↗
Use standard field semantics so browsers can assist with name, email and address. Avoid unnecessary custom inputs.
Address checks: distinguish format from deliverability ↗
Valid postal formatting does not prove an address exists. Show real-source suggestions as choices rather than silent corrections.
Optional fields and reasons for required information ↗
Label both required and optional fields. Reveal additional fields when the purchase needs them and explain collection purposes.
Payment failures: safe retry without duplicate orders ↗
Distinguish confirmed failure from unknown or pending status. A timeout does not mean payment failed.
Order review with items, fulfillment and correct totals ↗
Show item, quantity, fulfillment and total before the final action. Editing should preserve completed information.
Order confirmation and follow-up ↗
6Order confirmation and next steps ↗
After purchase, optional engagement can be offered without interrupting checkout. Explain concrete benefits of optional actions.
Confirmation: status first, then order and next steps ↗
Confirm what is actually known: order, payment state, items, shipping and total. Additional offers come after that information.
Order tracking: distinguish preparation, shipped and delivered ↗
Show status and timestamps from the appropriate source. A shipping label does not mean the carrier received the parcel.
Customer support with order context and the right recipient ↗
Explain who can help with the purchase and which reference to include. Do not send shoppers to the wrong platform contact.
Return process: choices, cost and actual status ↗
Explain how to start a return, eligible items and next steps. A request is not a refund.
Email preferences: consent, expectations and unsubscribe ↗
Separate transactional messages from optional marketing. Explain signup before the shopper chooses it.
Store SEO and content structure ↗
7Store SEO: categories, titles and URLs ↗
Each page should serve a clear task. Use readable titles, links and stable category URLs; avoid indexable pages for every filter combination.
Category SEO helps shoppers choose ↗
Give a category a clear title and useful introduction. Explain what distinguishes the selection before adding more text.
Filter SEO: useful landing pages without URL explosion ↗
Treat ad hoc search and filters as task tools. Curate landing pages when combinations provide lasting shopper value.
Product-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.
Internal links explain the next relevant task ↗
Use descriptive links between categories, articles and examples. Clicking should reach content that actually addresses the task.
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.
Pagination: links that work without a clicking crawler ↗
When products or articles span pages, each page needs a standard URL and link.
CRO, measurement and performance ↗
6CRO and A/B testing: hypotheses and decisions ↗
Start with an observable shopper problem. Define a primary metric, a clear denominator and quality checks before launching an experiment.
Store 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.
Commerce funnels with explicit denominators and confirmed outcomes ↗
Define each step as an observable event. Separate a checkout attempt from an accepted order and confirmed payment.
Experiment audiences before splitting results ↗
Define eligibility before starting. Mobile, market and new shoppers can be useful segments, but post-hoc hunting creates false winners.
Allocation imbalance: check SRM before interpreting effects ↗
Check observed participant counts against planned allocation. Unexplained imbalance can make an experiment unreliable.
CRO guardrails: margin, returns and errors ↗
Measure more than completed purchases. A change increasing errors, returns or discount cost can harm the business.
Accessible choices, forms and dialogs ↗
4Dialogs: keyboard access, Escape and focus return ↗
Opening should move focus into the dialog; closing should return shoppers to a meaningful control.
Accessible forms with field errors and error summaries ↗
Associate labels and errors with fields. Provide a summary linking to errors and retain valid information.
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.