# How a storefront is put together (https://docs.treema.ai/en/docs/storefronts/catalog)

Services and groups, the three panes of the editor, and how cards are arranged on the page.

A storefront is a page of cards. Each card is called a **widget**, and there are exactly two kinds:

* A **service** — one thing a guest can order. It has a price, a picture and a detail page of its
  own.
* A **group** — a section that holds other cards. A guest taps it and lands on the cards inside; it
  has no price and can't be ordered.

That is the whole vocabulary. A small storefront can be five services and no groups at all. A large
one is usually a handful of groups — Spa, Dining, Excursions — each holding its services, so the
first screen a guest sees stays short.

## The three panes [#the-three-panes]

![Screenshot: storefronts/editor](https://docs.treema.ai/screenshots/en/storefronts/editor.png)

1. Device switch, Preview, Open as guest, and Publish
2. Every card, nested the way a guest will find it
3. The page, one level at a time
4. The Inspector — the selected card, or the storefront’s settings

<Callout title="The middle pane is the real page">
  What you see in the middle is not an approximation of the guest's page — it is the page, drawn the
  same way it will be drawn for them. If it looks right here, it looks right to a guest.
</Callout>

**Left — what's on the storefront.** At the top, **Storefront settings**: the name, the link, the
currency, the images. Below it, **Widgets**: every card, nested the way it will be nested for the
guest. This is the structural view — the fastest way to find a card in a storefront with fifty of
them.

**Middle — the page.** The storefront as a guest gets it, one level at a time: the top level first,
and a group's contents once you open it. Clicking a card here selects it, exactly like clicking it in
the list on the left.

**Right — the Inspector.** Everything about the selected card, or the storefront's own settings when
nothing is selected. The button in its corner folds it out of the way when you want the page wider;
the strip it leaves behind brings it back.

Above all three: **Mobile** / **Desktop**, which redraws the middle pane at that shape. Guests mostly
arrive from a phone, so the editor opens on **Mobile** — but do check **Desktop** before you publish,
because a page that reads beautifully in one column can look sparse in four.

## Adding a card [#adding-a-card]

A new element is added with the **Add widget** button above the list, which offers a choice of type
— **Service** or **Group**. The new card is created at the level of the hierarchy you are currently
in, after which the Inspector opens on it so that a name can be entered.

Full information about a service card — text, price, photographs, badges — is set out on the
[service card](https://docs.treema.ai/en/docs/storefronts/catalog/services/) page.

## Arranging the page [#arranging-the-page]

Cards are moved in two different ways, depending on the job in hand.

**1. Changing the structure — the left pane.** The list on the left is where the hierarchy is
edited. Dragging a card by its handle changes the order it appears in; dropping a card onto a group
places it inside that group. A group with contents has an arrow for expanding and collapsing it and
a **Move in** button, which opens the group's contents in the middle pane for further work inside
it. To take a card back out of a group, drag it onto the **Drop to root level** area at the top. A
move that is not allowed is refused, with the hint "Cannot drop here".

**2. Setting the layout — the middle pane.** The middle of the page is where the visual arrangement
of the cards is changed. Dragging a card by its handle changes its position. Card size is not
changed by dragging — that is set in the **Size** field of the Inspector. Each card occupies a whole
number of grid cells according to the size set:

| Size      | Shape                                                               |
| --------- | ------------------------------------------------------------------- |
| **1 x 1** | A square — the default, and what most services should be.           |
| **2 x 1** | Twice as wide as it is tall — a banner across the page.             |
| **1 x 2** | Tall and narrow.                                                    |
| **2 x 2** | A big square. Use it sparingly, on the thing you most want ordered. |

The grid is four columns wide on a desktop and two on a phone, so a **2 x 1** card fills half a
desktop row and the whole width of a phone screen.

One difference between the two panes is worth knowing before it surprises you: while you're building,
cards stay where you put them, gaps and all. On the guest's page they close up — cards pack towards
the top with no holes between them. If you left a deliberate gap, the guest won't see it.

A group with no elements in it displays a message saying so, which keeps it from being read as a
broken state.

## Copying and removing cards [#copying-and-removing-cards]

The top of the Inspector holds a **Duplicate** button, which creates a full copy of the card with
every setting it has. This is the quickest way to create new services from existing ones — a fourth
massage treatment out of the third, say.

The **Delete** button at the bottom of the Inspector asks for confirmation before it acts. Deleting
a group deletes everything nested inside it as well — the confirmation dialogue names the card being
deleted and warns that its contents will go with it. Anything that should be kept is best moved out
of the group first.

## Checking your work [#checking-your-work]

* **Preview**, in the top bar, opens the storefront in a new tab with the editor's own elements
  stripped away.
* **Open as guest** goes to the current public version of the page. The button only becomes active
  once the storefront is published; until then it explains why it is not.

## Where to go next [#where-to-go-next]

* [The service card](https://docs.treema.ai/en/docs/storefronts/catalog/services/) — every field on a service, and what each one does to the page.
* [Asking the guest for details](https://docs.treema.ai/en/docs/storefronts/catalog/questions/) — the extra questions attached to an order.