Editor Configs

Author: An Do 157 views

This feature lets you turn on or off all the options that affect the EComposer’s Editor directly, so you can work faster, speed up loading time, and drag elements more accurately while designing your page.

It’s included:

Safe mode: Lets you edit the editor separately without loading your theme inside.
Show snap lines: Shows alignment lines when dragging elements.
Show distance lines: Shows distance measurement between elements.
Always show columns: Display all columns in the grid layout, even if they have no content.
Auto snap: Auto snap when dragging elements in the grid layout.
Enable lock mode: Lock drag/drop, and you can view here for more details.

To open the Editor Configs menu, follow these simple steps:

Step 1: Open any page using EComposer Editor.
Step 2: Look at the top right corner of the editor toolbar.
Step 3: Click on Editor Configs to show all available options.

1. Safe mode

The Safe Mode feature lets you edit your EComposer page separately without loading a Shopify theme or scripts from third-party apps inside the editor.

Here are common reasons why, when you open the EComposer Editor, it gets stuck loading forever, freezes, or shows an error:

Password-protected stores: The store requires a password to view, which blocks the editor from getting page data.

Third-party app issues: Lock apps, B2B apps, popup apps, redirect apps, or loading apps block access to the storefront. One of those apps could be Locksmith, EasyLockdown, BSS B2B, Weglot, Geolocation,…

Broken themes: The theme code has an error that breaks the entire storefront.

Safe Mode temporarily disconnects your live theme and conflicting apps. This ensures the editor always loads successfully, allowing you to keep editing your page content even when your store has issues with the theme or other third-party apps:

While Safe Mode is on:

Header & Footer become simple placeholders: Since the theme does not load, the real Header and Footer appear as gray skeleton boxes.
Theme CSS & JS are not loaded: The design in the editor uses EComposer’s style only, not your live theme’s style.
Display differences: Because custom fonts or scripts from your header are disabled along with header, the page inside the editor may look slightly different from your live store.

If your store has one of the issues above and you don’t want to turn on Safe Mode, you must turn off your store password or temporarily disable the third-party apps that cause the issue in Shopify before you can open and use the editor.

If Safe Mode is off, the editor loads your complete theme, header, footer, and app scripts so you get a 100% exact preview of your live store.

Note: Enable Safe Mode won’t effect your current live store.

2. Show snap lines

You can enable the “Show snap lines” option here:

When you drag and drop elements inside a Freeform/Grid section, red alignment lines appear to help you align elements straight with other elements. It makes sure your text, images, and buttons line up neatly.

A Freeform/Grid section lets you freely drag and drop elements anywhere without strict row or column rules. You can create one by adding a new section and choosing the Freeform layout type.

This line will have a red color:

3. Show distance lines

You can enable this option in the Editor configs box:

It shows the exact distance in pixels between the element you are dragging and nearby elements inside a Freeform/Grid layout. Turn this option on when you want equal spacing between all your elements.

4. Always show columns

Display all columns in the grid layout, even if they have no content inside Freeform/Grid. Turn this option on when you start building your page layout. It helps you see the empty structure clearly so you can place items easily.

5. Auto snap

Automatically snaps or “attaches” an element to a fixed position when you drag it near other elements in a Freeform/Grid layout. Turn this option on if you want to drag and drop items quickly without adjusting small pixel alignments manually.

6. Enable lock mode

This option locks all drag-and-drop actions and layout editing features on the page. Turn this on after your page design is complete. It allows you to edit text or view the page safely without accidentally moving or messing up your layout.