How to use the Advanced Mode


In this article, we’ll explain to you what the Advanced Mode is and how to use the feature in your Editor.

What is the Advanced Mode?

In the EcomSolid Editor, the Advanced Mode allows you to seamlessly switch to an even more powerful editing mode that provides granular control over atoms’ configuration and position to achieve the perfect design for your store.

The Advanced Mode is only supported in the Growth and Advanced plan, and the Atoms Rearrangement feature is only available on the Advanced plan. Check out our comparison chart to find the best EcomSolid plan that suits your business needs.


How to enable Advanced Mode in the Editor

You will need to toggle the Advanced Mode separately for the Theme Editor, as well as for each page you design in the Page Editor.


Step 1: Go to your EcomSolid Dashboard and enter the Theme Editor.



Step 2: In the Editor, locate the 3-dot button in the upper right corner of the screen. Click on the button to expand more options, the Advanced Mode toggle can be found at the bottom of the menu.

The “ON” or “OFF” text indicates the current state of the Editor.


Clicking on the button’s paddings will toggle Advanced Mode while clicking directly on the text will open this article in a new browser tab.


How “advanced” is the Advanced Mode?

In basic editing mode, you have access to all atoms and their essential configurations (basic content and design options) and the atom list displayed in a chosen section is limited. 

When Advanced Mode is enabled:

  • You will have a detailed hierarchical order list under each section, where all atoms are categorized and grouped into their own father atoms.
  • All atoms (including new father atoms) become fully customizable with added parameters on the left sidebar:
    • All atoms will share a new Spacing parameter.


    • Each atom will gain its own distinct customization parameters (depending on the selected atom).
  • Atoms can be rearranged by the drag & drop method (Advanced plan only).


Comparison with Basic editing

Below is a comparison between Basic Mode and Advanced Mode using the Hero Banner section and the Heading atom as examples.


Basic Mode

In basic editing mode (Advanced Mode OFF), when you click on any section and scroll down for the atom list, you will see atoms are listed individually and not grouped together.

In the Hero Banner below, the Heading and Message atoms are separated:

The Heading atom provides 4 basic editing zones: Settings, Size, Typography, and Animation.



Advanced Mode

When advanced editing mode is enabled (Advanced Mode ON):

  • The atom list seamlessly transformed into a detailed hierarchical atom tree. Each atom now has its own configurations, fully unlocked:




For example, the Heading element gains 3 new zones: Background, Border, Spacing, and the Excerpt (On/Off) switch.


If you are on the Advanced plan, you will also have the ability to reposition atoms using the drag & drop method.


Whether you’re in a hurry for a quick editing session or looking to fine-tune your page design, EcomSolid has you covered.


You may also like: 

How to optimize your product pages for conversion


More articles to help you use EcomSolid like a pro can be found here. Should you need further assistance, our EcomSolid Support Team is always here to help.

We are available via email or live chat.


Was this helpful?