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:

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. The use of the column on a footer can be seen in the footer examples below.

Figure 3.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 4.1 The impersonation bar column

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

Figure 4.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 5.1). It’s recommended that you use a SVG file, as these are scalable and support theming.

Figure 5.1 The logo column

The logo column has the following settings (Figure 5.2)

Figure 5.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 6.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 6.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

In the Ecommerce section in backend, you can add images to act as a product group image or product group promotion image. You’ll find it in the product catalog folder in the Ecommerce section.

  1. Locate a group you want to add an image to
  2. Click edit group
  3. Scroll down to the Product group fields section

In this section you can add both product group image and product group promotion image. You can also write a description and a link label for product group promotion and choose where to link to.

In the example above, the product group images are the small round images above each subgroup. The product group promotion image is the one shown on the right. This also reflects the relation between groups and images, as the product group images are related to each subgroup and the product group promotion image are related to the group above, in this case called "Women". 
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 7.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 7.1 The navigation column

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

Figure 7.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 8.1).

Figure 8.1 Off-canvas navigation column

The off-canvas navigation column has the following settings:

Figure 8.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

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.

Figure 9.1 The search field column

The search field has the following configuration options:

Figure 9.2 The settings of the search field column

The search field column doesn’t give you many options. Mainly it’s about linking the fields with the right pages. You’ll have to:

  • Link the column to the search result service page
  • Link the column to the product list page
  • Link the column to the primary product details page

Other than that, you can:

  • Give the paragraph a name
  • Choose the search bar alignment
  • Set the layout of the column

The column doesn’t have any styling options. You can still style the whole row but will have to enter the row settings to do so.

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 11.1).

Figure 11.1 The text banner column

The column has the following configurations options:

Figure 11.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 are:

  • 1 Column – flex
  • 2 Column – flex
  • 3 Column – flex
  • 4 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 12.1 Different rows available on headers

In the row settings you have different options:​

Figure 12.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 12.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 12.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 15.2).

Figure 15.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 19.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