How to customize your theme with the Theme Editor

In this ultimate guide, we'll show you all possibilities of EcomSolid Theme Editor so that you can create a store of your own!

Let’s get your store set up - from Home to Checkout now! 

Before you start

Designing the theme will be easier and quicker if you prepare well enough. Here is the checklist you need to follow before doing the first customization with our Theme Editor. 

Set up your product and collection information

For EcomSolid to correctly display your products and collections, you need to have it set up beforehand on the Shopify admin. Check out this Shopify article for a detailed tutorial.

Access your EcomSolid theme

Remember to access the EcomSolid app from app.ecomsolid.com, not “Themes” at the sidebar menu of the Shopify Dashboard to get the best results.

Choose a theme template

We provide you with various theme templates, 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

EcomSolid Theme supports 9 different types of pages including 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 icon at the right bottom corner in the Theme Editor interface.  

 

Global Style

Understand about Page components

A page will be made from Sections and Add-ons.

Sections 

Sections are blocks of content that determine the layout and appearance of the pages. 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

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 just display in the specific pages 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 go EcomSolid Dashboard > Theme Editor.

Step 2: After you land on the Theme 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.

 

Page type

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”.

 

Delete

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

 

Visual editor Delete section

 

Duplicate

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.

 

Delete

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

 

Visual editor Delete add-on

 

Duplicate

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

 

Visual editor Duplicate add-on

 

Position icon (coming soon)

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

This feature is still in development.

Visual editor Position add-on icon

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

 

Atoms

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.

 

Atoms

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.

Edit Code

 

To directly edit the code of a Section or Add-on, you can select the Section or Add-on, click on the three-dot button, and choose “Edit Code".

 

Edit Code

 

A code panel will appear as below, and you can start editing in HTML, CSS, or Javascript.

 

We recommend you use Edit Code with adequate coding knowledge to make sure the changes work well. Another approach that won't break the code is using the Custom Code Add-ons. Check out this article for more information.

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

Read this article to know more about how these action buttons work.

Conclusion

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.

 

If you need any help, our agents are always here to help. Please contact us via email or live chat from your Dashboard.

 

 

 

 

 


Was this helpful?