This article describes how to define and modify components in the Web Editor
Table of Contents:
Learn about components and how to use them: About Components
Defining components
- Select a context from the list, then click the inspect tool below the address bar or in the Components panel.
- Hover the mouse over the web page to highlight the element you want to use.
- Click on an element to add it as a component.
- Sometimes, the element you really need might be different to the one you clicked.
- Right-click the element to help you find the right selector.
- Hover over the options and see the highlighted element changes on the screen.
- Rename the component or change its selector as needed.
Important: Changing the component’s selector should be done by someone familiar with HTML and CSS experience.
Naming components
By default, the component is given the name of the HTML element associated with the selector. You can change the name by clicking the component name in the Components panel on the left or at the top of the component Styles palette on the right.
Best practice for naming components
Make component names distinct from one another. This will allow ALLI, the AI assistant, to understand your intent better when describing variables and variants.
For example, instead of naming a component "Heading," be more specific about which heading it is, like "Product Heading."
If you have a variable that is changing the heading of the product detail page and another variant changing the heading of one of the product options, then you'll want to name these heading components distinctly, such as “Product Heading” and “Product Option Heading.”
Deleting components
Right-click the component in the list and select "Delete Component" to delete it. You can also click the rubbish icon in the style panel.