> For the complete documentation index, see [llms.txt](https://docs-shpf.bsscommerce.com/bss-b2b-quick-order-and-quotes/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs-shpf.bsscommerce.com/bss-b2b-quick-order-and-quotes/reorder/reorder-review-edit-modal.md).

# Reorder Review & Edit Modal

Learn how your customers review previous order items, change quantities, add new products, check stock, and place repeat orders using the **Reorder Review & Edit Modal**.

This guide explains the entire customer experience—from reviewing items and adding products to placing the order and receiving a checkout link or email invoice.

***

## 1. Overview & How It Helps Your Store

The **Reorder Review & Edit Modal** is the popup window that opens when a customer clicks **Reorder** on your store (`/pages/reorder`).

Instead of making customers search for items again and rebuild their cart item by item, this window automatically opens with their previous order items pre-filled at your store's current prices. Customers can easily change quantities, remove items they don't need, or search and add new products before placing their order.

```mermaid
graph TD
    A["Customer clicks Reorder"] --> B["Review & Edit Modal opens"]
    B --> C["Customer adjusts quantities or searches & adds new products"]
    C --> D["Customer clicks Place Order"]
    D --> E{"Quantity & Stock Check"}
    E -->|"Error found"| F["Customer adjusts quantity or removes item"]
    F --> C
    E -->|"Valid"| G["Order Placed Successfully!"]
    G --> H["Customer receives Checkout Link or Invoice Email"]
```

{% hint style="info" %}
**No Coding Required**: You can customize colors, text, and button visibility for this window anytime in your admin under **Reorder > Edit Reorder Page Template**.
{% endhint %}

***

## 2. Before You Begin

To make sure your customers can use the Reorder Review & Edit Modal, verify these settings in your Shopify store:

1. **Re-Order Page is Published**: Make sure your Re-Order page status is set to **Published** under **Reorder > Reorder Settings**.
2. **App Embed is Active**: Ensure the **BSS B2B Quotes** App Embed is turned on in your Shopify theme editor.
3. **Delivery Mode Selected**: Choose how customers complete payment (*Instant checkout link*, *Email invoice*, or *Both*) under **Delivery Modes**.
4. **Customer Login**: Customers must log into their customer account on your store so the app can display their correct pricing and order history.

{% hint style="danger" %}
**Safe for Existing Shopping Carts**: Reordering never interferes with or clears items your customer already has in their regular storefront shopping cart. Repeat orders are created as separate draft orders in Shopify.
{% endhint %}

***

## 3. UI Layout & Callouts

### Review and Reorder Modal Interface

* **Modal Header**: Displays the order reference (e.g. *Reorder Items from Order #1001*).
* **Add New Items Button**: A `[+ Add new items]` button that opens a product search bar so buyers can search your store catalog by product name, variant, or SKU.
* **Line Items List**: Shows product photos, names, SKUs, line total prices (`Unit Price × Quantity`), quantity adjusters (`-` / `+`), and trash icons to remove items.
* **Order Summary**: Displays the recalculated subtotal in the customer's active currency.
* **Action Buttons**: Includes the main **Place Order** button, a **Reset** button to restore original quantities, and a **Cancel** button.

### Unavailable Items Notice (When Needed)

If a previous order contains products that you have deleted, archived, or marked out of stock, a gentle warning window appears first:

* `[Cancel]`: Closes the window without changing anything.
* `[Continue]`: Automatically removes unavailable items and opens the main reorder window with the remaining available products.

***

## 4. Step-by-Step Customer Journey

### Step 1: Reviewing Line Items & Adjusting Quantities

When a customer clicks **Reorder**, the window opens with their previous order items already pre-loaded.

#### 1. Price Display & Wholesale Pricing

* **Line Total Price**: Each product row clearly displays the total price for that line (`Unit Price × Quantity`), updating instantly whenever the customer changes quantities.
* **B2B & Quantity Discounts**: If you offer wholesale contract pricing or volume discounts, prices adjust automatically based on the quantity selected.
* **Multi-Currency Support**: Prices automatically display in the customer's selected store currency.

#### 2. Quantity Rules & Limits

The quantity box automatically enforces your store limits:

* **Minimum Quantity**: Customers cannot lower quantities below your minimum order requirement (default is 1).
* **Maximum Quantity**: Quantities cannot exceed your maximum allowed order limit.
* **Pack Size Multiples**: If products are sold in specific pack sizes (e.g., packs of 10), quantity inputs only accept valid multiples (10, 20, 30).

#### 3. Stock & Inventory Limits

* **If Backordering is Disabled**: Quantity choices are capped at your actual warehouse stock so customers cannot order more than you have available.
* **If Backordering is Enabled**: Customers can order beyond on-hand inventory according to your Shopify settings.

#### 4. Removing Unwanted Items

Customers can click the trash icon on any item row to remove products they don't want to reorder. The order subtotal updates immediately.

#### 5. Placing the Order & Error Protection

The **Place Order** button automatically prevents invalid submissions:

* It stays disabled if any quantity violates your minimum, maximum, or pack size rules, or if all items are removed.
* It re-enables as soon as errors are corrected and at least one item remains.

***

### Optional Feature: Searching & Adding New Products

Customers can easily add extra products to their repeat order by searching your store catalog directly inside the window.

```mermaid
graph LR
    A["Search by product title, variant, or SKU"] --> B["Select product from search results"]
    B --> C["Item added to reorder list with success notification"]
```

1. **Search Bar**: Customers type a product name, variant, or SKU number in the search box.
2. **Instant Search Results**: Matching products appear in a dropdown list with photos, titles, SKUs, and prices.
3. **Add to Order**: Clicking a product adds it to their reorder list with a confirmation message (*"Product added successfully"*).

***

### Step 2: Stock Check When Placing Order

To protect your store from overselling, the app re-checks your inventory the moment the customer clicks **Place Order**.

```mermaid
graph TD
    A["Customer clicks Place Order"] --> B{"Stock Availability Check"}
    B -->|"Item Out of Stock"| C["Warning message shows available stock limit"]
    C --> D["Customer adjusts quantity or removes item"]
    D --> A
    B -->|"Stock Available"| E["Order Created Successfully"]
```

1. **Live Stock Re-Check**: Before creating the order in Shopify, the app verifies that all requested items are still in stock.
2. **Out of Stock Warning**: If an item sold out while the window was open, a clear error message appears at the top showing the available stock limit.
3. **Easy Fix**: The customer simply adjusts the quantity to match available stock or removes the item, then clicks **Place Order** again.
4. **No Double Submissions**: The button enters a loading state upon click to prevent accidental double-clicks.

***

### Step 3: Creating the Shopify Order

Once the order details are validated, the app automatically creates a new draft order in your Shopify admin:

* **B2B Wholesale Accounts**: Company location rules, tax exemptions, and wholesale contract pricing apply automatically.
* **Retail Accounts**: Standard retail pricing and active store promotions apply.
* **Shopping Cart Safe**: The order is created directly in Shopify without touching or clearing items in the customer's regular shopping cart.

***

### Step 4: Order Completion & Next Steps

After the order is created, a confirmation window guides your customer on how to finish payment based on your chosen **Delivery Mode**:

```mermaid
graph TD
    A["Order Created Successfully"] --> B{"Merchant Delivery Setting"}
    B -->|"Return Checkout Link"| C["Displays instant Checkout Link for immediate payment"]
    B -->|"Invoice Sent Email"| D["Sends invoice email to customer with payment instructions"]
    B -->|"Both Options"| E["Displays Checkout Link and sends invoice email"]
```

#### Mode 1: Return Checkout Link

* Displays a direct link to Shopify Checkout.
* Includes a **Copy Link** button so customers can copy the link or click to complete payment immediately.

#### Mode 2: Email Invoice Sent

* Sends an automated Shopify invoice email to the customer's email address.
* Displays a friendly message: *"Your order request has been received! An invoice with payment instructions has been sent to your email."*

#### Mode 3: Both Options

* Displays the direct Checkout Link while also sending the invoice email, giving customers total flexibility.

***

## 5. Key Rules & Summary

| Customer Scenario                      | What Happens                                                                      | How It Protects Your Store                     |
| -------------------------------------- | --------------------------------------------------------------------------------- | ---------------------------------------------- |
| **Past Items Out of Stock or Deleted** | Notice lists unavailable items; clicking **Continue** proceeds with active items. | Prevents ordering deleted or unavailable items |
| **All Past Items Unavailable**         | Reorder window states *"No items available to reorder from this order."*          | Clear guidance when no items can be reordered  |
| **Line Total Price Display**           | Displays total price for each line (`Unit Price × Quantity`), updating live.      | Clear pricing visibility for buyers            |
| **Quantity Min/Max Limits**            | Invalid quantities show a warning and disable **Place Order** until fixed.        | Enforces store's order quantity rules          |
| **Inventory Limits**                   | If backorders are off, quantities cannot exceed available warehouse stock.        | Prevents overselling out-of-stock inventory    |
| **Searching & Adding Extra Items**     | Buyers can search catalog items by title, variant, or SKU and add them.           | Helps buyers build larger repeat orders        |
| **Item Sells Out While Editing**       | Warning banner lists out-of-stock item and available quantity upon submit.        | Guarantees real-time inventory accuracy        |
| **Shopping Cart Safety**               | Reordering creates a separate draft order without modifying storefront cart.      | Keeps customer cart items completely safe      |
| **B2B Wholesale Accounts**             | Customer contract pricing and tax rules apply automatically.                      | Ensures accurate wholesale pricing             |
| **Accidental Double Clicks**           | **Place Order** button shows loading spinner to prevent duplicate submissions.    | Prevents duplicate order creation              |

***

## 6. Related Guides

* [Reorder Overview](/bss-b2b-quick-order-and-quotes/reorder/overview.md) — High-level vision, target audience, and B2B/DTC reorder scenarios.
* [Full Setup Guide](/bss-b2b-quick-order-and-quotes/reorder/full-setup-guide.md) — Admin configuration, customer eligibility, delivery mode selection, and publishing options.
* [Reorder Page & Order Tabs](/bss-b2b-quick-order-and-quotes/reorder/reorder-page.md) — Storefront Order Tab, Waiting for Checkout Tab, and layout guide.
* [Draft Order Detail Page](/bss-b2b-quick-order-and-quotes/reorder/draft-order-detail-page.md) — Pending order detail page view and checkout/reorder triggers.
* [Template Customization](/bss-b2b-quick-order-and-quotes/reorder/template-customization.md) — Customizing window colors, text, and element visibility.
* [Storefront Translation](/bss-b2b-quick-order-and-quotes/reorder/storefront-translation.md) — Translating text labels and customer warning messages.