How To Create The Home Page with EComposer?

Author: Mie Tran 1123 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,

3. Replace the new Homepage in EComposer to your existing Homepage in Shopify

If you would like to replace the new Homepage that you just created in EComposer to the existing home page and make it visible to your customers, please click on the Publish button at the top right corner and tick the option named “Make as Default”.

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