Components lets you reuse elements across your layouts, keeping your designs uniform and making updates effortless. You can create components from a single element or a group of elements—perfect for speeding up your workflow.
Elements such as buttons, product cards or any other element that is often used on your store are perfect candidates to turn into components, but you can also turn whole sections into components.
Creating a Component
Select an element or a group of elements on the canvas.
Right-click the selection and click Create Component.
The outline of the component button will turn purple to indicate that it’s now a component.
The layer in the Layer Panel will also turn purple, with a new component icon added, signaling that the selected elements are now a component.
The component will appear in the Component Panel.
Components and Instances
Main Component: The original component created first and responsible for defining the style properties and elements.
Instance: A copy of the main component. To create an instance:
You can copy the main component and paste it to another location on the canvas.
Alternatively, you can drag the component from the Component Panel to the canvas.
Identifying Components and Instances
A Main Component is indicated by a quadruple diamond icon in the Layer Panel.
An Instance is indicated by a single diamond icon in the Layer Panel.
Updating a main component
To make edits to your, select the Main Component you wish to edit, click on the 'Edit main component button' in the right sidebar.
All settings will have purple highlights to indicate you are editing a Main component.
When you make changes to the Main Component, all instances are automatically updated.
Example: If you change the color of the main component (e.g., to black), all instances of that component will also update to reflect the change.
Overriding Instance Properties
If you modify a property of an instance, that instance will not update automatically when the main component is changed. This is known as an override.
Example: If you change the color of an instance to green, and then change the main component's color back to blue, the instance with the overwrite will remain green.
Clearing overrides
To reset an instance and remove any overrides:
Select the instance.
Click on Reset Overrides.
This will revert the instance back to the style properties of the main component.
Detaching an Instance
If you want to detach an instance from the main component (so that it no longer inherits any changes from the main component):
Select the instance.
Click on Detach Instance.
Once detached, the instance will not be affected by any future updates to the main component.
Finding the Main Component
If you have an instance and want to quickly locate the main component:
Select the instance.
Click on Go to Main Component.
You will be redirected to the main component.
Restoring a Deleted Main Component
If the main component is accidentally deleted, you can restore it:
Find an instance of the component.
Click on Set as Main Component.
The selected instance will now become the main component.
Nested Components
Components can be nested inside other components. For example, you can create a component for a product card that contains a button component within it. This allows you to organize and manage complex elements within a single component structure.
Only instances of components can be nested in a Main component, it is not possible to have nested Main components.