Header builder
Go to backend menu Habi > Habitheme > Theme Settings.
Click the Configure button on the design you are using.
In the section General > Header, go to field General > Header and select the header you want to use.
Please remember to refresh the Magento cache after changing the header (System > Tools > Cache Management).
Go to backend menu Habi > Habitheme > Header builder.
Choose the header that you want to edit.
In the edit page, go to section Header 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 header |
| Identifier | The identifier of header. This field is also the name of project folder containing the CSS file of this header. | ||
| Enable | Used for enabling/disabling the header | ||
| Color Set | The color set of header. 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 header.css | ||
| Custom CSS Code | The custom CSS | ||
| 4 | Header builder | Drag elements from the left column and drag them to the right column to build your page content. | |
In the header 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 header.
Now, we will go to menu Habi > Habitheme > Color set to find it.
