Skip to main content

The Footer

The footer is the block at the very bottom of every page on your website. Visitors who scroll all the way down are usually looking for something specific: a way to contact you, a link to a page they could not find in the menu, or an overview of what you sell. A well-filled footer helps them get there in one click.

You build it under Design → Footer. The footer works just like the page editor: drag elements from the Elements list on the left into the footer, click an element to change its settings, and click Save design when you are done. The footer is shared by all pages, so you only build it once.

Most footers are laid out in columns, for example your company name and a short text on the left, a few useful links in the middle, and your contact details on the right.

  1. Drag a Columns element into the footer and choose how many columns you want.
  2. Drag the elements you need into each column, such as a Heading, a Text, Navigation items or Contact details.
  3. Click an element to open its settings and adjust the text or colours.
Give every column a heading

A short heading above each column ("Shop", "Customer service", "Contact") makes the footer much easier to scan.

You can use any element in the footer, but these are the ones most footers are built from.

A list of links you choose yourself, for example to your "About us", "Shipping" and "Contact" pages. For each link you pick a Page or URL and type the Label visitors see. Start typing in the page field and it suggests matching pages and blog posts, so you rarely need to copy a web address. Click Add link for the next one.

Contact details and Opening times​

These two elements show your address, phone number, email and opening hours. In their settings, choose a Location and they are filled with that location's details automatically. Change your phone number or opening hours once under Locations, and the footer updates by itself. If you leave the location empty, you can type the details by hand instead, but then you also have to update them by hand.

Social media​

Shows icons that link to your social media profiles. The links come from your Social media settings. You can also fill them in from the element's settings panel, which saves them to that same central list. A network without a link is not shown, so you never end up with an empty icon.

Language switcher​

If your website is available in more than one language, this element lets visitors switch languages. In its settings you choose the Display (the languages next to each other, or a dropdown) and whether to Show flags and Show names. On a website with only one language, it shows nothing, so it is safe to add in advance.

Background​

A Background element gives a part of your footer its own colour band. Drag it into the footer and put your columns inside it. In the footer, a background always runs the full width of the screen, so the colour reaches the edges of the page. When you change its colour, the headings and text inside it switch to black or white automatically so they stay easy to read. You can still change those colours afterwards.

Category menu​

For online stores: a list of all main categories of your store that keeps itself up to date. See the next section.

Showing your categories with the category menu​

If you run an online store, the Category menu element shows all main categories of your store as a list of links. Visitors can jump straight from the bottom of any page to the part of your range they are interested in.

You do not have to type the categories yourself. The list follows your categories automatically:

  • New categories appear in the footer by themselves.
  • Renamed categories show their new name right away.
  • Archived categories and sub-categories are left out, so only your main categories are shown.

The categories are listed in alphabetical order.

Adding the category menu​

  1. Go to Design → Footer.
  2. Open the Online store group in the Elements list and drag Category menu into the footer, usually into its own column.
  3. Put a Heading above it, for example "Shop" or "Categories".
  4. Click Save design.

The editor already shows your real categories, so you can see straight away how the footer will look.

Category menu settings​

Click the element to open its settings:

  • Text colour: the colour of the links. Choose a colour that stands out clearly against the background of your footer.
  • Maximum number of categories: use the slider to show only the first few categories. Leave it at the start (all categories) to show every main category.
Many categories?

If your store has a long list of main categories, limit the menu to around 6 to 8. A short list reads better than a long one, and visitors can always find the rest through your main menu.

How you set the colours of your footer depends on the kind of theme your website uses.

Classic themes. In the left-hand panel of Design → Footer, open Footer to set:

  • Default text colour and Default title colour: the colours for text and headings in the footer. An element with its own text colour setting uses that colour instead.
  • Copyright background colour and Copyright text colour: the colours of the copyright bar at the very bottom (see below).

Custom themes. Many newer themes design the footer themselves, and the Footer colour panel is then not shown. To give the footer a colour of your own, place a Background element around your columns and choose its colour. Set the colour of individual headings, texts and links in each element's own settings.

Check the contrast

Whichever theme you use, make sure the text stands out clearly against the footer background. Light grey text on a white footer, or dark text on a black one, is hard to read, especially on a phone in bright daylight.

Below your footer elements, most themes show a narrow copyright bar. It is generated automatically, and you cannot drag elements into it. Depending on your theme, it contains:

  • the copyright symbol, the current year and your site name;
  • links to the legal pages you have set up, such as your terms and conditions and privacy policy;
  • sometimes your site's short description and a link to the sitemap;
  • a small "Powered by SitePack" line.

You change the site name and description under Settings, and you manage your legal pages under Content. Add a new legal page there, for example a return policy, and its link appears in the copyright bar by itself. The year updates every January without you doing anything.

If your website is available in more than one language, you translate the footer once and it applies to every page. On the Translations page, choose Footer as the content type. You translate the headings, texts and the labels of your navigation links. Anything you leave blank is shown in your main language.

A few things are translated for you:

  • Links to your own pages automatically point to the translated version of that page, so a visitor reading your site in another language stays in that language.
  • The category menu shows the translated category names and links to the categories in the visitor's language. You translate the category names themselves under Categories on the same Translations page.
  • The copyright bar is shown in the visitor's language.

Frequently asked questions​

Do changes to the footer apply to every page?​

Yes. There is only one footer, and it is shown at the bottom of every page. Click Save design and the new footer appears across your whole website.

I do not see the Category menu element. Why not?​

The category menu is only available when your website has an online store. Once your store is active, the element appears in the Online store group.

No. The category menu always shows your current main categories. Add, rename or archive a category and the footer follows automatically.

Can I choose which categories are shown?​

The category menu always shows your main categories in alphabetical order. You can limit how many are shown. If you want a hand-picked set of links, use the Navigation items element instead and add the links you want yourself.

Check whether the Opening times element in your footer is linked to a location. Click the element and look at the Location setting. If no location is selected, the element uses its own hand-typed hours, and you need to update them there (or link it to your location so it stays up to date).

Your website uses a custom theme that designs the footer itself. Use a Background element to give your footer a colour, and each element's own settings for the text colours.

Not from the footer editor. The copyright bar is part of your theme, and it holds the links to your legal pages, which visitors need to be able to find. You can change what it says through your site name, description and legal pages.