Integrating BOPIS & EDT
Client
Steve Madden
Company
Hotwax Commerce
Hotwax Commerce
Role
End to End Designer
End to End Designer
What is BOPIS & EDT?
BOPIS stands for Buy Online, Pick Up In Store — it lets customers order products online and collect them from a nearby store, saving on delivery time and cost. BOPIS is known to increase in-store foot traffic and drive faster conversion for impulse buyers.
EDT means Estimated Delivery Time — it shows when a customer can expect their order to arrive. Adding a delivery date next to purchase options significantly boosts checkout confidence.
What is BOPIS & EDT?
BOPIS stands for Buy Online, Pick Up In Store — it lets customers order products online and collect them from a nearby store, saving on delivery time and cost. BOPIS is known to increase in-store foot traffic and drive faster conversion for impulse buyers.
EDT means Estimated Delivery Time — it shows when a customer can expect their order to arrive. Adding a delivery date next to purchase options significantly boosts checkout confidence.
Intro & Problem Statement
Steve Madden has been a loyal Hotwax Commerce client for over a decade. They already use our OMS and fulfillment apps — and now wanted to enable BOPIS and EDT on their site to align with evolving shopper behavior.
But here’s the kicker: the site design couldn’t change much. No major layout shifts. No new design language. It had to feel native — like it was always part of their site.
Intro & Problem Statement
Steve Madden has been a loyal Hotwax Commerce client for over a decade. They already use our OMS and fulfillment apps — and now wanted to enable BOPIS and EDT on their site to align with evolving shopper behavior.
But here’s the kicker: the site design couldn’t change much. No major layout shifts. No new design language. It had to feel native — like it was always part of their site.
Research & Strategy
Design Audit: I started by analyzing Steve Madden’s Shopify site, mapping reusable components and existing interaction patterns. The goal? Extend the experience without disrupting it.
Research & Strategy
Design Audit: I started by analyzing Steve Madden’s Shopify site, mapping reusable components and existing interaction patterns. The goal? Extend the experience without disrupting it.
Key Design Decisions
1. “My Store” Selector — Homepage Side Sheet
A subtle “My Store” button was added to the homepage. Clicking it opens a side sheet with:
Default store suggestions (based on IP/location)
A search bar to enter ZIP code
A “Use My Location” feature
Once a store is selected, it’s saved as “My Store” — which influences both pickup and delivery flows downstream.
Design Thinking: I kept the selector familiar — same sheet component Steve Madden uses elsewhere. No modals, no popups. Just fast, contextual interaction.
2. Product Display Page (PDP) Enhancements
Added a “Pick Up Today” button beside “Add to Cart”
Introduced two stacked sections beneath:
Shipping Info Block:
Shows a ZIP-based EDT if user hasn’t selected a store yet
Format:
“Ship to 90209 — Get it by Thursday, May 01 (Standard Shipping)”
This helps users plan better, especially if they’re gift shopping or in a hurry.
Pickup Info Block:
A clear note: “Free pickup in store available” — low-key CTA that boosts confidence
Clicking “Pick Up Today” opens a side sheet with:
Default store suggestions
ZIP search bar
Use Location option
“Pick Up Here” CTA
Design Thinking: I avoided big changes and reused button styles, cards, and typographic hierarchy from Steve Madden’s PDP components — making the entire thing feel frictionless and “native.”
3. Checkout Side Sheet
Once a store is selected, the final side sheet opens to confirm:
Cart items with size, color, quantity
Pickup store details
This allows users to verify everything before completing the order, all while staying in the same visual flow.
Design Thinking: Used a compact, scrollable layout — no redirection. The user never leaves the page context, keeping their mental model intact.
Key Design Decisions
1. “My Store” Selector — Homepage Side Sheet
A subtle “My Store” button was added to the homepage. Clicking it opens a side sheet with:
Default store suggestions (based on IP/location)
A search bar to enter ZIP code
A “Use My Location” feature
Once a store is selected, it’s saved as “My Store” — which influences both pickup and delivery flows downstream.
Design Thinking: I kept the selector familiar — same sheet component Steve Madden uses elsewhere. No modals, no popups. Just fast, contextual interaction.
2. Product Display Page (PDP) Enhancements
Added a “Pick Up Today” button beside “Add to Cart”
Introduced two stacked sections beneath:
Shipping Info Block:
Shows a ZIP-based EDT if user hasn’t selected a store yet
Format:
“Ship to 90209 — Get it by Thursday, May 01 (Standard Shipping)”
This helps users plan better, especially if they’re gift shopping or in a hurry.
Pickup Info Block:
A clear note: “Free pickup in store available” — low-key CTA that boosts confidence
Clicking “Pick Up Today” opens a side sheet with:
Default store suggestions
ZIP search bar
Use Location option
“Pick Up Here” CTA
Design Thinking: I avoided big changes and reused button styles, cards, and typographic hierarchy from Steve Madden’s PDP components — making the entire thing feel frictionless and “native.”
3. Checkout Side Sheet
Once a store is selected, the final side sheet opens to confirm:
Cart items with size, color, quantity
Pickup store details
This allows users to verify everything before completing the order, all while staying in the same visual flow.
Design Thinking: Used a compact, scrollable layout — no redirection. The user never leaves the page context, keeping their mental model intact.
Design-Dev Collaboration
Developers had a clone of the live Shopify site. I helped them identify and reuse CSS styles from Steve Madden’s theme.
This reduced dev time drastically — minimal overrides, almost no net-new styling.
Only edge cases (like calendar logic or store distance filters) needed fresh buildout.
Design-Dev Collaboration
Developers had a clone of the live Shopify site. I helped them identify and reuse CSS styles from Steve Madden’s theme.
This reduced dev time drastically — minimal overrides, almost no net-new styling.
Only edge cases (like calendar logic or store distance filters) needed fresh buildout.
Outcome
Fully responsive, low-impact BOPIS integration with live EDT — designed and implemented without altering the brand’s visual system.
Faster implementation with developer-friendly handoff
Boosted usability and transparency for users = increased conversion potential
Outcome
Fully responsive, low-impact BOPIS integration with live EDT — designed and implemented without altering the brand’s visual system.
Faster implementation with developer-friendly handoff
Boosted usability and transparency for users = increased conversion potential