Selecting Elements
Learn how to select and interact with elements in the visual editor.
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:
- 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.