# Shop

The project's shop storefront right in the app: the catalogue, a product card, the cart, checkout and the customer's orders. The elements take products, prices, stock, delivery and payment from the shop — they are not set up in the app. How the shop works and how the storefront is connected with the "Place the order" and "Order payment" blocks is in the [Shop](https://support.jetbot24.ru/en/shop/sales) section.

In each element, the **"Shop"** is chosen first — the project's shop whose products the element shows. In the builder, the elements show the real products of this shop.

How to add elements and what they have in common is on the [Screen elements](https://support.jetbot24.ru/en/mini-apps/elements) page.

| Element | What it shows | Exit |
|---|---|---|
| ["Shop categories"](https://support.jetbot24.ru/en/mini-apps/elements/shop#shop-categories) | Catalogue categories | Always — "Category N" |
| ["Shop products"](https://support.jetbot24.ru/en/mini-apps/elements/shop#shop-products) | A list of products with search and filters | With "Open the product on tap" ticked — "Product N" |
| ["Product card"](https://support.jetbot24.ru/en/mini-apps/elements/shop#product-card) | One product: photos, price, variants, description | — |
| ["Cart"](https://support.jetbot24.ru/en/mini-apps/elements/shop#cart) | Products in the cart and the total | Always — the label of the checkout button |
| ["Checkout"](https://support.jetbot24.ru/en/mini-apps/elements/shop#checkout) | Customer fields, delivery, payment, total | Always — the button label |
| ["My orders"](https://support.jetbot24.ru/en/mini-apps/elements/shop#my-orders) | This customer's orders | With "Open the order on tap" ticked — "Order N" |

The usual customer path: categories → products of the category → product card → cart → checkout → the "Place the order" block. The choice on each screen goes into a variable, and the next screen reads it with a template.

## Shop categories

Catalogue categories from which the customer picks a section.

![The "Shop categories" element: categories as tiles and the element's settings](https://support.jetbot24.ru/_media/en/02-mini-apps/15-elements/_images/shop-categories.webp?v=1791786050)

- **"Show subcategories of"** — the category whose subcategories to show. If empty — top-level categories.
- **"View"** — "Rows" or "Tiles".
- **"Show the number of products"** — how many products are in the category.
- **"Category id into a variable"** — `categoryId` by default. The next screen uses it to show the products of this category.
- **"Text when nothing is found"**.

The "Category N" exit is always there: a category always leads further.

## Shop products

A list of products: the whole catalogue or one category, with search, a filter panel and an "Add to cart" button.

![The "Shop products" element: products as tiles with a search bar and the element's settings](https://support.jetbot24.ru/_media/en/02-mini-apps/15-elements/_images/shop-products.webp?v=1791786050)

**What to show:**

- **"Category"** — if empty, the whole catalogue. A category is shown together with its subcategories.
- **"Category from a variable"** — a template with the category id, for example `{{ categoryId }}` from the "Categories" element. The variable takes priority over the category chosen above; if it is empty, the whole catalogue is shown.
- **"View"** — "Rows", "Cards" or "Grid".
- **"Rounded photo corners"**, for cards and the grid — **"Photo height, px"** (the photo fits into this height in full, without cropping; 0 — its own height) and **"Swipe photos in the card"** — several product photos can be swiped right in the list.

**"Selection":**

- **"Sorting"** — "Newest first", "Cheapest first", "Most expensive first", "By name".
- **"Products at a time"** — up to 50; the next ones load on scroll with "Load more on scroll" ticked. "Loading label" is the text shown meanwhile.
- **"In stock only"**.

**"Search and filters":**

- **"Search bar"** — searches by name and description and forgives typos. "Search placeholder" is the grey text in an empty bar.
- **"Filter panel"** — filtering by the shop's characteristics with counters. It opens in a window with the button next to the search; "Filter window title" is its name. The panel shows characteristics with "Show in filters" turned on — [Categories, characteristics and filters](https://support.jetbot24.ru/en/shop/catalog).

**"Product card"** in the list:

- **"Show the old price"** — a crossed-out price if it is higher than the current one.
- **"Add to cart" button** and "Button label". For a product with variants, the button says "Choose": the variant is picked in the product card.
- **"Open the product on tap"** and **"Product id into a variable"** — `productId` by default. The product screen uses it to show the card.
- **"Text when nothing is found"**.

## Product card

One product in full: photos, price, variant choice by options, description and characteristics, the "Add to cart" button.

![The "Product card" element: photos, price and the "Add to cart" button and the element's settings](https://support.jetbot24.ru/_media/en/02-mini-apps/15-elements/_images/shop-product.webp?v=1791786050)

- **"Which product to show"** — usually the variable the "Products" element puts the chosen product into: `{{ productId }}`.
- **"What to show"** — "Photos" (with the "Full-width photos, no side margins" and "Rounded photo corners" ticks), "Description", "Attributes", "Show the old price".
- **"Button label"** — instead of "Add to cart".
- **"Text when there is no product"** — the product may have been taken off sale or deleted. If empty — "Product not found".

How the customer picks a variant — from a list, with buttons, by colour or by picture — is set in the product card in the shop.

In the builder, the element shows a sample of the shop's first product: which product the customer will open is not known in advance.

## Cart

The products in the customer's cart: quantities, the total and the checkout button.

![The "Cart" element: two products, the total and the "Checkout" button and the element's settings](https://support.jetbot24.ru/_media/en/02-mini-apps/15-elements/_images/shop-cart.webp?v=1791786050)

- **"Shop"** — the customer's cart is shared with the other channels of this shop: a product added in the chatbot is visible here too.
- **"Show product photos"** and "Rounded photo corners".
- **"Checkout"** — "Button label" ("Checkout" by default) and "Color". A link leads from this button to the checkout screen.
- **"Empty cart text"** — if empty, "The cart is empty".

In the builder, the cart shows a sample of the shop's first products.

The cart's exit is the checkout button, and it is always there.

## Checkout

Customer fields, the choice of delivery and payment, and the order total.

![The "Checkout" element: customer fields, the total and the "Place the order" button and the element's settings](https://support.jetbot24.ru/_media/en/02-mini-apps/15-elements/_images/shop-checkout.webp?v=1791786050)

- **"Shop"** — the order is built from this shop's cart.
- **"What to ask for"** — "Name", "Phone", "Email", "Comment". Required fields and the minimum amount are set in the shop settings. Here you can skip what this screen does not need: a known name, phone and email are filled in automatically.
- **"Show the total"**.
- **"Button label"** ("Place the order" by default) and "Color". A link leads from this button to the "Place the order" block.
- **"Text when the cart is empty"**.

Delivery and payment are the methods from the shop settings. The customer enters an address if the chosen delivery requires it.

## My orders

This customer's orders with the number, date, status and amount.

![The "My orders" element: the customer's orders and the element's settings](https://support.jetbot24.ru/_media/en/02-mini-apps/15-elements/_images/shop-orders.webp?v=1791786050)

- **"How many orders to show"** — from 1 to 20.
- **"Open the order on tap"** and **"Order id into a variable"** — `orderId` by default. The order screen uses it to show details, and the "Order payment" block to give a payment link.
- **"Text when there are no orders"** — if empty, "No orders yet".