Add to Cart

A collection of mobile and responsive e-commerce patterns.

[add-to-cart]

Hardgraft

This European retailer’s product pages are simple but chock full of beautiful imagery: from 360 product shots to colloquial recommendation module titles, it gives you a wonderful sense of the item and its craftsmanship. 

[add-to-cart]

The Black Tux This tux-rental company has crafted an incredibly thoughtful shopping flow from start to finish, including a tile at the bottom of their product gallery that helps customers that aren’t finding what they need with an alternate, quicker path: a curated look. Additionally, product detail pages use a 100% height hero image to provide immersive imagery even on the smallest of screens.

[add-to-cart]

Glossier

Glossier’s entire site is pretty wonderful, but they particularly own it with their product pages — starting with static, simple images on mobile and progressively enhancing to video and some slick hover states on larger screens.  

[add-to-cart]

Tens

Sunglasses retailer leverages an animate-in of the main product image to make landing on the detail feel compelling and interesting right off the bat. Additionally, video content is peppered throughout and clearly distinguished with the “Mouseover to view” caption, adding some dynamicism to an otherwise utilitarian page.

[add-to-cart]

Maple The meal delivery service has a beautifully designed site, and particularly nails the “Add to Cart” moment on a dish’s detail page. As you scroll down, the action and price stick at the bottom of the screen, and the CTA is phrased in a first-person, conversational way: “I’ll Have This”. Extra hat tip to the beautiful, finger-friendly quantity selectors in their checkout flow. 

[add-to-cart]

Moda Operandi Product grids are organized by both style and product, and a mobile quickshop function allows shoppers to get a high-level snapshot of items (as well as presenting the ability to configure or purchase) without departing the gallery. 

[add-to-cart]

Toms When filters are applied, they appear beneath the sort and filter accordions as a clear reminder of what parameters are active. Users are also able to clear filters individually, or remove all in a single tap. 

[add-to-cart]

Brickfielder

Interactive, detail view showcasing the technology and construction of the product.

[add-to-cart]

Proenza Schouler

Swatch toggles on the product gallery allow you to switch between SKUs without diving down to the detail page. Additionally, the PDP leverages a contextual back button alongside a prev/next navigation, letting you jump back a page or across more items with ease. 

[add-to-cart]

Casper On smaller viewports, click-to-call and nearest location are bubbled up as floating elements — close to fingers and making the most common actions immediately accessible from the homepage. 

[add-to-cart]

Coastal The eyewear company integrates their product into shoppable, style-themed sets. This approach not only broadens their content offering, but provides actionable inspiration to customers — helping pinpoint pairs that are best suited to their preferences and look. 

[add-to-cart]

Madewell Product carousel UI is clear, clean, and easy to tap, offering another means of navigating through product imagery alongside swipe gestures.

[add-to-cart]

Amazon Prime Now The one-hour deliver app helps shoppers dive in to Amazon's massive inventory by providing relevant, curated categories (Healthy Living, Household Essentials, etc) as entry points to product.

[add-to-cart]

Instacart Specific error messaging for the win. 

[add-to-cart]

Harry's Product attributes are accompanied with brief information on the qualities and benefits of selections, helping customers differentiate between choices.

[add-to-cart]

Virgin America Their mobile homepage is focused on directing users right into the most necessary and frequent tasks for the airline — checking in, managing a flight purchase, or exploring rates for potential journeys. Ticket search is autopopulated with your current location, putting you just one tap away from results.  Once you've picked a connecting destination, a conversational confirmation is briefly shown to segue into the next step: "Nice, NYC to SFO."

[add-to-cart]

1-800-Flowers For open input fields, they leverage the Float Label Pattern to help battle the ubiquitous "I forgot what field this was!" issue so common on mobile. Once users start typing, the placeholder text shrinks upward to serve as a contextual header.