# Footwear Ecommerce Size Design: Follow the Red Markers

Source: https://www.jvds.cn/en/share/ui-design/esmee-footwear-size-checkout-u084
Language: en
Published: 2026-10-17
Author: JVDS Design Studio

Esmée Van Arden’s footwear pages use red text and pale gray backgrounds as a distinct language. Large images show silhouette, material, and color; red carries search conditions, specifications, and actions. From 37.5 in the catalog to selected size and checkout summary, this continuity is more interesting than one page’s styling. It makes choices traceable while requiring states and data to agree.

## Key takeaways

- Large product images and narrow filters divide tasks, with red connecting conditions and prices.
- Mobile and tablet details retain specification elements while rearranging images, text, and supporting information.
- Checkout retains size, quantity, and delivery fees, whose numeric relationships still need checking.

## Separate product silhouettes from search conditions

Below ALL COLLECTIONS, sorting, size, color, and heel-height filters sit left, with differently sized product cells right. Olive mules occupy a wider image, while boots and flats below are more compact. Names, descriptions, and prices remain beneath photographs, giving silhouettes broad space.

37.5 uses deeper red and a selection mark in the size filter, while Clear filters shows the number of active conditions. These make filtering visible. Catalog size defines search scope, however, while detail-page size is one product’s specification. Each needs confirmation; the condition can continue as a preference while available product versions have explicit states.

Red covers all text, so size and intensity carry more hierarchy. Sorting and unselected sizes are pale, while headings and names are stronger. A real page should check [small filter text](https://www.jvds.cn/en/share/ui-design/wcag-color-contrast-ui-design) within the consistent palette, ensuring the side panel remains functional rather than merely attractive.

![Footwear grid beside red filters with 37.5 selected](https://www.jvds.cn/upload/2026/1008/d187-tp/u084-i1.webp)

Large images retain shoe forms; the filter area explains the current search scope.

## Two sizes retain the same selection information

Details show mobile and tablet versions. Mobile starts with paired shoes, then name, price, size, and material. Tablet places imagery left and purchasing right. Both retain a red selected 37.5 cell, Size Guide, materials, 65 MM heel height, and Add to Cart below. Layout changes while core purchase fields correspond.

Two rows of bordered size cells make the solid selected cell and white text clear. Some numbers are pale without explaining whether they are unavailable or simply less emphasized. A real interface should distinguish available, selected, and unpurchasable states, adding actions such as restock alerts where appropriate rather than making readers infer stock from color.

Care Instructions, Delivery & Returns, and Style Note use accordions, separating supporting information from specification choices. Care is open on tablet and closed on mobile, showing different states without proving responsive rules. Review should check whether purchase controls remain findable after expansion and whether the guide helps with this model.

![Mobile and tablet footwear details with red 37.5 size cell and add-to-cart button](https://www.jvds.cn/upload/2026/1008/d187-tp/u084-i2.webp)

The same specifications rearrange across two sizes while selected styling remains consistent.

## Checkout carries the choice into a final check

Address, delivery, contact, and payment occupy the left. Two product images on the right retain names, 37.5, and quantity, with quantity controls separate from Remove. Standard and Express both list duration and cost for comparison. The summary retains clues for changing specifications and quantities beyond a total alone.

The example prices are 610 and 540, shipping 7, discount 0, but Total is 1057. Those visible items add to 1157, with no other deduction shown. The amount relationship needs checking. Space and consistent red establish order, but data consistency completes verification. Delivery changes, quantities, and removals should update both [summary and total](https://www.jvds.cn/en/share/ui-design/ecommerce-checkout-ux).

![Checkout form left and two-shoe size/quantity summary right](https://www.jvds.cn/upload/2026/1008/d187-tp/u084-i3.webp)

The order summary retains specifications; price components also need to correspond.

## Frequently asked questions

### Can a filtered size automatically become the selected product size?

It can provide a preference on entry, but must be confirmed against the product’s available versions. Search conditions and purchase specifications have different roles; checkout should retain the actual selected size.

## Design review checklist

- Define catalog filters and product specifications separately, then check continuity.
- Explain pale sizes and check the guide and purchase button.
- Calculate prices, quantities, delivery, and discounts individually, then check synchronization after edits.

## Connect footwear presentation with checkable choices

A footwear store can organize information around silhouettes, specification states, and order summaries, then carry brand colors across pages.

JVDS Design Studio provides UI/UX design, website design, and development services, helping organize shopping pages and interaction states.

[Contact JVDS to discuss your project](https://www.jvds.cn/contact)