screensdesign

Mobile shopping cart management flow examples

Zalando – Online fashion: Managing Shopping Cart

Open recorded flow
  1. Step 1 · 15:08

    Zalando – Online fashion: Header with title, followed by a scrollable list of parcel groups containing product cards, ending with a fixed summary and checkout button area.See the flow
    Zalando – Online fashion

    Header with title, followed by a scrollable list of parcel groups containing product cards, ending with a fixed summary and checkout button area.

  2. Step 2 · 15:11

    Zalando – Online fashion: A list of product cards grouped by delivery parcel, with a modal overlay centered on top.See the flow
    Zalando – Online fashion

    A list of product cards grouped by delivery parcel, with a modal overlay centered on top.

  3. Step 3 · 15:14

    Zalando – Online fashion: The screen consists of a main shopping bag list view with a bottom-sheet modal overlay for quantity selection.See the flow
    Zalando – Online fashion

    The screen consists of a main shopping bag list view with a bottom-sheet modal overlay for quantity selection.

  4. Step 4 · 15:22

    Zalando – Online fashion: Header with 'Bag' title, followed by a scrollable list of items grouped by parcel, ending with a price summary, a checkout button, and a bottom notification bar.See the flow
    Zalando – Online fashion

    Header with 'Bag' title, followed by a scrollable list of items grouped by parcel, ending with a price summary, a checkout button, and a bottom notification bar.

HBX | Globally Curated Fashion: Adding an Item to Cart

Open recorded flow
  1. Step 1 · 2:04

    HBX | Globally Curated Fashion: Top navigation bar, large product image area, product title and price information, size and quantity selection inputs, and a bottom navigation bar.See the flow
    HBX | Globally Curated Fashion

    Top navigation bar, large product image area, product title and price information, size and quantity selection inputs, and a bottom navigation bar.

  2. Step 2 · 2:09

    HBX | Globally Curated Fashion: Header with product info, followed by selection controls, policy notes, an accordion list of details, and a bottom navigation bar.See the flow
    HBX | Globally Curated Fashion

    Header with product info, followed by selection controls, policy notes, an accordion list of details, and a bottom navigation bar.

  3. Step 3 · 2:11

    HBX | Globally Curated Fashion: Product header and selectors followed by a modal overlay for size selection.See the flow
    HBX | Globally Curated Fashion

    Product header and selectors followed by a modal overlay for size selection.

  4. Step 4 · 2:16

    HBX | Globally Curated Fashion: Header with navigation, product info section, action button, policy details, and a bottom quantity selection modal.See the flow
    HBX | Globally Curated Fashion

    Header with navigation, product info section, action button, policy details, and a bottom quantity selection modal.

ZARA: Checkout Process

Open recorded flow
  1. Step 1 · 14:46

    ZARA: Top navigation bar followed by a notification banner, a gift option link, a scrollable list of product cards, and a fixed bottom total summary with a primary action button.See the flow
    ZARA

    Top navigation bar followed by a notification banner, a gift option link, a scrollable list of product cards, and a fixed bottom total summary with a primary action button.

  2. Step 2 · 14:49

    ZARA: Top navigation with close button, title, content area with toggle, and bottom fixed save button.See the flow
    ZARA

    Top navigation with close button, title, content area with toggle, and bottom fixed save button.

  3. Step 3 · 15:01

    ZARA: Top navigation bar followed by two input fields for gift receipt details, with the system keyboard occupying the bottom half.See the flow
    ZARA

    Top navigation bar followed by two input fields for gift receipt details, with the system keyboard occupying the bottom half.

  4. Step 4 · 15:03

    ZARA: Top navigation bar with close button, main content area with gift settings, and a bottom fixed save button.See the flow
    ZARA

    Top navigation bar with close button, main content area with gift settings, and a bottom fixed save button.

  5. Step 5 · 15:09

    ZARA: Top navigation tabs, followed by a gift order link, a scrollable list of product cards, and a fixed bottom total summary with a primary action button.See the flow
    ZARA

    Top navigation tabs, followed by a gift order link, a scrollable list of product cards, and a fixed bottom total summary with a primary action button.

  6. Step 6 · 15:16

    ZARA: Top navigation tabs, informational banner, list of product cards with swipe-to-delete, and a sticky bottom total and checkout button.See the flow
    ZARA

    Top navigation tabs, informational banner, list of product cards with swipe-to-delete, and a sticky bottom total and checkout button.

  7. Step 7 · 15:22

    ZARA: Top navigation tabs, followed by a gift order link, a list of product cards, a bottom snackbar for undo actions, and a fixed bottom total and checkout button.See the flow
    ZARA

    Top navigation tabs, followed by a gift order link, a list of product cards, a bottom snackbar for undo actions, and a fixed bottom total and checkout button.

  8. Step 8 · 15:32

    ZARA: Top navigation tabs, followed by a grid of product cards, then a size selection grid, and finally bottom utility links.See the flow
    ZARA

    Top navigation tabs, followed by a grid of product cards, then a size selection grid, and finally bottom utility links.

Found an example you like?See the whole story.