Website components and editing in the Vareons editor
Website components in the Vareons editor are the sections a store is built from. The editor provides a categorised component library, adding by drag and drop or an add-section button, reordering, containers for columns, and editing each component from its right-sidebar fields in Simple and Advanced modes.
Last verified: 2026-09-18
A Vareons website is built from sections (components) added to pages. The component library is in the Components tab of the left sidebar and is grouped into sets such as layout, navigation, banners, calls to action, features, social proof, content, FAQ, e-commerce, media, categories, contact, marketing, information, and basics. Each card carries a short description so the merchant knows what it does.
Every component has variants. For example, the homepage hero has nine different variants, products has three, categories has five, product details has several, plus variants for cards, galleries, page content and more. This means the merchant picks the shape that fits their business from the same family without changing the component itself.
To add a component, drag its card from the left sidebar and drop it where you want — guide lines indicate the insertion point — or use the Add New Section button in the right sidebar to append it at the end of the page. Sections can be reordered by dragging up or down. A special type, the Container, groups more than one component inside the same row, and a component can be dragged into a container.
Each component also has a Visible toggle to hide it without deleting it. Hovering any component reveals edit and delete controls, and deletion asks for confirmation. There is no component copy or duplicate option, but the component can be added again from the library.
To edit a component, select it and the right sidebar opens its fields. Every component has two modes: Simple, showing only the essential fields, and Advanced, showing all fields organised into groups such as content, media, behaviour, layout, styling and advanced. From these fields the merchant edits text, images (by uploading a file or entering a URL), video, links (custom link, category, or product, with an open-in-new-tab option), and repeaters such as slider slides and list items.
The editor offers two kinds of fields: data fields such as text, long text, number, boolean toggle, colour, image, video, select and array; and special styling fields including text style, button style, and field style. Through these the merchant decides, for each text, button or field, whether it inherits the site's global settings or overrides them with custom values, with a badge showing which.
There is no direct typing on the page in the editor; every change goes through the right-sidebar fields, then is saved with Save Changes to reflect on the live site.
Setup steps in Vareons
Open the component library
From the left sidebar choose the Components tab. Cards appear grouped into sets, each with a short description of what it does.
Add a component by drag or the add button
Drag the card and drop it where you want on the page, or use Add New Section in the right sidebar to append it at the end of the page.
Reorder sections and use containers
Reorder sections by dragging up or down. To group more than one component in one row, add a Container and drag components into it.
Choose Simple or Advanced mode
After selecting the component, use Simple mode for essential fields, or Advanced mode to reach all fields including content, media, behaviour, layout and styling.
Edit text, images, links and repeaters
Edit text from its fields, upload images or enter their URLs, set links as a custom link, category or product, and add items to repeaters such as slider slides.
Set component styling and save
From the styling fields choose for each text, button or field whether to inherit global settings or override them with custom values, then click Save Changes.
Frequently asked questions
How many components are available in the editor?
The library contains dozens of components across several sets, each with variants: for example the homepage hero has nine variants, products has three, and categories has five.
Can any component on any page be edited?
Yes. Select any component on any page to open it in the right sidebar and edit its fields in Simple or Advanced mode, including text, images, links and styling.
Can a component be hidden without deleting it?
Yes. Each component has a Visible toggle. When turned off, the component disappears from the site while its settings remain, and it can be shown again later.
Can a component be duplicated?
There is no component duplication option in the editor, but the same component can be added again from the component library and its fields configured.
How do I control a text's appearance inside a component?
From the styling fields in the right sidebar choose the text style and decide whether it inherits global settings or overrides them, setting size, colour and font when customised.
Are there containers to group components?
Yes. A Container can be added and more than one component placed inside it so they appear in the same row, and components can be dragged in and out of the container.
Troubleshooting
1) If a component does not appear on the storefront, check its Visible toggle and save changes. 2) If you cannot add a component into a row, add a Container first and drag the component into it. 3) If a component looks different between screens, review its styling fields and per-breakpoint values. 4) There is no direct typing on the page; edit text from the right-sidebar fields.