Header & Footer

Headers and footers help you keep the theme of your site. They will be constant in design no matter what page the customer is on. By keeping them clean and organized the header and footer becomes helpful tools for your customer to navigate through your site.

The header and footer pages are placed in the swift tools folder called layout in the backend. You’re able to make headers and footers specifically designed for either desktops or mobile platforms, as some column will work better on a wider screen while others are made for smaller screens. As an example, mega menu’s needs a mouse to hover above the icons, while off-canvas navigation makes more sense on smaller screens such as phones or tablets.

The design of headers and footers are very dependent on the chosen branding and theme. To learn more about the concept of branding and themes we recommend you to check our guides about them.

Some columns are created for headers and footers only, while other columns are unviable for them. Some columns, such as impersonation bar and mega menus, are only for headers, just as features only are available for footers. For now, the following columns are available to use on only headers, only footers,  or on both pages:

• (App)
• Button
• Feature
• Impersonation bar
• Logo
• Mega Menu
• Navigation
• Off-Canvas navigation
• Search Field
• Text
• Text banner

On our other columns the buttons are accompanied by either text or images, as seen on poster, text and image, text, etc. The button column is a way to create CTA buttons without other elements while it also makes it easier to choose the preferred links.

This column allows you to create to buttons. If you only need one, you can just leave the fields for button 2 empty.

Figure 3.1 The button column in action

With the button column editor, you can:

Figure 3.2 The settings of the button column

For configuration options you have:

• Write a paragraph name
• Set label, style, link, and link type for button 1
• Set label, style, link, and link type for button 2
• Choose the button adjustments
• Set the button size
• Choose a theme for the buttons

The feature column is also available for use on content pages. That’s why we’ve already made some documentation about it, which you can read here. 

Figure 4.1 Four features on a row

The impersonation bar is mainly used in a B2B scenario. We’ve made a guide on how to use the impersonation bar in a customer impersonation situation here. Please note that this column will only show if you're logged in. 

Figure 5.1 The impersonation bar column

The impersonation bar column doesn’t let you do much:

Figure 5.2 The settings of the impersonation bar column

You’re able to give the column a title and link to the customer list. Styling is only available in the row settings.

The logo column is used to add a logo or text to a header (Figure 6.1). It’s recommended that you use a SVG file, as these are scalable and support theming.

Figure 6.1 The logo column

The logo column has the following settings (Figure 6.2)

Figure 6.2 The settings of the logo column

You can:

• Write a logo name or select a logo image
• Set the logo width
• Select a horizontal alignment
• Choose where to link to when clicking the logo

For styling options, you can choose a theme for the column.

The mega menu is a tool to help your customers navigate through your site. On hover it will enlarge menus allowing your customers to specify their destination. That way it gives your customer a lot of information without making the header look messy. 

Figure 7.1 The mega menu column with product group images

The mega menu consists of many different elements which means it has a lot of options when configuring:

Figure 7.2 The settings of the mega menu column

For the more general mega menu settings you can:

• Give the column a title
• Set the navigation root of the menu
• Choose the layout
• The alignment of the navigation
• The alignment of the mega menu

You also have some options for styling the different links. The different styling options for navigation link, mega menu link header and mega menu link are the same, but are set individually:

• Choose the link font weight
• Select a link casing
• Select a link font size

The mega menu also allows you to display product group images and product group promotion elements. For these to work, you will have to configure it in Ecommerce. You can read more about it here.

In the column editor you have the following options:

• Product group image styling
  • Select the image layout
  • Select the product group image shape
  • Choose the size of the product group image
• Product group promotion image styling
  • Show/hide the product group promotion image
  • Select the image aspect ratio
  • Choose a theme for the product group promotion image

For other styling options you can choose the theme for the mega menu column.

Navigation is a collection of links placed either vertically or horizontally. Links can be displayed as icons, text, or both (Figure 8.1). Earlier we've made a guide on how to customize the links shown in a navigation column, you can find that guide here.

Figure 8.1 The navigation column

When using the navigation column, you’ll have the following settings:

Figure 8.2 The settings of the navigation column

In the editor you can:

• Write a navigation title and choose whether to show/hide it
• Choose a navigation root to be displayed
• Set the orientation of the navigation
• Select the navigation alignment
• Select the layout of the navigation list

For styling options, you can style both the links and navigation title in the same way:

• Choose the font weight
• Set the title casing
• Set the font size

Additionally, you can style the column by selecting a theme for the dropdowns in the navigation.

An off-canvas navigation column mainly used for smaller screens to save on-canvas space. When clicking on the off-canvas icon the customer will be shown a choosen collection of navigation columns (Figure 9.1).

Figure 9.1 Off-canvas navigation column

The off-canvas navigation column has the following settings:

Figure 9.2 The settings of the off-canvas navigation column

 You can:

• Give the column a title
• Choose an icon for the column
• Choose the navigation alignment
• Select a main navigation root – These are the nodes shown first in the navigation
• Select a Secondary navigation root – These nodes are shown after the main navigation root nodes
• Select a Utility navigation root – These nodes are shown at the top of the off-canvas navigation panel

Besides the general settings, you also have some options about the product group image and product group promotion image. These will require some Ecommerce configuration, which you can read more about here.  

Product group image styling:

• Show/Hide the product group image
• Choose the shape of product group image

Product group promotion styling:

• Show/Hide the product group image
• Choose the image aspect ratio
• Product group promotion image theme

For styling you can set a theme for the ON-canvas column, a different theme for the OFF-canvas page and choose the off-canvas direction.

A search field is helpful for the customer to quickly locate the items they need. In Swift they can be wide, medium or icon based. 
This column is also available on normal pages, which is why we already have documentation on it. You can find it here.

Figure 10.1 The search field column

The text column is also available for use on content pages. That’s why we’ve already made some documentation about it, which you can read here. The use of the column on a footer can be seen in the footer examples below.

The text banner column can be used for many different things. One example could be to inform about new campaigns or offers (Figure 12.1).

Figure 12.1 The text banner column

The column has the following configurations options:

Figure 12.2 The settings of the text banner

You can:

• Write the text you want displayed on the text banner
• Choose if and where you want your text banner to link to
• Set the text banner font size
• Choose the layout for the column

For styling options, you can select a theme for the column.

Knowing the different rows and how to control them will help you in the design process. Rows can vary in size on a lot of different parameters, i.e. width, height and space between. For now, the rows available for headers and footers are:

• 1 Column – flex
• 2 Column – flex
• 3 Column – flex
• 4 Column – flex
• 5 Column - flex
• 6 Column - flex

The main difference between rows available for headers and those used on the pages are the flexible sizes of the individual columns.

Figure 13.1 Different rows available on headers

In the row settings you have different options:​

Figure 13.2 The settings of a 3 columns row - flex

You can: 

• Set the row width
• Choose the row height
• Choose the space between columns
• Set the horizontal alignment
• Choose the column width for each individual column – counting from left to right

For styling you can choose a general and alternative theme. As an example, alternative themes are used when header are placed on top of pages. In that case you might want to have a transparent background but a specific color for the text.
In styling you’re also able to control if a row should hide on scroll or not. This tool lets you collapse part of the header when the customer scrolls, meaning that an information rich header will minimize as the customer starts scrolling (Figure 13.3).   

The publication period lets you choose when the row will be active. You can read more about the publication period tool here.

Accessibility allows you to hide rows for either phones, tablets, or desktops.

Figure 13.3 Using the hide on scroll function

We've made some different headers, both desktop and mobile. These can be used as inspiration, but are also to show how you can use row settings and column settings in different ways, to create the design you want. The examples will consist of an image of the header along with a short and precise describtion on which columns and rows are used.  

This header is made of three rows of the same type: 2 column row – flex. The row settings haven’t been touched much, it's only the theme that has been changed. The main configuration is done in the column editors.

We’ll start with the first row:

1. Add a text banner to the first empty column
   1. Write a text to be displayed
   2. Choose a banner font size and the layout
2. Add a navigation column to the other empty column
   1. Add a navigation root – in this case a tools folder
   2. Set the navigation orientation and the layout

The second row consists of a logo and navigation.

1. Add a logo column to the first empty column
   1. Choose an image
   2. Set the horizontal alignment
   3. Choose where the logo will link to
2. Add a navigation column to the other empty column
   1. Choose the navigation root – in this case a utilities folder consisting of a cart
   2. Set the navigation alignment and the layout

The last row is made of a navigation column and a search field column

1. Add a navigation column to the first empty column
   1. Choose the navigation root – in this case it’s the product list page
   2. Set the navigation alignment and the layout
2. Add a search field column to the other empty column
   1. Make sure to link all the fields to the right pages
   2. Choose the search bar alignment and the layout

This is a simple header, as it consists of only one row. The row in use is a 4 column row – flex. 

We’ll start with adding and editing the columns.

1. Add a logo column to the first empty column
   1. Choose an image
   2. Set the horizontal alignment
   3. Choose where the logo will link to
2. Add a navigation to the second empty column
   1. Choose the navigation root – in this case it’s the product list page
   2. Set the navigation alignment and the layout
3. Add a search field to the third empty column
   1. Make sure to link all the fields to the right pages
   2. Choose the search bar alignment and the layout
4. Add a navigation to the fourth empty column
   1. Choose the navigation root – in this case it’s a utility folder
   2. Set the navigation alignment and the layout,

Now all the elements are added. You only need to configure the row settings (Figure 16.2).

Figure 16.2 The settings of a 4 column row - flex

1. Change the row width to medium wide
2. Change the width on column 1, column 3 and column 4 to narrow
3. Change the alternative theme to a transparent theme with bright color font

In this example the header is placed above the content on the front page. To do so:

1. Enter the properties of the front page
2. Locate the section called Page settings and choose the “place above content” option
3. Hit Save and Close

This example is for a mobile header. Mobile headers often use icons instead of titles, that way it keeps the layout simple and easy to use. 

This header consists of two rows: a 3 column row – flex and a 1 column – flex.

1. Add a 3 column row – flex to your header
2. On the first empty column add a logo
   1. Choose an image as logo
   2. Set the logo width – for mobile headers you might want to keep the logo small
   3. Set the horizontal alignment
   4. Choose where the logo will link to – often that would be the frontpage
3. Add a search field column to the second empty column
   1. Make sure to link all the fields to the right pages
   2. Choose the search bar alignment and the layout
4. Add an off-canvas navigation column to the last empty column
   1. Set the navigation alignment
   2. And link the fields to the pages you want shown on the off-canvas navigation
   3. In styling, choose the wanted off-canvas direction

To make the columns on the header align like this example, you’ll have to enter the row settings.

1. Set the width of column 3 to narrow.
2. Choose a theme for the row

The last row of the header is a simple text banner column on a 1 column row – flex. We’ve changed the theme and linked to a term page explaining the student discount, but that’s that. Additionally, you can choose to hide on scroll.

This header consists of a lot of different columns placed on three rows. 

The header is using one 3 column row – flex and two 1 column row – flex.

1. Add a 3 column row – flex to the header
2. Add a off-canvas navigation to the first empty column
   1. Set the navigation alignment
   2. And link the fields to the pages you want shown on the off-canvas navigation
   3. In styling, choose the wanted off-canvas direction
3. Add a logo column to the second empty column
   1. Choose an image for logo
   2. Set the logo width – for mobile headers you might want to keep the logo small
   3. Set the horizontal alignment
   4. Choose where the logo will link to – often that would be the frontpage
4. Add a navigation column to the third empty column
   1. Choose the navigation root – in this case a utilities folder
   2. Set the navigation alignment and the layout

The second row, a 1 column row – flex, only consists of a text banner column.

1. Add a text banner to the empty column on the second row
   1. Write a text
   2. Choose a banner font size and the layout
   3. Additionally, you can add a link to the column. In this example we’ve linked to the product list page
2. As this is a banner about a sale, we’ve changed the theme to a bright pink color.

The last row, again a 1 column row – flex, consists of a search bar column as the only column.

1.  Add a search field column to the second empty column
   1. Make sure to link all the fields to the right pages
   2. Choose the search bar alignment and the layout

In this section footers for desktop and mobile are displayed for inspiration. We’ve made short guides of each footer, so you can learn how to use both the row settings and the column settings in different ways, to create the design you want.

This footer has a dark tone (Figure 20.1). It has different font colors, and some rows even have borders. This is due to varying use of themes. This footer is made of four rows: three 1 column row – flex and one 3 column row – flex.

The first row two rows are 1 column row – flex.

1. Add a text column to the first 1 column row – flex
   1. Write a title and subtitle
   2. Choose the layout for the column
   3. Write a button label and choose where you want the button to link to
2. Add a navigation column to the second 1 column row - flex
   1. Choose a navigation root – in this case a social folder - you can read more about how to customize the content of a navigation column here. 
   2. Set the alignment and layout for the column

The next row is a 3 column row – flex. The column used are navigation and text columns.

1. Add a navigation column to the first empty column
   1. Write a title for the column
   2. Choose a navigation root
   3. Set the styling for both the links and the navigation
2. The next column is a navigation column as well, so add a navigation column to the second empty column
   1. Write a title for the column
   2. Choose a navigation root
   3. Set the styling for both the links and the navigation
3. Add a text column to the third empty column
   1. Write a title for the column
   2. Write a text for column
   3. Chose the layout
   4. In styling, set the title size

The last row is a 1 column row – flex with a text banner column

1. Add a text banner to the row
   1. Write a text that will be displayed
   2. Set the font size and the layout

This footer is relatively simple and only consists of two 4 column row – flex.

The first row is a 4 column row – flex. All the columns are feature columns so we’ll show the guide for one only.

1. Add a 4 column row – flex to the footer.
2. Add a feature column to the first empty column
   1. Choose an icon or upload a new one
   2. Select an icon size
   3. Write a title and set a layout
   4. In styling, choose a title size
3. Do the same steps for the next three feature columns

The next is also a 4 column row – flex that consists of the same four columns. On the second row it’s the navigation column. Again, we’ll show how to setup one column.

1. Add a 4 column row – flex for the first empty column
2. Add a navigation column to the first empty column
   1. Write a title
   2. Choose a navigation root and a navigation orientation
   3. Set the navigation alignment and the layout
3. Do the same steps for the next three navigation columns

In the last row, you need to do some changes in the row settings to make the columns spread out evenly on the page.

1. Enter the row settings
2. Change the width of Column 4 to narrow
3. Hit OK

This should make the columns spread out evenly on the page.

This header is made for mobiles and smaller screens. It consists of five rows, three 1 column rows and two 2 column rows.

1. Add a 2 column row – flex to the footer
2. Add one feature column in each of the two empty columns
3. For each feature column:
   1. Select an icon or upload a new one
   2. Choose the icon size
   3. Write a title and text

The next row is a 1 column row with a text column in it

1. Add a 1 column row – flex
2. Add a text column to the empty column
   1. Write a title, text, and button label
   2. Select a layout
   3. Choose a link type and where the button will link to – In this example it’ll link to a newsletter subscription page

The third row is a 2 column row – flex with two navigation columns in it.

1. Add a 2 column row – flex
2. Add a navigation column to each of the empty columns
3. For both navigation columns:
   1. Choose a navigation root
   2. Set the navigation orientation, alignment, and layout
4. In the row settings set the width of Column 2 to narrow

The last two rows are both 1 column rows.

1. Add two 1 column row – flex to the footer
2. Add a navigation to the first of the two rows
   1. Choose the navigation root – In this case it’s a social folder with redirections to the company’s social media pages
   2. Set the navigation orientation, alignment, and layout
3. Add a text banner to the last row
   1. Write a text to be displayed
   2. Choose the font size and layout

This mobile footer is kept simple and aligned left. It consists of a three 1 column rows.

1. Add a 1 column row - flex to the footer
2. Add a logo column tot the empty column
   1. Write a logo name or add an image as logo
   2. Set the logo width and the horizontal alignment
   3. Choose where the logo will link to
3. Add a 1 column row - flex
4. Add a text column to the empty column
   1. Write a title, subtitle or text
   2. Choose the alignment
5. Add a 1 column row – flex
6. Add a navigation column
   1. Write a navigation title
   2. Choose a navigation root, orientation, and alignment
   3. Choose a layout