You can access the builder options from Appearance > Customize > Header and Appearance > Customize > Footer options.

Header Builder

The header builder allows you to add up to three rows to your header and populate them with pre-defined components.

You can set the number of columns for each row and also get access to responsive settings such as vertical and horizontal alignment.

Here’s the list of the header builder components available in the free version of Botiga:

1. Primary Menu: The main menu of your website
2. Secondary Menu: The secondary menu of your website
3. Social: Displays social follow icons
4. Search: Displays a search icon
5. Site Title & Logo: Displays the logo, site title, and tagline 
6. Button: Displays a button
7. Contact Info: Displays contact info such as address and phone number 
8. HTML: Renders HTML content
9. WooCommerce Icons: Displays WooCommerce icons (WooCommece plugin is required)

The Pro version of Botiga extends the header builder with the following premium components:

1. Button 2: Adds an extra button component so you can have up to two buttons in the header
2. HTML 2: Adds an extra HTML component so you can have up to two custom HTML areas in the header
3. Shortcode: Renders any shortcode tag 
4. Login/Register: Displays login and register links
5. Polylang Language Switcher: Displays a language switcher for the Polylang plugin
6. WPML Language Switcher: Displays a language switcher for the WPML plugin

Check out the Pro version of Botiga here.

Mobile Header

The header builder is responsive, so you can customize the header for mobile and tablet devices as well.

To do so, click the ‘Tablet/Mobile’ tab as you can see on the screenshot below:

The mobile header doesn’t inherit the components from the desktop menu. There’s also a left sidebar that refers to the off-canvas menu.

In the Tablet/Mobile mode, two additional components are available:

1. Menu Toggle: Adds a menu button that toggles the mobile off-canvas sidebar
2. Off-Canvas Menu: Displays the main menu inside the off-canvas mobile sidebar

Note: Since Botiga Pro v1.2.1, the mobile Off-Canvas Menu component has a new option to display products categories. Click on the below link to to learn:

How to enable product categories navigation in the mobile off-canvas menu.

Footer Builder

The footer builder allows you to add up to three rows to your footer and populate them with pre-defined components.

Like the header builder, the footer builder also lets you set the number of columns for each row and configure responsive settings such as vertical and horizontal alignment.

Here’s the list of the footer builder components available in the free version of Botiga:

1. Copyright: Shows a copyright notice
2. Social: Displays social follow icons
3. Button: Displays a button
4. HTML: Renders HTML content
5. Widget Area 1: Renders widgets to widget area 1
6. Widget Area 2: Renders widgets to widget area 2
7. Widget Area 3: Renders widgets to widget area 3
8. Widget Area 4: Renders widgets to widget area 4 

The Pro version of Botiga extends the footer builder with the following premium components:

1. Button 2: Adds an extra button component so you can have up to two buttons in the footer
2. HTML 2: Adds an extra HTML component so you can have up to two custom HTML areas in the footer
3. Shortcode: Renders any shortcode tag
4. Footer Menu: Displays the footer menu

Styling

Rows

Each header/footer row has its own styling settings, such as height, background color, border, and more. You can access these options by hovering over the row you want to edit, then clicking the cog icon:

Here, you can edit the styles of the row, such as its height:

Columns

Each column has its own styling settings, such as vertical and horizontal alignment, inner elements layout and spacing.

You can access these options by hovering over the column you want to edit, then clicking the “Edit Column” icon:

Components

Each component has its own style settings as well. To access these options, you need to click the component you want to style:

The style settings will show up in the Customizer on the left of the screen. For example, this is what the style options of the Primary Menu component look like: