Quick Order Page

1. Overview

The quick order page lives on your storefront at your-store.myshopify.com/apps/orderflow. It has 4 tabs — Products, Saved Lists, Order History, and Import — a search bar at the top, and a cart sidebar on desktop.

The page runs through Shopify's App Proxy, so it appears on your domain with your theme's header and footer wrapping it. This means customers see a consistent experience — the quick order page feels like a native part of your store, not an external tool. No separate login is required because the customer's Shopify session carries over automatically.

The layout is designed for speed. B2B buyers often know exactly what they need — they want to search by SKU, set quantities, and check out as fast as possible. The search bar is front and center, results appear instantly, and the cart sidebar gives a running total without navigating away from the product list.

Every interaction on the quick order page is built for efficiency. Keyboard shortcuts let power users fly through orders without touching the mouse. CSV upload handles bulk imports in seconds. Saved lists turn weekly repeat orders into a single click. The goal is to make B2B ordering faster than any other method your customers have used before.

2. Product Search

The Products tab is the default view and the primary way customers find items. The search bar at the top provides instant search across your entire catalog by SKU or product name. As the customer types, results appear immediately — no need to press Enter or wait for a page reload.

Each result appears as a product card showing: product image, title, SKU, variant selector (if the product has multiple variants), price, stock status badge (In Stock, Low Stock, or Out of Stock), a quantity stepper with plus/minus buttons, and an Add button. Out-of-stock items are still visible in search results so customers know the product exists, but the Add button is disabled with a clear visual indicator.

Search supports partial matches — typing "WID" finds "Widget Pro", "Wide Bracket", and any other product containing those characters. This is especially useful for long SKU codes where customers remember only part of the identifier. The search algorithm prioritizes exact SKU matches first, then partial SKU matches, then product name matches.

Keyboard users can press / to focus the search bar from anywhere on the page, and Escape to clear the current search. Multi-line paste detection is also built in: if you paste multiple SKUs (one per line) from a spreadsheet, OrderFlow automatically switches to the Import tab and processes them as a bulk import.

3. Saved Lists

Standard + Plus plans

Saved Lists let customers save their current cart as a named list for future use. This is one of the most popular features for B2B buyers who place the same or similar orders on a regular schedule — a restaurant ordering weekly supplies, a contractor restocking materials, or a retailer replenishing inventory.

The Saved Lists tab shows all of a customer's saved lists in a clean card layout. Each card displays the list name, the number of items, and the date it was created. Three actions are available for each list: Load into cart (replaces the current cart contents with the saved list items), Download as CSV (exports the list as a spreadsheet for record-keeping or sharing), and Delete (permanently removes the saved list).

To save a new list, customers add items to their cart as usual, then click the "Save as list" button in the cart sidebar. A dialog asks for a list name — something descriptive like "Weekly Office Supplies" or "Monthly Kitchen Restock". The list is saved immediately and appears in the Saved Lists tab.

Customers can have multiple saved lists, and there is no limit on the number of items per list. Lists persist until the customer deletes them or the merchant uninstalls OrderFlow. This makes saved lists a reliable tool for building repeatable ordering workflows.

4. Order History

The Order History tab shows all previous orders placed through OrderFlow. Each order is displayed as a card with the order number, date, a color-coded status badge (Paid, Pending, or Refunded), and the order total. Orders are sorted newest first, so the most recent activity is always at the top.

Clicking on an order card expands it to show the full line-item details: product name, SKU, quantity ordered, and line price for each item. This gives customers a quick reference for what they ordered previously without needing to log into their Shopify account or search through email confirmations.

The "Buy again" button is the key feature here. When a customer clicks it, all items from that past order are loaded into the current cart with the same quantities. This is perfect for reordering — the customer can review the cart, adjust quantities if needed, and check out immediately. It turns a multi-step process into a two-click operation.

Order history is available on all plans, including Free. It shows only orders placed through OrderFlow (not orders from your regular Shopify storefront). This keeps the history focused and relevant to the B2B ordering workflow.

5. CSV/Excel Import

The Import tab accepts CSV, TSV, XLS, and XLSX files for bulk ordering. Customers can drag and drop a file onto the upload area or click to open a file picker. This is ideal for buyers who maintain their order lists in spreadsheets or receive purchase orders from their own systems.

After uploading a file, OrderFlow automatically detects and maps the columns. It looks for SKU and Quantity columns by analyzing the header row and column contents. If the automatic mapping is correct, results appear immediately. If auto-mapping fails or the columns have unusual names, a column mapping modal lets customers manually assign which column contains SKUs and which contains quantities.

The results screen shows three categories: Matched items (products found in your catalog, ready to add to cart), Unmatched items (SKUs that could not be found, with error details explaining why), and a Summary showing total rows processed, items matched, and items skipped. Customers click "Add all to cart" to add every matched item in one action.

On the Free plan, CSV import is limited to 50 rows per file. Standard and Plus plans have no row limit. There is also a paste detection feature: if a customer pastes multiple lines of text (such as copying a column of SKUs from a spreadsheet), OrderFlow detects the multi-line input and triggers the import flow directly, without needing a file upload.

6. Cart Management

On desktop, the cart sidebar is always visible on the right side of the page. It provides a real-time view of everything the customer has added. Each cart item shows: product title (clamped to two lines for long names), SKU, quantity stepper with plus and minus buttons, line price, and a remove button.

At the top of the cart sidebar, a badge shows the total item count, and two action buttons are available: "Save as list" (saves the current cart as a named list for future reuse) and "Clear all" (removes all items from the cart). At the bottom, the subtotal is displayed prominently along with the Checkout button.

When a customer clicks Checkout, OrderFlow creates a standard Shopify cart using the Storefront API and redirects the browser to Shopify's native checkout. This means the checkout experience is exactly what your customers already know — your payment methods, shipping options, discount codes, and checkout customizations all work as expected. OrderFlow never handles payment information directly.

On mobile, the cart sidebar is hidden to maximize screen space for browsing products. Instead, a bottom bar shows the current item count, running total, and a Checkout button. Tapping the bottom bar expands the full cart view as an overlay, where customers can review items, adjust quantities, and proceed to checkout.

7. Keyboard Shortcuts

OrderFlow includes keyboard shortcuts for power users who want to navigate the ordering process without reaching for the mouse. These shortcuts are designed for the most common actions during a typical ordering session.

On desktop, a small help panel in the corner of the search area shows available shortcuts as subtle hints. On mobile devices, keyboard shortcuts are hidden since they are not applicable to touch interactions. All shortcut keys are chosen to avoid conflicts with common browser shortcuts.

8. Mobile Experience

At mobile widths (375px and below), the quick order page adapts its layout for comfortable touch-based ordering. The core functionality remains identical — customers can search, browse, add to cart, and check out — but the visual layout changes to fit smaller screens.

Product cards stack vertically in a single column. The Add button moves below the product info instead of sitting inline, giving it a larger touch target. The variant selector and quantity stepper are full-width for easier interaction. Tab labels shorten to save horizontal space: "Products", "Lists", "History", and "Upload" instead of the full desktop labels.

The cart sidebar transforms into a fixed bottom bar that shows the item count, running total, and a prominent Checkout button. This bar is always visible as the customer scrolls through products, so they can see their cart total at a glance and check out at any time. Tapping the bar opens the full cart as a slide-up overlay.

Keyboard shortcut hints are hidden on mobile since they do not apply to touch interfaces. All interactive elements meet minimum touch target sizes (44x44 points) for reliable tapping. The search bar is prominently placed at the top of the viewport and the file upload area is sized for easy drag-and-drop on tablets.

9. B2B Features

Plus plan

For Shopify Plus merchants using Shopify's native B2B features, OrderFlow's Plus plan integrates directly with the B2B company and catalog system. When a B2B buyer (company member) logs into your store and visits the quick order page, the experience adapts automatically to reflect their company context.

A company banner appears at the top of the page showing the buyer's company name, confirming they are ordering on behalf of their organization. Product prices switch to the company's catalog pricing — displayed in a distinct blue color with the retail price shown as a crossed-out reference. This makes it immediately clear that the buyer is seeing their negotiated wholesale rates.

If the company has payment terms configured (e.g., Net 30), a payment terms badge appears near the cart subtotal. This gives buyers confidence that their agreed payment terms will apply to the order. The checkout flow respects these terms automatically through Shopify's native B2B checkout.

For companies with approval workflows, orders above a configured threshold create draft orders instead of proceeding directly to checkout. The buyer sees a confirmation that their order has been submitted for approval, and the merchant receives a notification in the Shopify admin to review and approve the draft order. This prevents unauthorized large purchases while still giving buyers a smooth ordering experience.

10. Access Control

The quick order page handles several access states gracefully, showing clear messages to customers when they cannot place orders. Each state is designed to explain what is happening and guide the customer toward the appropriate next step.

All access control messages are styled consistently with the page's branding and use clear, non-technical language. The goal is to prevent confusion — customers should always understand why they cannot order and what they can do about it.