How to customize your theme with the Theme Editor

theme editor overview


EcomSolid offers you a wonderful WYSIWYG page builder for your store.

In this article, you will know how to use this editor to customize a theme from scratch. Let's get started outright!


Find Theme 

Before any edition, you may like to look for your right themes in templates tnventory that would match perfectly to your stores' products and goals.

Follow these directions:


Go to Dashboard

Select Templates at your left panel

Preview to have a quick glance then Insert.

Find Theme Editor

Or just simply start customizing with the default theme in EcomSolid in either 2 ways: 


  In the Dashboard side panel, select Theme Editor find editor


 Customize your Live Theme in Preview Section

hit customize to get to theme editor

Understand Theme Editor

Theme Editor brings you a totally different and brand new design experience for Shopify stores: you get what you see.

As a powerful design processor, it's meant to realize all your ideal concepts for the stores. Make the store wow, make the store like no other, it definitely happens only here with Theme Editor. Even if you're not a web architecture, you will have enough tools to make up your stores as beautiful as you want. Let's get straight to study the editor in the upcoming part.


First and basically, the theme editor is divided into 2 sections: Side Panel and Top Menu Bar.

Side Panel  

On top of Left hidden menu  



drives back and forth to the dashboard.

Global Style

drives back to choose the same design language (font, color, styles) for your store.

Take me to learn Global Style

 Page Editor

drives back to customize your landing page. 




Customize Functions

First Tab: Sections

includes design sections that can be functioned as follows:

Arrange elements by drag and drop

 Hide/ show elements

 Add more elements from Library



Click at the end of each element you will be able to:

 Edit Code Html/ Css/ Javascript

 Export to My Library



 Move to whether Header/ Main/ Footer


 Add Section



Often a page should have Header, Main and Footer, which is default determined inside all Solid'sThemes.

Second Tab: Add-ons  

includes Global Add-ons and Page Add-ons.

Global means add-ons to a same function applied to every page existing inside a sitemap while page means definite add-ons to each different page to perform distinctive functions. click ⌄ to see the drop-down menu that can be functioned as follow:


  Hide/ show elements

  Edit Code

  Export to My Library


  Move to Pages


  Add Add-on


Customize Content and Design

It's super easy to change content and design. One principle applied for all: Click at each element to customize Content and Design in your left Panel


To customize Content, you are able to:  

Click Preset to the object to See Current Preset

Click Explore to browse more types/presets of a section.

Change content message and set color, font for the text.

Change photo, set border and add alt or link.

And change every existing element inside such as icons due to icon library, add links, all alt for image and so on.



To customize Design, you are able to:  

Click on the object to see all Style and Skin, pick one in our available library.

Adjust color (without hover and hover)


Customize typography (Font size and Text font, custom your own font)


Adjust Spacing

Adjust Margin

adjust padding

Adjust Padding

adjust margin


Add Animation

      To each effect, you can preview to decide which is suitable for your store.    


          Fade (In, Up, Down, Left, Right ) 


  animation fade 

          Fade Up Right (Left)


animation fade right

          Fade Down Right (Left)


          Zoom in (Up, Down, Left, Right)


          Zoom Out (Up, Down, Left, Right) 


Top Menu 

Every content and design can be view visually by choosing on the Top Menu to preview how it appears in large screen and handheld devices:

Click at the icons to see:

  Widescreen View

  Small screen laptop view

  Tablet View

  Mobile View

Then move to the right to  Save Preview Update Live as finish editing in theme editor.

You can browse more in Shorten Top Right Menu Actions

  View Live

  Revision History

  Export Theme

  Help Center

By the end of the Top Menu, you can swing to edit Any Page. 


Bottom quick icons

The Orange Cog directs you to set Global Style. What it is? 

The Purple Ticket one leads you to EcomSolid's customer supporter. 



Theme Editor is about to shower you a new-generation tool to design your stores. Quick, easy with a visual editor where you can make any changes make your stores remarkable and convert in multiples!







Was this helpful?