# Catalog and Quick Order

URL: https://docs.sparklayer.io/help/sales-ordering/catalog

Browse your whole range in pictures and add products straight to the order: grid, quick-buy list or matrix views, search, filters and pack-aware quantities.

> **Catalog and Quick Order is in early access.** Request it for your store. [Request early access](https://feedback.sparklayer.io/get-started?choice=now).

> **Quick summary**
>
> - Catalog and Quick Order is an image-first product browser inside the SparkLayer widget. It has search, a collection filter, 3 views, and quantities that follow your pack sizes and volume breaks.
> - Sales reps see it as the **Catalog** tab. Customers see the same browser as the **Quick Order** tab, so it's a fast way for anyone to build an order.
> - Every **Add** goes straight into the cart. For a rep, that's the cart of the customer they're [ordering for](https://docs.sparklayer.io/help/sales-ordering/order-for-a-customer.md), at that customer's prices.
> - The order button at the top, such as **60 in order**, shows what's in the order so far without leaving the catalog, and **Review order** opens the cart to check out. Catalog and Quick Order need the Starter plan or above.
> - To keep products out of the catalog, such as custom products or fees, hide them for every B2B customer or for some customer groups. See [Hide products from the catalog](#hide-products).

## How it works

Catalog and Quick Order show your products as a page of cards, each with its photo, price, stock and quantity rules. Choose a quantity and click **Add**. The line goes into the order as if it had been typed into [My Cart](https://docs.sparklayer.io/help/storefront/interfaces/my-cart.md). The order stays in the cart, so you can switch between browsing and the cart at any time.

Building an order from the catalog:

1. **Find products**: Search, filter by collection or sort the range
2. **Set a quantity**: Choose the variant and quantity; packs and volume prices apply
3. **Add**: The line goes straight into the cart
4. **Review order**: Open the cart from the running order and check out

| Who | Tab name | Adds go to |
| --- | --- | --- |
| Customer | **Quick Order** | Their own cart |
| Sales rep | **Catalog** | The cart of the customer they're ordering for |

## Open the catalog

1. Open the SparkLayer widget in your store, for example from the cart or account link.
2. Sales reps: choose the customer you're ordering for first. See [Choose a customer](https://docs.sparklayer.io/help/sales-ordering/order-for-a-customer.md#choose-a-customer).
3. Click **Quick Order** (customers) or **Catalog** (sales reps). It's the last tab, after **My Account**.

**More detail**

The widget widens while the tab is open, so more products fit on the screen. The rep's **Catalog** header also has a **Counter** button, which opens [Counter mode](https://docs.sparklayer.io/help/sales-ordering/counter-mode.md) for serving customers in person.

## Choose a view

The catalog has 3 views. Switch between them with the view icons at the top of the catalog. Your choice is remembered next time.

| View | Best for | What you see |
| --- | --- | --- |
| **Grid view** | Browsing by eye, new products, customers who know a product by its look | A card per product: photo, collection, name, SKU, price and MSRP, volume offer, stock and pack rules, then the option, quantity, **Add** and the heart |
| **Quick-buy list** | Fast ordering when you know what you want | A table with **Product**, **Variant**, **Qty** and **Line total** columns, and **Add** on each row. The line total also shows the quantity times the unit price |
| **Matrix ordering** | Products with two options, such as colour and size | Each two-option product as a grid of every combination, so you can fill in several at once. Other products show as a single row |

**More detail**

On a narrow screen the list's columns stack, with **Variant**, **Qty** and **Line total** labelled on each row. On a narrow grid card, the **Add** button shows only the plus sign and the line total, so the price is never cut off.

## Set the quantity

Each product starts at its smallest allowed quantity. The quantity follows your [quantity rules](https://docs.sparklayer.io/help/storefront/quantity-rules.md):

- **−** and **+** move by one pack. For a product sold in packs of 12, they go 12, 24, 36.
- You can type any number. When you leave the box, it snaps to the nearest pack and stays within the minimum and maximum.
- The rules show under the price, such as **Min 6 · Packs of 6** or **Max 100**.

For a product with options, choose the variant from the dropdown first. The price, stock and volume offer change to match it.

### Volume breaks

If a product has [quantity pricing](https://docs.sparklayer.io/help/pricing/quantity-pricing.md) (volume breaks), its card shows the best offer in words, such as "From $7.70 for 34+", or "$6.40 each by the pack" for a product sold in packs.

1. Hover over, focus or tap the offer to see **Qty discount pricing**: every break with its **Qty**, **Price** and **Savings**.
2. Click a row to set the quantity to that break.

When the quantity reaches a break, the card shows the saving (for example **−20%**) and **Add** shows the discounted line total. The cart uses the same price.

### Stock

| Status | Means |
| --- | --- |
| **In stock** | Available, with a count (such as **100+**) if you [show unit counts](https://docs.sparklayer.io/help/storefront/stock-display.md). |
| **Low** | Stock is low, with the units left if counts are shown. |
| **Pre-order** | Can be ordered now and ships later, with the expected date. |
| **Out of stock** | Can't be ordered: the button reads **Sold out**. You can still add it to the wishlist. |

What customers see depends on the [stock display](https://docs.sparklayer.io/help/customers/customer-groups.md#show-stock-levels) settings of their customer group.

## Add products to the order

1. Choose the variant and quantity.
2. Click **Add**. It turns green with a tick, and a message confirms who the order is for.

**More detail**

The product's card then shows a tick and the quantity already in the order, and the list view shows how many are in the order, such as **12 in order**, under the button. These counts are read from the cart, so they're always up to date. If a product is already in the order, **Add** adds to the quantity that's there.

### Add from the matrix

1. In **Matrix ordering**, type a quantity into each combination you want. Each cell shows its stock and price, and **Unavailable** for combinations you can't order.
2. Check the total under the grid: units selected and the order value.
3. Click **Add to order** to add every combination at once.

**More detail**

In the matrix, volume breaks count the whole grid's quantity, so 6 small and 6 medium count as 12. Click the info icon in a cell to see that variant's SKU and its pack rules.

### Add to a customer's order as a sales rep

When a rep is [ordering for a customer](https://docs.sparklayer.io/help/sales-ordering/order-for-a-customer.md), every **Add** goes into that customer's cart, at that customer's prices, stock and quantity rules. The confirmation names the customer, so you always know whose order you're building. To build an order for someone else, [switch customer](https://docs.sparklayer.io/help/sales-ordering/order-for-a-customer.md) first.

## Review the order

1. Click the order button at the top right. It shows how many units are in the order, such as **60 in order**. The **In this order** panel shows the last 3 lines added, with the number of lines and units.
2. To see every line, click the link under them, such as **+ 4 more lines in the cart**. Click **Show fewer lines** to go back.
3. Click **Keep browsing** to carry on, or **Review order** to open the cart and [check out](https://docs.sparklayer.io/help/storefront/interfaces/my-cart.md#check-out).

## Add to the wishlist

To save a product for later, click the heart beside its **Add** button (**Add to wishlist**). The heart fills when the product is saved. Click it again to remove it. You can save a product that's out of stock.

**More detail**

The wishlist belongs to the customer's account: a rep ordering for a customer saves to that customer's wishlist, not their own. Saved products appear in the customer's [Favourites](https://docs.sparklayer.io/help/ordering/favourites.md) in My Account.

## Share a view

To send someone what you're looking at, click **Copy link**. It copies the search, collection, sort, page and view. Paste it into an email or chat, and the person who opens it lands on the same view. 

## Hide products from the catalog

Some products shouldn't be ordered straight from the catalog: a custom product that needs artwork uploaded, or a printing charge or add-on fee that only belongs on an order with something else. Hide them with the `sparklayer.settings` [metafield](https://docs.sparklayer.io/help/glossary.md#metafields) on each variant, for every B2B customer or only for some customer groups.

| You want | Set on each variant | What customers and reps see |
| --- | --- | --- |
| **Hide it** | `"display": false, "sell": false` | Nothing: it's left out of Catalog and Quick Order, search in My Cart and SparkLayer's other views |
| **Show it, but stop orders** | `"sell": false` | The product, marked **Unavailable for this account**, with no way to add it |
| **Hide it from some customer groups** | An entry for each of those groups | Hidden only for customers in those groups |
| **Show it to some customer groups only** | A `base` entry that hides it, and an entry for each group that sees it | Hidden for everyone else |

Sales reps see what the customer they're ordering for sees, so a product hidden from a customer's group is hidden from the rep's **Catalog** too.

### Step 1. Turn on the metafield in SparkLayer

You only do this once. Go to **Integrations > Platform** in the SparkLayer Dashboard ([open](https://app.sparklayer.io/configuration/integrations/platform)), or **SparkLayer Wholesale > Integrations > Platform** in the Shopify app and, in the **Metafields** card, click **Configure** next to **SparkLayer metafields**, then enable the product settings metafield. See [Product rules per customer group](https://docs.sparklayer.io/help/storefront/product-settings.md#set-product-settings-for-a-customer-group).

### Step 2. Build the value

Choose who shouldn't see the products and whether to hide them or only stop orders. The value is the same for every product. For customer groups, use each group's handle, such as `trade`: find it by clicking the group's name at **Customers > Groups** in the SparkLayer Dashboard ([open](https://app.sparklayer.io/customers/groups)), or **SparkLayer Wholesale > Customers > Customer groups** in the Shopify app.

For example, this value hides a variant from every B2B customer:

```json
[{ "customer_group": "base", "display": false, "sell": false }]
```

### Step 3. Add it to each variant

The value goes on every variant you're hiding: a product with 3 sizes needs it on all 3.

- **A few products:** open each variant in your store's admin, paste the value into its `sparklayer.settings` field and save. In Shopify, it's **Settings** under **Metafields**, as the form shows.
- **Many products:** fill in the field for every variant in one table.
- **With your AI assistant:** connect your Shopify store to it, such as with the Shopify connector in Claude, click **Ask Claude** or **Ask ChatGPT** in the form above, and tell it which products. The assistant finds every variant, shows you each change and waits for your approval before saving anything.

**Lots of products? Fill them in one table (Shopify):** in your Shopify admin, go to **Products**, tick the products and click **Edit products**. Click **Columns**, tick the SparkLayer field under **Metafields**, type the values and click **Save**. See [Shopify's guide](https://help.shopify.com/en/manual/custom-data/metafields/bulk-edit-metafields).

**More detail**

A variant can already have a `sparklayer.settings` value, such as a pack size for a customer group. Pasting a new value replaces it. Add the `display` and `sell` keys to the entries that are there instead, or let the AI assistant merge them for you: its prompt keeps every other setting.

### Step 4. Check it worked

Changes take about 10 minutes to sync. Then sign in as a customer in one of the groups, or [order for one](https://docs.sparklayer.io/help/sales-ordering/order-for-a-customer.md) as a rep, open **Quick Order** or **Catalog** and search for the product.

`display` and `sell` only change SparkLayer. To hide products from your store's own pages too, such as from retail shoppers, see [Hide products from customers](https://docs.sparklayer.io/help/guides/hide-products.md).

## The parts of the screen

| Part | What it shows / does |
| --- | --- |
| View switch | Three icons: **Grid view**, **Quick-buy list** and **Matrix ordering**. Your choice is remembered next time. |
| Order button, such as **60 in order** | How many units are in the order. Click it to see the order's lines (see [Review the order](#review-the-order)). |
| Collection filter | **All collections**, or one collection, with a count of products in each. Type in **Filter collections…** to find one in a long list. On Shopify, the collections follow your navigation menu: see [Collections in Catalog and Quick Order](https://docs.sparklayer.io/help/platforms/shopify/catalog-collections.md). |
| Search | **Search the catalog…** finds products by name, SKU and collection. With several words, a product must match all of them. |
| Sort | **Name A–Z**, **Price: low to high** or **Price: high to low**. |
| **Copy link** | Copies a link to the view you're looking at (see [Share a view](#share-a-view)). |
| Page footer | The products shown out of the total, with **Prev** and **Next**. Each page holds 24 products. |

If nothing matches, the catalog says **No products match** and suggests trying a different search or collection.

## FAQs

**Is Quick Order different from the Catalog?**

No. It's the same product browser. Customers see it as **Quick Order**; sales reps see it as **Catalog**, with a **Counter** button for [Counter mode](https://docs.sparklayer.io/help/sales-ordering/counter-mode.md).

**Why did my quantity change after I typed it?**

The product is sold in packs or has a minimum or maximum. When you leave the box, the quantity snaps to the nearest pack within those limits. See [Quantity rules](https://docs.sparklayer.io/help/storefront/quantity-rules.md).

**Why is a price lower than the card's price in the cart?**

The quantity in the order has reached a volume break. The cart prices each line at the break its total quantity reaches, as the catalog does.

**Why can't I find a product?**

Check the collection filter is on **All collections**, and try fewer words: a product has to match every word you search for. The product might also be [hidden](#hide-products) from the customer's group.

**Can I hide every product with a tag, such as CUSTOM?**

Yes, but the setting goes on each variant, not on the tag. Click **Ask Claude** or **Ask ChatGPT** in the [form](#build-the-value) and tell the assistant "every product tagged CUSTOM": it finds and updates them. Or, in your Shopify admin, filter **Products** by the tag, select them all and fill in the field in the bulk editor.

**Can I hide a product from the catalog but still sell it from its product page?**

Not with `display` and `sell`: they apply to every SparkLayer view, including SparkLayer's ordering on the product page. If you need a product orderable only from its product page, [contact support](https://docs.sparklayer.io/help/support.md).