How To Create The Home Page with EComposer?

Author: Mie Tran 671 views

The Homepage is like the gate of your home. It will be the first thing that the customer visits. Therefore, an eye-catching and informative homepage will be the first factor to attract customers.

In this article, I will show you how to create a Homepage with the EComposer.

The EComposer app allows:
Insert sections from EComposer to the Shopify default Homepage.
– Create a new Homepage completely.

1. Insert section from EComposer to the existing Homepage

Note: This feature makes it possible to insert flexible sections into the theme.

Please follow my guideline:

  1. Create your section in the Extra Builder -> Section -> Create Section.

  2. You can select structure or drag elements to create your own section, or you can access the Explore Library to use the available layouts.
  3. After the Section is complete, click Save to save and publish the section.
  1. Click Shopify Dashboard -> Online Store -> Themes -> Customize.

  2. Please choose to add section, and find the name of the section that you created in the EComposer.
  3. You also can change the position of the section by dragging and dropping the mouse.

Note: When you change the theme, the section from the EComposer will not automatically switch to the new Theme. You have to go to the EComposer and re-insert the section as instructed above.

2. Create a new Homepage with the EComposer

The EComposer allows you to create a new Homepage to replace the old one in the Shopify theme. You can design it comfortably using the elements that the app support. A Homepage usually includes Call to action, a Banner with image and text overlay, Product Tabs, New Collections, Testimonials, Countdown, etc.

To build a Homepage with the EComposer, click on Dashboard -> Home Pages -> Build Homepage with EComposer.

Start Build Homepage With EComposer

As you can see the Header and Footer in the Page layout of General Settings:

  • Shopify Theme (Use your theme header & footer): make the theme header & footer visible.
  • Hide (Without theme header & footer): disable theme header & footer.

So if you are experienced in building a Homepage, you can create a page by choosing the structure, dragging, and dropping elements. But if you are a newbie, you have no idea how to build it. You can refer to our template library by Explore Library, here we have a lot of layouts and Insert them to use.

After you had done designing, make sure to press the Publish button to keep it. By the way, if you would like to replace the current Homepage and make it visible to your customers, please tick the option named “Make as Default”.

3. Set a page as my Homepage

You can set a standard page in EComposer as your Homepage, so you will have 2 ways to set it back to the Homepage. Please follow my instructions below:

  • For the first way you can Save to Library option, please check this link to get the steps for how to work on it.
  • In the second option, you can use the function Export, Import page of EComposer. When exporting the file to your computer, your file will be in the form “filename.ecom”.
Export, Import File

4. Restore your old Homepage

If you do not want to use the Homepage from the EComposer or want to check for errors from the default theme, you can Restore the theme. Go back to the EComposer Dashboard page to revert to your Default Homepage -> Click the Restore button of the Theme that you want to change.

Restore Homepage

Note: Default Homepage is the homepage that comes from Shopify Theme. It is not lost, it’s just stored there and you can restore it anytime!

On this page