A Webflow setup drawer pattern for guided commerce flows
The challenge behind the build
Configurator users may want to review selected foil, mast, tail, board, sizes, SKUs, and total before checkout, but cross-domain SureCart assumptions can make browser-only cart hacks fragile.
The implementation goal
SoFlow documented a drawer architecture where the configurator remains the source of selected line items and the drawer renders those choices before redirecting to a SureCart checkout URL.
SoFlow designed a Webflow cart drawer direction that can show selected setup items while keeping the actual checkout flow owned by SureCart.
This proof card should stay compact until a production drawer exists, but the architecture is clear and public-safe.
Our other projects
The brief was to explore a more polished Webflow setup/cart drawer around configurator selections without weakening checkout reliability.
Configurator users may want to review selected foil, mast, tail, board, sizes, SKUs, and total before checkout, but cross-domain SureCart assumptions can make browser-only cart hacks fragile.
The shop lives on a separate SureCart domain. The solution should not rely on cross-domain SureCart localStorage, cookies, or secret API keys in browser JavaScript.
SoFlow documented a drawer architecture where the configurator remains the source of selected line items and the drawer renders those choices before redirecting to a SureCart checkout URL.
The Webflow configurator stores selected items in browser state. The drawer reads those selections, shows the setup context, and sends checkout to SureCart instead of trying to own payment logic.
- Selected setup review drawer
- Foil, mast, tail, board, size, SKU, and total display direction
- SureCart remains the checkout authority
- No browser-exposed SureCart secret keys
- Designed as a future layer separate from the configurator Worker
This proof card should stay compact until a production drawer exists, but the architecture is clear and public-safe.
- README documents the selected-item drawer flow
- README explicitly warns against exposing SureCart secret keys in browser JavaScript
Can this be adapted for another business?
Yes, if the same type of workflow, integration, or decision logic exists. The implementation should be scoped around the buyer's systems and public-safety needs.
Why put this in Webflow if external code is involved?
Webflow is the public storytelling and CMS layer. External code should stay in the app, Worker, or integration layer where it can be versioned, secured, and tested.
What is needed before publishing?
Build or capture a prototype screenshot and confirm the drawer is not described as replacing checkout.
This work proves that SoFlow can improve commerce UX while respecting checkout and security boundaries.
Can this be adapted for another business?
Yes, if the same type of workflow, integration, or decision logic exists. The implementation should be scoped around the buyer's systems and public-safety needs.
Why put this in Webflow if external code is involved?
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Block quote
Ordered list
- Item 1
- Item 2
- Item 3
Unordered list
- Item A
- Item B
- Item C
Bold text
Emphasis
Superscript
Subscript
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Block quote
Ordered list
- Item 1
- Item 2
- Item 3
Unordered list
- Item A
- Item B
- Item C
Bold text
Emphasis
Superscript
Subscript
Legacy drawer assumptions depended on same-site SureCart behavior that no longer matched the shop architecture.
The new direction keeps checkout stable while still allowing a nicer Webflow review experience around configurator output.
Old same-site SureCart drawer scripts assumed access to local storage and same-origin APIs. That becomes fragile when checkout is owned by a separate shop domain.
