> ## Documentation Index
> Fetch the complete documentation index at: https://help.wotnot.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Catalogue

> Show products inside a conversation, allowing users to browse products, select items, and add them to their cart.

> [!NOTE]
>
> Available on **WHATSAPP** channel for all plans

![Image](https://mintcdn.com/wotnot/Adto8MZQdbm2sMaK/images/image-761.png?fit=max\&auto=format\&n=Adto8MZQdbm2sMaK\&q=85\&s=fb94923eeb8236945f6eb1936be0cf1a)

Using the **Catalogue** block, you can display a list of products that users can browse, select, and add to their cart for a seamless shopping experience. Similar to how ecommerce apps work,  but here through a conversational experience.

> [!NOTE]
>
> Before using the block, create a product catalogue in **Meta Business Manager**, add your products, and use the catalogue ID in WotNot. The catalogue must be associated with the WhatsApp Business account you are using

# Using the Catalogue Block

Add the Catalogue block to your WhatsApp flow, choose how you want to display your products, and provide the catalogue and product information.

![Image](https://mintcdn.com/wotnot/kTutEiLugWzUeP70/images/image-430.png?fit=max\&auto=format\&n=kTutEiLugWzUeP70\&q=85\&s=550b70e55055aabda524656f162058e7)

## Configurations

To use the Catalogue on WhatsApp, first you need to create a Catalogue on your Meta business manager. Once you upload the list of all your products on Meta business manager, use your Catalogue ID here to reference it.

[Learn how to create a catalogue](https://en-gb.facebook.com/business/help/1275400645914358?id=725943027795860)

### Catalogue Type

Depending on how many products you wish to show to users, choose an option:

> [card] Entire Catalogue
>
> Displays all your products.

> [card] Single Product
>
> Displays only one product.

> [card] Multi Product
>
> Displays the list of selected products.

### Catalogue ID

**Catalogue ID** is a unique identification number assigned by Meta to a product catalogue. It is used to identify and connect a specific catalogue containing products, services, or other items with Meta and third-party platforms.

### Product ID

For **Single product** and **Multi product** catalogues, enter the product IDs that you want to display.

With **Multi product**, you can display multiple selected products and organise them into sections.

WotNot currently supports:

* Up to **500 products** in a catalogue.
* Up to **30 products** displayed at a time.
* Up to **30 products** in a section.
* Up to **10 sections** in a catalogue.

### Message Text

Write the header, body and footer text which will be displayed to prompt the user to open and view your catalogue.

* **Header** — introductory text shown with the catalogue.
* **Body** — text explaining what the user can browse or purchase.
* **Footer** — additional information or instructions.

> [card] EXAMPLE:
>
> **Header**: Our products
>
> **Body**: Browse our products and add the items you want to your cart.
>
> **Footer**: Select a product to view its details.

### Saving the checkout cart in a variable

**Use this variable when you need the actual products and quantities selected by the customer**, for example, to pass the cart details to another block, API, or order-processing system.

Once the user adds products to the cart and checks out, the entire cart will be stored in this variable in a JSON format.

Here is the sample JSON payload which will be stored in the provided variable,

```javascript theme={null}
{
  "product_items": [
    {"product_retailer_id": "331100", "quantity": 1, "item_price": 195, "currency": "INR"},
    {"product_retailer_id": "112233", "quantity": 1, "item_price": 60, "currency": "INR"}
  ],
  "catalog_id": "712073530499979",
  "text": ""
}
```

You can then parse this JSON response and create a order in your order management system or generate a payment link to collect payment and confirm the order.

E.g. above JSON response is stored in a "purchased\_products" variable, then following Javascript can be used to parse the JSON response,

```javascript theme={null}
var purchased_products = #purchased_products#;

let totalAmount = 0;

purchased_products.product_items.forEach(item => {
  totalAmount += item.item_price * item.quantity;
});

wn.setConversationVariable("amount", totalAmount); // "amount" is a conversation type variable
```

### Saving the checkout cart amount in a variable

This variable stores the **total amount of the checkout cart** submitted by the customer.

For example, if the customer selects:

* Product A — ₹499 × 2
* Product B — ₹299 × 1

the checkout cart amount variable would contain: ₹ 1297

## Other configurations

### Save any message query in a variable

When the user is browsing the products in the catalog, in case the user closes the catalog popup and sends a random messages, that text can be saved in a variable.

This is useful when you want to remember what the customer asked while browsing the catalogue and use that information in a later step.

![Image (16) 1](https://mintcdn.com/wotnot/kTutEiLugWzUeP70/images/image-\(16\)-1.png?fit=max\&auto=format\&n=kTutEiLugWzUeP70\&q=85\&s=46bd6e9c2a57e4885a40cdc3af19bc0b)

**Example:** Suppose your Catalogue is showing a question to deliver the order to your address:

> "What is your address?"

You can select a variable such as: cms\_enquiry\_id

The customer's message can then be stored in: address = "What is your address?"

![Image (27)](https://mintcdn.com/wotnot/ez0GlzggSLvSJ5j6/images/image-\(27\).png?fit=max\&auto=format\&n=ez0GlzggSLvSJ5j6\&q=85\&s=f3235eac750e080638084bb68b1b5dde)

## Output paths

The Catalogue block has two output paths:

* **Success**: when the user submits their cart to proceed in the flow.
* **Failure**: when the user does not submit their cart, or we fail to retrieve the products.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.