Page status: Up to date | Application version: From 1.3.4.4

Settings & layout - Header

Header is about website customization oriented in two directions:

  • Website behavior changed at shop administrator initiative
  • Website appearance

The lines referred to in this area are:
Line 1: represents the first line on top of the website where the logo, currency selector and the phone number are.
Line 2: represent the second line, the line where the slogan and search are.
Line 3: represents the line under the search area is. This third line is only used if the categories icons menu is used.
All lines go across the window width.

To setup or change a setting, click the Edit button in line with that setting. A pop-up window will open to allow you to input your data.
The window has as title Edit setting to let you know you are in edit zone. Also this window always points out the Area and the Name of the setting you are going to change. The main point of this window is to allow you to write your details in regards with current setting. This is the only editable field. Add or make here the changes you need.
The editable fields in this area are: text fields, color picker fields, image uploader and radio buttons.
Click the Update button to make the change or click the Cancel button to abandon changes. The Update button and Cancel button will close the setting window and update the list accordingly.
The Close button (top right corner) has same result as Cancel has.


Line 1 area (where is logo, phone, menu) line color

Not in use


Line 1 area background color

As explained in name of the setting, this is the top part of the website (exclusive the search bar).
It is recommended to use same background color as your company logo background color.

The editable field for current setting is a color picker field. (learn how to use a color picker)
To setup or change this setting, click the Edit button. Add or alter the input in pop-up window. Click the Update button to make the change and close the pop-up window or click the Cancel button to abandon changes.


Line 1 area - Logo Image

Upload here the company (website) logo.
This logo image appears at the top of your website in frontend and backend.

The editable field for current setting is an image uploader. (learn how to use the image uploader)
To setup or change this setting, click the Edit button. Add or alter the input in pop-up window. Click the Update button to make the change and close the pop-up window or click the Cancel button to abandon changes.


Line 1 - Show currency selector

The currency selector is used by customers from other countries that your to convert the prices in their currency.
The currency selector appear on top of the website (FRONTEND).
Default currency displayed is shop currency.

The editable field is form from radio buttons.
If checked Yes button means that you want to display the currency selector.
If checked NO button means that the currency selector is not displayed. If you do not target to sell your products in other countries, you do not need the currency selector displayed on top of your website.

The edit window will close automatically after you choose your answer. In case you did a mistake, edit again and choose the correct answer. The setting will be updated automatically.


Line 1 area - Phone no

If you want to write the phone no. on header, just write it here.
If you do not want to show the phone no. on header, leave this field empty. The phone no. on top of the website is an easy access and has the function of increasing company trust. Write here the best contact for your website users.

The editable field for current setting is a text field.
To setup or change this setting, click the Edit button. Add or alter the input in pop-up window. Click the Update button to make the change and close the pop-up window or click the Cancel button to abandon changes.


Line 1 area - Phone no color

Choose the color of phone number to match your brand colors.

The editable field for current setting is a color picker field. (learn how to use a color picker)
To setup or change this setting, click the Edit button. Add or alter the input in pop-up window. Click the Update button to make the change and close the pop-up window or click the Cancel button to abandon changes.


Line 1 area - Phone icon color

This setting will set the color of the phone icon to match your brand colors.

The editable field for current setting is a color picker field. (learn how to use a color picker)
To setup or change this setting, click the Edit button. Add or alter the input in pop-up window. Click the Update button to make the change and close the pop-up window or click the Cancel button to abandon changes.


Line 2 area (where is search) height

Dealing with all sorts of layouts, the search area height may be changed. To have this flexibility, the Line 2 area (where is search) height setting gives you the place where you input the height (in pixels) for this line. The default is 45px. Write in text area just the number of pixels.

The editable field for current setting is a text field.
To setup or change this setting, click the Edit button. Add or alter the input in pop-up window. Click the Update button to make the change and close the pop-up window or click the Cancel button to abandon changes.


Line 2 area background color

Choose the color you want for the line containing the search.

The editable field for current setting is a color picker field. (learn how to use a color picker)
To setup or change this setting, click the Edit button. Add or alter the input in pop-up window. Click the Update button to make the change and close the pop-up window or click the Cancel button to abandon changes.


Line 2 area border top

Set the top border for the line which include the search.
HTML knowledge required. Write in this area the styling for the top border of this line only. This styling will be added to the OLALA Shopping Cart Stylesheet.

The editable field for current setting is a text field.
To setup or change this setting, click the Edit button. Add or alter the input in pop-up window. Click the Update button to make the change and close the pop-up window or click the Cancel button to abandon changes.


Line 2 area border bottom

Set the bottom border for the line which include the search.
HTML knowledge required. Write in this area the styling for the bottom border of this line only. This styling will be added to the OLALA Shopping Cart Stylesheet.

The editable field for current setting is a text field.
To setup or change this setting, click the Edit button. Add or alter the input in pop-up window. Click the Update button to make the change and close the pop-up window or click the Cancel button to abandon changes.


Line 2 area left text

In this area you can add your company slogan.
The slogan will appear under the logo, at the left of search line.
If you leave the field empty, the slogan will not be displayed.

The editable field for current setting is a text field.
To setup or change this setting, click the Edit button. Add or alter the input in pop-up window. Click the Update button to make the change and close the pop-up window or click the Cancel button to abandon changes.


Line 2 area left text style

Set the style for the slogan which is displayed under logo, on same line with the search.
HTML knowledge required. Write in this area the styling for the slogan only. This styling will be added to the OLALA Shopping Cart Stylesheet.

The editable field for current setting is a text field.
To setup or change this setting, click the Edit button. Add or alter the input in pop-up window. Click the Update button to make the change and close the pop-up window or click the Cancel button to abandon changes.


Line 2 area - cart icon background color

Choose the color of the cart icon to match your brand colors.

The editable field for current setting is a color picker field. (learn how to use a color picker)
To setup or change this setting, click the Edit button. Add or alter the input in pop-up window. Click the Update button to make the change and close the pop-up window or click the Cancel button to abandon changes.


Line 2 area - cart icon text color

Choose the color of the cart text to make it easy to read.

The editable field for current setting is a color picker field. (learn how to use a color picker)
To setup or change this setting, click the Edit button. Add or alter the input in pop-up window. Click the Update button to make the change and close the pop-up window or click the Cancel button to abandon changes.


Line 2 area - cart icon text color

Choose the color of the cart text to make it easy to read.

The editable field for current setting is a color picker field. (learn how to use a color picker)
To setup or change this setting, click the Edit button. Add or alter the input in pop-up window. Click the Update button to make the change and close the pop-up window or click the Cancel button to abandon changes.


Header cart number show: 1 - total quantity, 2 - total number items

Do not use it. Very soon available.


Line 3 area show (where are categories small icons - quick navigation)

Set if you use or not the categories icons menu for quick navigation.

The editable field is form from radio buttons.
If checked Yes button means that you want to the categories icons menu.
If checked NO button means that the categories icons menu is not displayed.
See also Use top icons categories (shortcuts - easy navigation) under Global (system wide) area.

The edit window will close automatically after you choose your answer. In case you did a mistake, edit again and choose the correct answer. The setting will be updated automatically.


Line 3 area - show categories small icons on multiple levels

Set if you use or not the categories icons menu (quick navigation) for multiple levels. Each level will have its menu built from subcategories icons.

The editable field is form from radio buttons.
If checked Yes button means that you want to the categories icons menu on multiple levels.
If checked NO button means that the categories icons menu is displayed in a single level (if applicable).
See also Use top icons categories (shortcuts - easy navigation) under Global (system wide) area.

The edit window will close automatically after you choose your answer. In case you did a mistake, edit again and choose the correct answer. The setting will be updated automatically.


Line 3 area style

Style the appearance of the categories icons menu.
HTML knowledge required. Write in this area the styling for the categories icon menu only (menu as whole). This styling will be added to the OLALA Shopping Stylesheet.

The editable field for current setting is a text field.
To setup or change this setting, click the Edit button. Add or alter the input in pop-up window. Click the Update button to make the change and close the pop-up window or click the Cancel button to abandon changes.


Line 3 area - categories small icons style

Style the appearance of the icons in the categories menu.
HTML knowledge required. Write in this area the styling for icons only. This styling will be added to the OLALA Shopping Cart Stylesheet.

The editable field for current setting is a text field.
To setup or change this setting, click the Edit button. Add or alter the input in pop-up window. Click the Update button to make the change and close the pop-up window or click the Cancel button to abandon changes.

On this page

Snapshots / images

Header area

Settings & layout: Header area

Under Shop configuration -> Settings & layout choose Header area from dropdown menu

Sample Header

Sample of website Header (FRONTEND)

Header is considered area from the very top to the search area (inclusive).

Sample of categories icons

Sample of categories icons menu (FRONTEND)

The header includes the categories icons menu (if applicable).

Sample of categories icons on multiple levels

Sample of categories icons menu on multiple levels (FRONTEND)

The categories icons menu on multiple levels will show different icons menu based on level you are.

Text field

Settings & layout: edit - Text field

Sample of text field

Radio buttons

Radio buttons

Sample of radio buttons controls

Image uploader

Settings & layout: edit - Image uploader

Sample of image uploader

Color picker

Settings & layout: edit - Color picker

Sample of color picker

Headings