How to create and edit components in the Web Editor

Use components to define elements you want to modify within your project. 

On this page:

• What is a component?
• Create a component
• Naming components
• Delete a component
• Examples

What is a component?

Components are the elements of a page that a variant may change. A component is defined by a selector and can be hierarchical.

Here are some examples of components.

• Headlines
• Hero images
• Add to Cart Button
• Navigation menus
• Content sections and columns
• Interactive Dialog containers

Steps to create a component

1. Select a context from the list, then click the inspect tool below the address bar or in the Components panel.
   
2. Hover the mouse over the web page to highlight the element you want to use.
3. 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.
     
4. 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.
   

How to name 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.

Example components

Here is a list of common components you might create for your project.