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.
Understand about Page components
A page will be made from Sections and Add-ons.
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.
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 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 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.
Customize pages of your theme
Choose the page type you want to edit
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.
Edit your page on the Visual editor
Now, you already have a page chosen. You can start editing it with the Visual editor.
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.
Select the section and click on the duplicate icon to copy it.
Select the section and click on the arrow icons to move it up or down.
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.
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.
Select the add-on and click on the duplicate icon to make a copy of it.
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.
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.
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.
Option 2: Click “Library” at the top menu and choose “Insert” to add the Section or Add-on you want.
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.
Hide or Unhide The Sections or Add-ons
To hide or unhide a Section or Add-on, please click on the "Eye" button.
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.
Step 2: Choose the new preset to apply by clicking on “Try this preset" > “Switch".
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.
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.
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".
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.
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.
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.
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.
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".
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.
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).
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”.
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.
When done with the edits, you can save, preview or publish your Theme. More options can also be found in the three-dot button.
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.