Footer
The footer is the bottom area of your online shop.
Footer
Colors
In addition to the basic colors, you can enable (1) a border top (2) color. With the paddings (3, 4) you give the inner footer an additional spacing to the top and bottom edge.
Examples:
Content
Content assignment
Certain content can be assigned to the footer. For example, an additional logo can be output at different positions in the footer, a newsletter sign-up or a service hotline.
In the configuration Footer logo, you define where and whether the additional logo is to be displayed in the footer. The logo can be hidden or placed in the newsletter column, in the hotline column, in the social media icons column or in an own column.
Some contents can also be displayed outside the footer columns, like the social media icons, the newsletter signup or the payment and shipping icons.
Example:
Columns
Column headlines
The footer consists of different columns, which have a content and a heading. In addition to the alignment of the headings, you can select the size and font weight here. You can also choose the font family.
The option Collapse icon (mobile) (1) changes the icon of the collapsible mobile footer columns. Appearance (2) can be assigned a subline to the column heading.
Example:
Columns content
The content of a column can be very different. It can receive the navigations from the entry point of the footer navigations, the hotline, a newsletter subscription, social media icons, payment informations and much more.
Footer navigation assignment: You define the entry point for the footer navigation in the general settings of the sales channel.
Example:
Columns widths
A layout is built in a so-called grid. You can think of it like a table with 12 columns and any rows. We use such a grid to control the widths of the columns in the footer.
You can assign a column width to each footer column. If the total sum of the widths goes over 100% (over 12 columns) the elements automatically wrap into a new row.
The column widths are defined for tablet and desktop devices. On all smaller devices, the columns wrap below each other.
The navigation columns width refers to the automatically generated footer navigation columns. Each column gets the set width.
Example:
In this example, the newsletter has a width 6 of 12 (50%). The information and service columns are "navigation columns" from the selected entry point of the footer navigations in your sales channel. Each created column of the footer navigation got 3 of 12 (25%). Thus, the first row of 12 out of 12 columns is filled to 100%.
The second row consists of the Service hotline with 3 out of 12 (25%), the Social Media Icons column with 4 out of 12 (33.33%) and the optional custom column with also 4 out of 12 (33.33%) width. In total, this gives us 11 out of 12 columns, or 91.67%. So we could still distribute 1 of 12 (8.33%) column widths to a column without starting a new row.
Columns orders
You can set the sorting order by specifying an item number. The higher the number, the further back the column is displayed.
Allowed here are position numbers from 1 - 12.
Example:
Column collapse state default open (mobile)
On mobile devices, each column of the footer is shown collapsed. The visitor can then expand them by clicking on the line. If required, individual columns can also be displayed initially expanded.
Example:
Columns styling
Logo Column
The logo column can have its own Background. The Vertical alignment allows you to align the logo in its container.
Example:
Hotline column
In addition to a different background color, the text colors can also be changed from the general footer color setting.
Social media icons column
In addition to a different background color, the text colors can also be changed from the general footer color setting.
Set the links to the social media channels in the theme settings. You can find more about this in the social media icons entry.
The settings only apply if the social media icons are also displayed as a column. When displayed in the footer bottom position, the color settings of the footer bottom apply.
Newsletter column
In addition to the general column color settings, you should also set the colors of the newsletter form here. The form is the input field where the user enters their email address.
Custom column 1 - 3
Here, in addition to a different background color, the text colors can also be changed from the general footer color setting.
Payment methods column
In the payment type column, the payment methods icons can be loaded from your store's payment methods configuration.
Shipping methods column
In the shipping column, the shipping methods icons can be loaded from your shipping methods configuration of the store.
Footer bottom
The footer bottom is the lower part of the footer. This is where the tax notes, copyright and, depending on the settings, the social media icons and shipping/payment methods are displayed.
Colors
You can use the color settings to visually separate or connect this area from the rest of the footer.
Example:
Basic configuration
The service navigation contains important and often legally relevant information that should not be missing on any store page. The service navigation of the store is therefore output at various points of the store.
In the header of the page, the service navigation can be displayed in the top bar area or in the offcanvas top bar area.
In addition, the service navigation can optionally be found in the lower footer, where it often seems superfluous next to the footer navigations. Via the setting Display service navigation (1) the service navigation in the footer bottom can be deactivated.
Checkout footer: The checkout area includes a distraction-free layout with minimal header and minimal footer to optimize conversion. To ensure that legally content is not missing, the service navigation is always displayed in the minimal footer layout.
Last updated
