An Overview of the Theme Editor

In this ultimate guide, we'll go through all the possibilities of the EcomSolid Theme Editor so you can create a store of your own. Get your store set up - from Home to Checkout - now! 


Before you start

Designing your theme will be much easier when you're well-prepared. Below is a checklist we've compiled to help you get things up and running before doing the first customization of the Editor.

Set up products and collections information

EcomSolid fetches the data from your Inventory in Shopify. Therefore, for EcomSolid to correctly display your products and collections, you need to have it set up beforehand in the Shopify admin. Check out this Shopify article for guidance on adding and updating products.

Access EcomSolid

Remember to access the EcomSolid app via or by going to Shopify Admin > Apps > EcomSolid


Choose a theme template

EcomSolid comes bundled with stunning pre-designed themes, so don't forget to pick a Theme that suits your online business. Otherwise, you have the option to create a theme from scratch.

Get to know the Page types

All EcomSolid themes support 9 different types of pages: Home Page, Product Pages, Collection Pages, Blog Pages, Article Pages, Cart Page, Search Page, 404 Page, and Password Page.

Check the Shopify guide to understand what these types of pages are. 

Set up your Global Style

To save time on customizing the color, typography, button, form, and more, you can set up a default style with our Global Style feature. 

For detailed information, read the article How to set up your Global Style.

Later on, you can also switch between Global Style presets by clicking on the orange gear icon at the right bottom corner in the Theme Editor interface.  


Global Style

Understand about Page components

A page consists of Sections and Add-ons. Sections stack vertically on top of one another, and Add-ons can be placed inside sections.


Sections are blocks of content that determine the layout and appearance of the page. There are three main types of the section including Header, Footer, and Main.


Section sidebar


The Header & footer

The Header and Footer are Global sections that appear on all pages. Any changes made to these sections will be applied to all the other pages of the Theme.


The Main

The Main includes Page sections that appear on a specific page. Changes in these sections will be applied to that page only. You can only edit the setting & content of the section from the page you’re working on.



Add-ons are extra features that you can add to sections. They are developed by the EcomSolid team or third-party apps.

You can set an add-on as Page or Global. Global Add-ons will appear on all pages and you can edit them from any page, while Page Add-ons will affect just the specific page you're editing. 

Check out our article Introduction to Add-ons to understand more about what Add-ons are and how to insert them to your page.

It's recommended to create a backup copy of your theme before editing, so you can discard your changes and start again when necessary.


Customize pages of your theme

Choose the page type you want to edit

Step 1: Go to EcomSolid Dashboard > Theme Editor. If you have multiple draft themes, you'll be asked to select a theme to edit.


Step 2: In the Editor, the default page is Home Page. You can start customizing your Home Page, or click the dropdown menu from the top bar and select the page you want to work on.


Edit your page on the Visual editor

Now, you already have a page chosen. You can start editing it with the Visual editor

Section actions

There are 4 actions you can take with each section, including “Delete”, “Duplicate”, “Move up/down”, and “Add section”.



Select the section and click on the bin icon to delete it.


Visual editor Delete section



Select the section and click on the duplicate icon to copy it.


Visual editor Duplicate section


Move up/down

Select the section and click on the arrow icons to move it up or down.


Visual editor move up and down section


Add an item above/below a section

You can add an item above or below any section by choosing the section and clicking on the plus icon to add an item above (2a) or below (2b) it.


Add-on actions

We provide you with 3 actions including “Delete”, “Duplicate”, and “Position” that you can take with each add-on.



Please select the Add-on, hit on the bin icon, and choose “Delete" to remove it.


Visual editor Delete add-on



Select the add-on and click on the duplicate icon to make a copy of it.


Visual editor Duplicate add-on



You can change the position of an add-on on a page by clicking on the position icon of the selected Add-on.



Edit your page from the sidebar

Add The Sections or Addons

Here we have 2 options for you to add the Sections or Add-ons to your pages.

Option 1. Click the button “Add Section” at the left bottom corner to open the Library which contains a range of ready-made Sections, prebuilt or third-party Add-ons, and your saved items.


add a section from the sidebar


Then, you can select one of 3 tabs including Sections, Add-ons, or My Library, and click on “Insert” to add the chosen item to your page.


Insert a section or an add-on

To get more information about the Library, you can read the article Introduction to the Library & My Library.

Option 2: Click “Library” at the top menu and choose “Insert” to add the Section or Add-on you want.


Insert a section or an add-on from Library

Remove The Sections or Add-ons

Step 1: To remove a Section or Add-on, you first can click on the three-dot button and then, choose “Delete". 

Step 2: The screen shows a pop-up with the question “You want to delete the section?”. Click “Delete” to confirm the action.


Delete a section or an add-on

Hide or Unhide The Sections or Add-ons

To hide or unhide a Section or Add-on, please click on the "Eye" button.


Hide or Unhide a section or an add-on

Edit The Sections or Add-ons

Explore Preset (for Sections only)

EcomSolid comes with 150+ presets for various section types. To change the current section to another one of the same type, you can follow these steps:

Step 1: Select the section and click on “Explore" under CURRENT PRESET.


Explore sections


Step 2: Choose the new preset to apply by clicking on “Try this preset" > “Switch".


Change the section


General Settings

Based on the section or add-on, you will have different parameters to fill in such as Text, Background Type, Color, Spacing, Image, and so on.


General Settings



We provide you the ability to edit elements inside Sections and Add-ons such as buttons, texts, images, and so on. You can choose each of these atoms and change its settings directly.



The Atom is available in all plans. However, users using paid plans can get more exclusive of this feature. Upgrade your plan to utilize advances now. For more detailed information about what they are, check the guide How to use the Advanced Mode.

Rename The Sections or Add-ons

You can rename your Sections or Add-ons anytime by clicking on the three-dot button, select “Rename”, and enter a new name. The name will be updated after you click Rename on the pop-up form to confirm.


Rename section or add-on

Duplicate The Sections or Add-ons

First, you click on the three-dot button and choose “Duplicate". Then, a new Section or Add-on will be added below.


Duplicate sections

Export The Sections or Add-ons to My Library

We support you in saving Sections or Add-ons to “My Library” as a template to reuse and save time when designing. 

Select the Section or Add-on you want to save to My Library, click on the three-dot button, choose “Export”, and rename the section.


Export sections


From now, you can insert the Section or Add-on from My Library to your pages. 

Arrange The Sections or Addon

Position a Section

You can easily change the position of Sections that belong to a type like Header, Main, or Footer by dragging and dropping.


Drag and drop


Position an Add-on

EcomSolid allows you to flexibly and easily locate the position of an Add-on on the page. 

Step 1: Select the Add-on and click on “Change position".


Position add-on


Step 2: Pick a position in which you want the Add-on to be displayed and click on the Plus icon to locate the Add-on.


Plus icon

Move a Section to The Main, Header, or Footer

You want to move a Main section to the Header or Footer, click on the three-dot button then select “Move to Header” (2a) or “Move to Footer(2b).


Move to the Header or Footer


The same practice applies to Header & Footer sections.

Move an Add-on to Global or Page

To move an Add-on to Global or Pages, then select “Move to Pages” or “Move to Global”.


Move to the Page

Make your web design responsive

Our visual editor supports four screen types: Desktop, Laptop, Tablet, and Mobile. Just click on the icons at the top bar to switch screens and make changes accordingly.


Responsive web design

Page/theme actions

When done with the edits, you can save, preview or publish your Theme. More options can also be found in the three-dot button.


Page actions



The EcomSolid Theme Editor is a powerful tool to turn your store gorgeous and high-converting the no-code way.


After you’re satisfied with the result, it's time to publish your Theme and get the design live.

You can also create & design pages of all types that are compatible with any Shopify theme with our powerful EcomSolid Page Builder.


Should you need any further assistance, our EcomSolid Support Team is here to help. We can be reached at any time via email or live chat.



Was this helpful?