Main builder

1 Change main content

Go to backend menu Habi > Habitheme > Theme Settings.

Click the Configure button on the design you are using.

In the section General > Main, go to field General > Main and select the main content you want to use.

Please remember to refresh the Magento cache after changing the main content (System > Tools > Cache Management).

2 Edit main content
2.1 Main content builder

Go to backend menu Habi > Habitheme > Main Builder.

Choose the main content that you want to edit.

In the edit page, go to section Main builder, you will see a builder with 2 columns. To build your page content, you only need to drag the elements form the left column to the right column.

Besides, here is the description of other sections which you might be interested in:

Section Field Description
1 General Title The title of main content
Identifier The identifier of main content. This field is also the name of project folder containing the CSS file of this main content.
Enable Used for enabling/disabling the main content
Color Set The color set of main content. View detail here
2 Styles

You can adjust the styles of your website parts with the following fields: Breadcrumbs Style, Slider Arrows Style, Block Title Style, Go Top Button Style, Product Grid Mode Style, Product List Mode Style, Product View Style.

Specifically, please pay attention to three fields: Product Grid Mode Style, Product List Mode Style and Product View Style. These are the styles of product list in grid and list modes in category page (or search result page) and the layout of product details page.

3 Customization Custom Less Variables Declare new LESS variables or assign the new value for existed variables.
Custom Less Code Add your custom LESS code here. It will be compiled to the file main.css
Custom CSS Code The custom CSS
4 Main builder Drag elements from the left column and drag them to the right column to build your page content.
2.2 Adjust main content colors and fonts

In the main content edit page, you can view the Color Set field at the first section. Please note in mind the color set name which are assigned to this main content.

Now, we will go to menu Habi > Habitheme > Color Set to find it.