# Quick order list

> Every variant of a product in a table, each row with its own quantity, added to the cart in one click or kept in step with it. Buyers can also paste a list of SKUs.

Status: Ready (Smootify 2.0)  
URL: https://www.smootify.io/docs/features/quick-order  
Updated: 2026-10-30

A quick order list shows every variant of a product as a row of a table, each with its own quantity. The buyer fills the rows they need, such as 10 of size S and 4 of size L, and adds them all to the cart in one click. Buyers who already know the SKUs can paste a list instead. It suits B2B stores and any product sold in many sizes or colors at once.

> [!NOTE]
> It works on every Smootify plan, the free one too, with no add-on to turn on. With a B2B company, each row shows the company's volume price for its quantity (see [Quotes and B2B](https://www.smootify.io/docs/features/quotes)).

## 1. Add the table

Add a Custom element with the tag `quick-order` inside the product’s `smootify-product`, on the product page or in a product card. Outside a product, give it the custom attribute `data-product-id` with the product’s id. Without a product, it shows no row.

Keep it outside `smootify-add-to-cart`. The rows have quantities of their own and never change the product form’s quantity.

## 2. The row

Inside `quick-order`, add one `smootify-variant`: it is the row, and Smootify copies it once per variant. Inside it go:

- the variant’s values, with the usual `variant` attributes, such as `variant="sku"` and `variant="title"`;
- `quick-order="price"`: the price of one piece at the row’s quantity. With B2B volume pricing it changes with the quantity, and at 0 it shows the price of the row’s first quantity;
- a `quantity-input`, with its minus and plus buttons and a number input;
- `quick-order="line-total"`: the price times the quantity.

The row also takes the variant’s state classes, such as a sold-out one, and `is-active` when it has a quantity. Conditions inside a row follow the row’s variant, not the product: `condition="out-of-stock"` shows a «Sold out» label only in the rows sold out, and the same goes for `in-stock`, `on-sale` and `low-stock`. Outside the rows, conditions follow the product as usual.

### The quantity

Each row starts at 0. A row holds 0 or a quantity the store accepts: the [purchase rules](https://www.smootify.io/docs/features/purchase-rules) and the company’s B2B quantity rules, up to the stock.

- Plus from 0 jumps to the minimum, and minus below the minimum empties the row.
- A sold-out variant stays at 0.

## 3. Totals and the add button

Outside the rows, inside `quick-order`:

- `quick-order="pieces"`: the quantities of all rows added up;
- `quick-order="total"`: the line totals added up;
- `quick-order="add"` on a button: adds every row with a quantity to the cart in one addition, then empties the table. It is disabled while every row is at 0, and `quick-order` has the class `is-empty`;
- `quick-order="error"`: the cart’s error after an addition, such as a quantity the cart refuses. It is hidden when there is none.

```html
<smootify-product data-id="…">
  <quick-order>
    <smootify-variant>
      <div variant="sku">SKU</div>
      <div variant="title">Variant</div>
      <div quick-order="price">€0.00</div>
      <quantity-input>
        <button data-action="minus">-</button>
        <input type="number" value="0">
        <button data-action="plus">+</button>
      </quantity-input>
      <div quick-order="line-total">€0.00</div>
    </smootify-variant>
    <div><span quick-order="pieces">0</span> pieces · <span quick-order="total">€0.00</span></div>
    <button quick-order="add">Add to cart</button>
    <div quick-order="error"></div>
  </quick-order>
</smootify-product>
```

## 4. Or keep it in step with the cart

With the attribute `data-sync` on `quick-order`, the table follows the cart instead. Each row shows what the cart already holds of its variant. Every change goes to the cart right away, and a row set to 0 takes its line out. No add button is needed. `data-sync="false"` turns it off.

Only plain lines count: a line of the same variant with properties, add-ons or in a box stays apart and is not shown in the row.

## 5. Paste a list of SKUs

For buyers who order by code, add a Form Block inside `quick-order` with a Text area and a Form Button. The field’s Name does not matter: Smootify reads the first field filled.

The buyer writes one SKU per line, with the quantity after it:

```text
TEE-S 4
TEE-M, 10
tee-l x 2
TEE-XL
```

- The quantity goes after a space, a tab, a comma or a semicolon, with or without an `x`. Without one, it is 1.
- Capital letters do not matter.
- The same SKU twice adds up.

The rows of those SKUs take the quantities, and the buyer adds them with the add button, or, with `data-sync`, they go straight to the cart.

SKUs the product does not have show in the form’s Error message: “SKU not found” followed by the SKUs, or your own text in the custom attribute `data-error-not-found` on `quick-order`. The list works for one product: SKUs of other products are not found.

## Before you publish

> [!STUCK]
> - **No row shows.** `quick-order` is not inside a `smootify-product` and has no `data-product-id`.
> - **The product page's quantity changes with the rows, or the add-to-cart form adds the table.** `quick-order` is inside `smootify-add-to-cart`. Move it outside.
> - **A row does not go above a number.** That is the variant's stock, or a purchase rule's maximum.
> - **Plus jumps from 0 to a bigger number.** That is the minimum set by a purchase rule or the company's quantity rule.
> - **A pasted SKU is "not found".** It belongs to another product, or the variant has no SKU in Shopify.
> - **The error message is in English.** Write your own in `data-error-not-found`.