UltraCart Visual Builder — Hierarchy Panel Documentation
Theme: Elements (v2.20)
Page Documented: Home (/)
Captured via: Visual Builder Edit Mode > Hierarchy Panel
Date: June 24, 2026
Overview
The Hierarchy panel is the primary structural view in the UltraCart Visual Builder. It displays every element on the current page as a nested tree, organized by Containers (top-level wrappers) that hold Sections, Sidepanels, Modals, and other layout elements. Each element supports a consistent set of actions.
How to Access the Hierarchy Panel
-
Go to StoreFronts in the UltraCart backend
-
Select your storefront from the dropdown
-
On the General tab, click Browse Your Store — this opens the storefront in a new tab with the Visual Builder toolbar
-
In the toolbar, click Edit
-
In the right-side panel, click HIERARCHY
Visual Builder Toolbar (Edit Mode)
When Edit mode is active, the top toolbar provides these menus:
| Menu | Description |
|---|---|
| Edit | Enters Visual Builder edit mode; activates the Hierarchy and element overlays |
| Page | Page-level options (new page, page settings, etc.) |
| Theme Preview | Preview the page in different states or theme variants |
| Developer Tools | Access canonical settings, heatmap tools, and developer utilities |
| Canonical | Manage canonical URL settings for the page |
| Heatmap | View/configure heatmap tracking sessions |
| Hard Refresh | Forces a full reload of the storefront preview |
Right-Side Panel Icons (Edit Mode)
| Icon | Label | Description |
|---|---|---|
| Grid icon | HIERARCHY | Opens the element tree for the current page |
| Arrow icon | ITEMS | Browse and insert storefront item elements |
| Gear icon | THEME SETTINGS | Access global theme configuration |
| Control | Description |
|---|---|
| Filter by name or type... | Text input to search/filter elements in the tree by name or element type |
| HIERARCHY / MODALS tabs | Toggle between the main page hierarchy and a list of all modals on the page |
| GO BACK > | Navigate up to a parent context when drilling into an element |
Per-Element Actions
Every element in the hierarchy exposes these inline actions:
| Action | Description |
|---|---|
| ▶ / ▼ (expand/collapse) | Toggle visibility of child elements in the tree |
| add | Add a new child element inside this element |
| settings (S) | Open the element's settings panel |
| delete (DEL) | Delete this element from the page |
| open | Available on Sidepanels and Modals — opens the panel/modal in the preview for editing |
| tools (⋯) | Expands a submenu of advanced operations |
Tools Submenu Options
| Option | Description |
|---|---|
| Download | Download this element's source/template |
| Copy | Copy the element to clipboard |
| Cut | Cut the element (removes from current position, ready to paste) |
| Replace | Replace this element with another element type |
| Zero Mar/Pad | Resets all margin and padding on the element to zero |
| Wrap | Wrap this element in a new parent container |
| Unwrap | Remove the parent wrapper, promoting children up one level |
| Duplicate (F) | Create an exact copy of this element below the current one |
| Hide / Show | Toggle element visibility on the live page |
| Add to Library | Save this element as a reusable snippet in the Library |
Container-Level Actions (simplified)
Containers (top-level wrappers) have a reduced action set:
| Action | Description |
|---|---|
| Add new element | Add a new section/element inside the container |
| Element Type | Description |
|---|---|
container | Top-level structural wrapper. Groups related sections. Has limited actions (no Copy/Cut/Duplicate). |
section | Primary content block inside a container. Has full action set. |
sidepanel | A slide-in panel overlay (e.g., mobile menu, cart preview). Has an additional open action. |
modal | A dialog overlay (e.g., language picker). Has an additional open action. |
row | A horizontal layout row inside a section. Contains columns/cells. |
| Action | Keyboard Shortcut | Description |
|---|---|---|
| Comments | M | Add/view developer comments on this element |
| CSS | C | Edit scoped CSS for this element |
| View in Hierarchy | H | Jump to this element in the Hierarchy panel |
| Option | Description |
|---|---|
| Add Child | Insert a new element inside (as a child of) the selected element |
| Add Above | Insert a new element immediately above the selected element |
| Add Below | Insert a new element immediately below the selected element |
| Duplicate | Create a copy of the element (available on non-container elements) |
| Cancel | Dismiss the menu |
Notes & Observations
-
The Mailing List section is currently hidden on the Home page (
container-mailing-list-signup). It can be shown via the Tools > Show option. -
The PayPal Messaging element in
container-paypal-banneris a legacy element and will not display to customers. It should be replaced with the PayPal PayLater Plan element. -
The Cart Snapshot Sidepanel has scoped CSS applied, indicated by a CSS badge in the hierarchy row.
-
Containers support a simpler tools menu (Download, Hide, Add to Library) compared to sections/elements which support the full suite (Copy, Cut, Replace, Wrap, Unwrap, Duplicate, etc.).
-
The HIERARCHY and MODALS tabs at the top of the panel let you quickly view all modals separately from the main page structure.
This documentation was generated by navigating the Visual Builder on demo2.ultracartstore.com DEMO2 account. Next steps: document remaining pages (About, Blog, Shop, Sale, Contact, Store Locator) and document the element Settings panels for each element type.