Elements and the inspector

A page is a tree of elements: containers inside containers, with text, images and buttons inside those. You build a page by dragging elements in, then editing them in the inspector on the right.

The palette

Elements on the rail opens the palette, in six groups:

Group	vi	What is in it
Layout	Bố cục	Containers (sections, rows, global sections) and Pop-up
Basic	Cơ bản	Heading, text, button, icon, divider, list, tabs, accordion, dropdown, popover, carousel, breadcrumb, marquee
Input	Nhập liệu	Form, search box, suggested keywords, select, and the store filters (checkbox, radio, colour, tag, slider)
Navigation	Điều hướng	Menu
Media	Đa phương tiện	Image, image compare, image marquee, video, YouTube, Vimeo, SoundCloud, QR code
Advanced & Embeds	Nâng cao & Nhúng	Google map, custom code, light/dark switch

Groups follow what you are looking for, not how a thing is built — so Form sits under Input, beside the boxes shoppers fill in, not under Advanced.

Store on the rail is a separate palette of elements that read your catalogue: Product, Collections, Blog, Blog categories, Reviews, Storefront (cart, currency switcher) and Account (what only signed-in shoppers see — see Customer accounts). Some groups appear only once their app is installed: Courses, Multilingual, Loyalty points, Payments. See Dynamic lists.

The search box at the top of each palette filters by name — faster than scrolling.

Getting an element onto the page

Drag its card from the palette onto the canvas. While you drag, an indicator shows where it will land — before, after, or inside the container you are over.

Almost everything has to live inside a container. To put things side by side, drop a Layout container first and put them in it; that is the only way for them to share one gap, one background, one padding.

Selecting an element

Click it. The selection outline appears with a small toolbar, and the inspector switches to its options.

When they are nested, the first click usually lands on the innermost one. Two ways back out:

• ⌘ ↑ selects the parent. Press again to keep going out. (Ctrl on Windows/Linux.)
• Open Layer on the rail and click the branch you want. The layer tree is the most reliable way once a page gets deep.

Esc deselects.

The inspector

The right-hand panel shows what can be edited on the selected element, in groups: layout, spacing, type, background, border, shadow, and the groups specific to that element. Where something needs explaining there is a ? beside the label — hover it.

Open the AI assistant and the inspector moves to the left. The assistant takes the right-hand column, so the inspector relocates into the Layer section and stays there until you close it. A back arrow at the top returns you to the layer list; clicking a layer opens that element's options again. Closing the assistant puts everything back, including whichever panel you had open before.

A few habits worth having:

Link / unlink the sides. Padding and corner radius have a toggle between "all four the same" and "each side on its own".

"None" is not 0. For min/max width and height, None means the element decides; 0 is a number you are imposing on it.

Fit Content, Fill container, Custom. Three ways an element decides its width: shrink to its content, stretch into the free space, or a number you type.

calc expressions. Anywhere a computed length is wanted you can type CSS calc. It accepts lengths, + - * /, var() and parentheses; a typo is reported in the field rather than saved as a value that cannot run.

An element can do something

Many elements have an Action group: what happens On click. Available: go to URL, open page, open pop-up, open/close cart, go to checkout, open/close/toggle menu, open/close/toggle dropdown, change tab, save for later, log out, and the cart-line operations.

Pick an action that cannot run on the published page yet and the editor says so, e.g. "Saved, but this element doesn't render a link yet, so the destination is never reached." — rather than leaving you to find out after going live.

Dropdown and Popover

Two Basic elements with one anatomy: a trigger zone you press and a panel that opens, holding whatever you drag in. They answer different questions: a Dropdown hangs a panel below a button (account menu, language picker); a Popover floats a small card beside something and points at it with an arrow (an info icon, a price).

Four things you cannot see by looking:

• On the canvas the panel shows only while the element is selected (or something inside it). Deselect and it folds away so it does not cover the page — click again and it is back.
• Trigger and panel are fixed parts. Change what is inside them freely, but neither can be deleted or dragged out on its own. To get rid of one, delete the whole element.
• On hover only works on devices with a pointer. Touch screens always tap, so turning it on never removes the tap path.
• The trigger is not the only way in. Any element with an Action group gets Open dropdown, Close dropdown and Toggle dropdown, aimed at the one you choose — so an avatar in the header can open a panel elsewhere, and a ✕ you place inside the panel can close it. The three actions reach Popover and Select as well.

Three inspector rows, each set per breakpoint: Placement (top · bottom · left · right — Dropdown defaults to bottom, Popover to top), Alignment (start · centre · end along that edge), and for Popover an Arrow toggle.

Attaching one to an element you already have

You do not have to start from a Dropdown. Select any element on the page — a button, an icon, an avatar — press ⋮ on its toolbar and choose Attach a Dropdown or Attach a Popover; or in the inspector's Advanced tab, the Attach group has two buttons, Dropdown / Popover. The element becomes the trigger right where it stands, with an open panel beside it to drag content into. ⌘ Z undoes the whole thing.

Detach from Dropdown/Popover, in the same places, does the reverse: the element goes back where it was and the panel with everything in it is deleted — so if the panel holds anything, the editor asks first.

The select

Elements → Input → Select is a button that opens a list for the shopper to pick one value — a sort order for the shelf, or one attribute to filter by.

It is its own element, not a mode of Dropdown: a Dropdown holds content you drag in, a Select is bound to data and generates its rows. You still style the button and the panel as usual; only the words come from the data.

In the palette the Select row opens the same style cards the Search row has — Boxed, Rounded, Underline… — and the card you drop dresses the button; the Style row in the button's inspector changes or clears it later. In the Layer tree it is called Select, with Select box and Select list as its two parts.

It is configured exactly like the filters — the same Configure dialog, opened from the button on the canvas or from the inspector. The right-hand column is a Preview: the closed control reading its placeholder, the list open beneath it, tappable and saving nothing. The dialog opens with Sort or Filter, because that decides what the rest means. The Checkbox, Radio, Colour and Tag filters carry the same choice: a row of chips that reorders the shelf is the same control as a row of chips that narrows it.

Worth knowing before you use it:

• Sort is a closed vocabulary: six orders — newest, oldest, price up, price down, name A–Z, name Z–A. Rename, reorder and switch them off freely; you cannot add one, because an unknown key is ignored by the server and the shelf simply does not move. On article lists the two price orders change nothing.
• Sorting keeps the active filters and goes back to page one — page 3 of the old order means nothing. The order is in the address, so the link shares.
• Applies to picks which lists on the page respond; the others stay as they are. Filtering and sorting work on collection, product and blog pages too.
• Selection (one or several) is separate from shape: checkboxes default to many, radios to one, and either can be switched. A Select has no such row — it holds exactly one value. With several allowed, When several values are ticked decides ANY or ALL.
• Category (automatic) is a source of its own, sitting directly under Category in the Source box. It keeps no saved list at all: the rows ARE the sub-categories of whatever category the page is serving, read from the slug in the address when a shopper opens it. One Collection template therefore carries a filter that is right on every category, instead of needing a page per category. Off a Collection template it shows nothing — there it has no category to follow.
• Display type switches a filter between a square box, a round one and a tappable tag without losing anything: every value, name and setting is kept. The colour filter is not among the interchangeable ones — its swatches are data no other look carries. On a category source there is also Hierarchy: sub-categories indented under their parent, or flattened onto one level.
• Product count prints how many products each category holds beside its name — Shirts (12). The Category source only: the number comes from a grouped count the database already keeps, and a category is the only thing that has one, so tags and brands do not offer the row. A category holding nothing prints no number rather than (0), and the count is of products filed DIRECTLY under it, not of its sub-categories' as well.
• Two filter sources that are easy to miss: Purchase history (bought / not bought, for the signed-in shopper — a guest sees an empty list, and the page stays out of the shared cache) and Blog category (ticking a parent keeps posts in its children).
• A paginated list states its ceiling under the loading-mode select: at most 500 products, 200 articles, 200 collections or 100 blog categories per list.

On the published page: clicking outside or Esc closes, opening one menu closes another, the keyboard reaches it (Tab, Enter/Space, Esc), and a panel about to overflow the screen anchors to the other edge.

Shortcuts worth knowing

Action	Keys
Duplicate	⌘ D
Delete	Del
Move within the container	↑ ↓ ← →
Copy / Cut / Paste	⌘ C · ⌘ X · ⌘ V
Undo / Redo	⌘ Z · ⇧ ⌘ Z
Show/hide the inspector	⌘ \
Quick search	⌘ K

Arrows move along the container's axis: ← → in a row, ↑ ↓ in a column.

Next

Most of what you just edited is stored per breakpoint. That is Styling for phones, and it is worth reading before you do much editing.