Designing your header

Our default header is shown in the image below, containing a logo and some basic links. Our task in this tutorial will be to understand, modify and further design the header.

To begin, we will ensure our logo's are available for use within Infigo.

Two logo options are available on the Appearance Settings screen, covering a colour and a white version (for use on dark backgrounds).

To update the selected logo's, click Select.

Logo's from every storefront on your platform will be visible in this selector.

Either double click on an existing logo, or click Manage Images to add more.

This will return you to the main theme page with logo selection field.

With our logo updated, we will now navigate to our Editable Content area, where we can upload many of the areas on our site such as the Header and Banner.

By default, the specification style for your header will use Content Templates (more on these in a moment), however you are able to select other input styles.

Rich Text Editor: Think of this as a word-processor style input, with direct content formatting options. This will not generally be suitable for something complex such as the header, but may be suitable for general page content.

Code Mirror Editor: A code editor where HTML code can be input. This option may appear to those with HTML coding experience, and can give you greater control over the design and functionality of your header.

The input will change to a HTML code editor, which can be amended or completely re-written by the administrator.

The HTML editor also allows you the use of Tokens. Tokens are pieces of information which are pre-defined elsewhere in Infigo.

One Token section named "Theme Tokens" contains pre-defined code generally related to storefront appearance.

In the code below, for example, line 11 contains "%Theme.logoColor%". This is a token drawing information directly from the logo selection field we specified earlier.

The Content Template functionality eliminates the need for any HTML knowledge, by replacing the standard Code Mirror Editor with a series of simple inputs and controls to create the header that works for you.

This functionality is constantly being improved, meaning the layout of controls may differ slightly from the images shown in this guide. The general methodology, however, will remain the same.

This provides a set of inputs tailored to the creation of a header.

This screen provides options for controlling the general content and layout of the Header. It includes options such as:

• Menu layout and sub-menu format

• Inclusion of language and currency selectors

• Inclusion of a search function

• Logo position and selection

Click OK once configuration is complete

Your updated header will be immediately available by refreshing the storefront homepage.

The default header contains three top level navigation items and numerous links as dropdown items.

Existing links can be amended, or new ones can be added.

Header Item: Does not provide to option to add dropdown items

Header Dropdown Item - 1 column : A single column of dropdown links, to which multiple links can be added.

Header Dropdown Item - 2 column : Two columns of dropdown links, to which multiple links can be added.

You can select links from several areas of your storefront setup, including:

• Product pages

• Content pages

• Category pages

You can then begin to search by name, or directly type a URL. Infigo will filter through the URL type selected and allow you to select relevant entries.