Selecting Elements
Learn how to select and interact with elements in the visual editor.
Quick answer
Click "Edit" in the Page Builder toolbar to enter edit mode, hover to highlight elements, then click one to select it - a green border appears and its properties open in the sidebar. Most visible elements (headings, text, images, buttons, containers) are selectable, but the header/footer and system-page content are edited in Store Settings instead.
Entering Edit Mode
Before you can select elements, you need to enter edit mode:
- Open a page in the Page Builder
- Click the "Edit" button in the toolbar
- The right sidebar will open with a green border indicating edit mode is active
Click this button to enter edit mode
Selecting an Element
Once in edit mode:
Hover to Highlight
Move your mouse over elements in the preview. Selectable elements will show a subtle highlight border.
Click to Select
Click on an element to select it. The element will be highlighted with a green border, and its properties will appear in the sidebar.
AI Button Appears
A floating "✨ AI" button appears near the selected element. Click it to quickly access the AI chat for that element.
What Can Be Selected
You can select most visible elements on the page:
✓ Selectable
- • Headings (h1, h2, h3...)
- • Paragraphs
- • Images
- • Buttons
- • Links
- • Containers/Divs
- • Lists and list items
✗ Not Selectable
- • Header/Footer (use Store Settings)
- • System page content
- • Dynamic data elements
- • Script-generated content
Element Information
When an element is selected, the sidebar shows:
Selected Element
H1
#hero-headline
- Tag Name: The HTML element type (H1, P, IMG, BUTTON, etc.)
- ID: The element's ID if one exists
- Current Styles: Computed CSS values for the element
Deselecting Elements
To deselect the current element:
- Click on empty space in the preview
- Click "Exit Edit" in the toolbar to leave edit mode entirely
- Select a different element
💡 Tip: Parent Selection
If you're having trouble selecting a specific element, try clicking on its parent container first, then clicking on the nested element you want.