Checkout Step 2 free Sketch template
Last Updated on July 27, 2026 by Editorial Team
Sketch freebie created by Drasius M with ultra-clean design. It includes step two of the checkout process and shopping cart.
What This Checkout Screen Gets Right
This second step of the checkout flow focuses entirely on shipping. The layout splits into two clear zones: a wide left column for shipping details and method selection, and a narrower right column that keeps the shopping cart visible at all times. That persistent cart summary is a small but important detail. Shoppers never lose sight of what they are buying or what it costs, which reduces the anxiety that often causes cart abandonment mid-checkout.
The progress indicator at the top (Customer Info, Shipping Info, Payment Selection) uses simple typographic weight and an underline to show current position. There is no heavy iconography or color coding competing for attention. The active step is bold and underlined in dark gray, the completed step sits in a lighter tone, and the upcoming step is faded further back. This restrained hierarchy is a good reference point for anyone designing multi-step forms where clarity matters more than decoration.
The Address Card and Map Pairing
The shipping information card places a compact text block next to a small embedded map with a location pin. This pairing does two jobs at once: it confirms the address in words for quick reading, and it visually reassures the shopper that the address maps to a real, correct location. The “Edit Address” and “Add New” links sit directly under the text, keeping the action close to the content it affects rather than pushed off to a separate menu.
Shipping Method Cards
The two shipping options are shown as equal-width bordered cards with radio buttons, a bold price on the right, and a lighter secondary line explaining delivery time and duty disclaimers. Selecting “Standard Delivery” highlights its card with a blue border, giving immediate visual feedback without needing a separate confirmation state. This pattern works well anywhere you need to present two or three comparable choices side by side, such as pricing tiers or subscription plans.
Where This Template Fits Into Real Projects
- Ecommerce checkout flows for apparel, electronics, or general retail sites
- Marketplace platforms that need a neutral, brand-agnostic shipping step
- Internal prototypes for testing shipping method logic before development
- Design system references for card-based selection patterns and cart sidebars
- Client presentations where a polished, believable checkout flow builds confidence in the overall proposal
Because the visual language is so neutral, minimal blue accent, white background, thin gray borders, it adapts easily to almost any brand without fighting existing color schemes.
Adapting the Layout for Your Own Brand
Start by swapping the accent color. The blue used for the active step underline, radio buttons, and the continue button is the only strong color in the entire screen. Changing this single value across the shared elements will shift the whole feel of the flow to match a different brand palette without touching anything else.
Next, look at the typography scale. Headings like “Shipping Information” and “Shipping Method” use a simple, slightly larger weight than the body text below them. If you are rebuilding this in your own file, keep that contrast modest. The template’s restraint is part of why it reads as trustworthy rather than flashy.
When editing the shipping method cards, keep the price right-aligned and the descriptive copy secondary in color. This ordering mirrors how people actually scan pricing information: name first, cost second, fine print last. If you add a third shipping option, keep the cards equal width so no option looks favored by default.
The cart sidebar can be extended to hold more line items if your product list is longer. Keep the thumbnail, product name, and price pattern consistent, and preserve the divider before the subtotal and total block so the math still reads as a distinct summary rather than part of the item list.
Pairing This Step With the Rest of the Flow
Since this is step two of a three-part checkout, consistency with the linked step one and the eventual payment step matters more than any single screen looking good on its own. Keep the same:
- Progress bar position and typographic treatment across all three steps
- Card border radius and border color for any bordered container
- Button size, corner radius, and label casing on primary actions
- Cart sidebar width and content order so it feels like the same persistent element, not a new one each screen
If you are designing the payment step yourself, mirror the shipping method card pattern for payment options like card, PayPal, or invoice, since shoppers will already recognize that selection style from this screen.
Quick Questions Designers Often Ask
Can this be used for a non-retail form, like a booking or service flow? Yes. The layout structure, address confirmation, method selection, running summary, works for anything involving an address, a choice of service level, and a cost breakdown, such as event registration or appointment scheduling.
Is the map essential or can it be removed? It is a trust-building detail rather than a functional necessity. If your project has no need for a live map, the address block still reads clearly on its own.
Should the “Free” shipping label always be the default selection? Defaulting to the lowest-cost, non-urgent option is a common and sensible pattern, since it reduces perceived pressure and lets shoppers actively opt into paying more only if speed matters to them.
