Skip to content

Quick Order

A bulk-ordering sheet: every product in a collection on one page, with a variant picker, a quantity box and an add button on each line, plus a single button that sends the whole sheet to the cart.

It exists for the customer who already knows what they want and is reordering it — trade, wholesale, and repeat B2B buyers. They should never have to walk a category, open a product page, and click through a buy flow for each of eleven line items.

Settings

SettingWhat it does
Color schemePicks which set of colors to use for this section
HeadingThe title above the sheet
CollectionThe collection whose products fill the sheet. Every product in it becomes one line, up to 50 — products past the 50th are not shown.
Minimum quantityThe quantity at which a line earns its savings badge. Leave it at 0 to turn the badge off entirely.
Savings percentThe percentage the badge shows (for example 10 renders "Save 10%"). Only appears in the editor once Minimum quantity is above zero.
Related articlePick a blog post to link from the sheet as a "Read more" link. Leave it unset for no link.

How the sheet is filled in

Every quantity box starts empty. That is what makes the batch button honest: Add all to cart sends exactly the lines the customer typed a quantity into, not one of everything in the collection. Until at least one line has a quantity, the button is greyed out.

The per-line Add button is more direct — press it and that product goes to the cart on its own. If its quantity box is blank, it adds one.

After a successful add the lines it sent are cleared. Nothing else on the page repopulates them, so leaving the numbers in place would let a second click quietly double the order.

Sold-out products

A product with no available variant still gets its line, so the customer can see it exists and what it costs — but the quantity box is disabled and the button reads Sold out instead of Add.

That is not just tidiness. Shopify's add-to-cart request is all-or-nothing: a single unavailable line makes the whole request fail, so one sold-out product in the collection would otherwise break Add all to cart for every other line on the sheet.

Individual sold-out variants inside a multi-variant product are shown in the picker, marked "Sold out", and cannot be selected.

The savings badge

When Minimum quantity and Savings percent are both above zero, each line watches its own quantity box. The moment a line's quantity reaches the minimum, that line's savings badge appears and the change is announced to screen readers. Drop the quantity back below it and the badge goes away again.

The minimum is per line, not per order: ten of one product earns the badge; one each of ten different products does not.

Setting either number to 0 hides the badge everywhere — a badge reading "Save 0%" promises nothing.

The badge does not apply the discount

The badge is a signal, not a price rule — the theme editor says so too. A theme cannot change what a customer is charged; prices come from the product and discounts come from Shopify.

So the badge has to describe a discount that genuinely exists. Create the quantity discount in Shopify Discounts (or a quantity-pricing app) first, then set Minimum quantity and Savings percent to the same numbers that discount uses. If the two disagree, the sheet promises a saving the checkout will not give.

Leaving Minimum quantity at 0 is the safe default and hides the badge entirely.

Before you pick a collection

Until you choose a collection the section renders nothing on your storefront — no heading, no empty card, no "browse products" detour. In the theme editor you get a short setup prompt in its place so the section is still selectable and obvious. The same is true of a collection that has no products in it.

Accessibility

  • Every quantity box and variant picker is named after its own product — a screen reader announces "Quantity, M8 x 50 bolt", not fifty identical "Quantity" fields. The name is built from the column heading and the product title already on screen, so it is correct in all 50 locales without a separate translation.
  • The savings badge itself is hidden from screen readers; the saving is spoken once, through a polite live region on the row, and only when it changes.
  • Every control — quantity box, variant picker, both buttons — is at least 44 × 44 px.
  • If an add fails (a sold-out variant taken in another tab, an inventory cap, a dropped connection), the theme's cart error message appears in the customer's own language.

On mobile

Below 768 px the table becomes one card per product — the product line, its variant, its quantity and price, and its own add button — with the batch button at the end of the list. The table itself never appears at phone widths, so nothing scrolls sideways.

Because the column headings have nowhere to go on a card, each value carries its own heading beside it — Quantity, Price — so the quantity box is never just a blank field. A product with no variants to choose between has no Variant line on the card at all, rather than a heading with nothing after it.

Preset signature — Tine

Quick order is a Tine signature section. Under Tine it is skinned as a forge trade counter: a riveted steel ledger plate, an anvil-charcoal header bar with the molten heat seam running beneath it, prices set in tabular monospace, squared controls, and a savings badge that ignites in ember-gold as a line crosses the minimum.

This is purely visual — the section, its settings and its behaviour are identical on every preset.

Tips

  • Point it at a focused collection, not your whole catalog. The sheet is a reorder tool; it works when a buyer can see the fifteen consumables they actually repeat-buy. It stops working at 50 lines, and anything past the 50th product is simply not rendered.
  • The best collections for it are the ones customers exhaust: fasteners, filters, refills, blanks, consumables — anything bought by the box.
  • Give it its own page rather than burying it in the homepage. Then link it from your main menu so trade customers can go straight there.

Built for the Shopify Theme Store.