Designing Header & Footer in the Theme Editor (OS 3.0) – SHOPLINE Help Center

The header and footer are shared page elements in your SHOPLINE online store, meaning any changes you make to them in the Theme Editor apply across every page of your storefront. Unlike individual page sections, the header and footer are configured globally and are always visible to your customers.

This guide explains how to navigate the header and footer settings in the Theme Editor, and what each section and block allows you to customize.

Before You Start: Confirm You’re Using the Correct Tool

The settings described in this article apply to the Theme Editor (OS 3.0) only, and are separate from the Shopper App's display settings.

Navigating Header & Footer in the Theme Editor

To open Header or Footer settings in the Theme Editor:

From your SHOPLINE admin, go to Online Store > Design.
Locate your current theme and click the Design to enter the Theme Editor.
In the left sidebar, click Header (first item) or Footer (last item) to expand their settings.

Header

The Header is the first item in the Theme Editor's left panel. It contains two default sections: Announcement bar and Header.

Announcement Bar

The Announcement Bar displays a banner above the main header. You can configure the following settings:

Display position: Choose where the announcement bar appears on the page.
Multiple announcement bar display style: Set how multiple announcements rotate or display.
Switching interval: Control how long each announcement displays before switching.
Display social media icons on desktop: Toggle social media icons on or off for desktop view.
Layout: Adjust the overall layout of the announcement bar.
Custom CSS: Apply custom styling to the announcement bar.

The Announcement bar section contains one default block: Announcement, where you enter the text and link for each announcement.

Header

The Header section controls the main navigation area of your storefront. You can configure the following settings:

Color: Set the header's color scheme.
Full screen width: Toggle to extend the header across the full browser width.
Display divider below the header: Toggle a dividing line between the header and page content.
Display Language selector: Toggle a language switcher visible to customers.
Display country/region selector: Toggle a country or region switcher.
Logo: Upload and configure your store logo.
Transparent header: Set the header to appear transparent over page content.
Menu bar: Configure the main navigation menu. This section includes the following sticky menu settings:
- Sticky header: Set the header's sticky behavior. Options: None, Always, On scroll up.
- Mobile sticky menu: Enable a sticky menu for mobile visitors.
- Show sticky menu on homepage only: Restrict the sticky menu to the homepage.
- Sticky menu follows sticky header: Control whether the mobile sticky menu follows the header's sticky behavior or scrolls normally with the page.

The Sticky menu follows sticky header toggle interacts with the Sticky header setting as follows:

Sticky header	Sticky menu follows sticky header: On (Default)	Sticky menu follows sticky header: Off
None	Menu scrolls with the page	Menu scrolls with the page
Always	Menu stays fixed at the top at all times	Menu scrolls with the page
On scroll up	Menu appears fixed when scrolling up; hides when scrolling down	Menu scrolls with the page

Notes:

When the Sticky header is set to None, the Sticky menu follows sticky header toggle has no effect, both the header and menu scroll with the page regardless of the toggle setting.
This feature is available on all OS 3.0 themes developed by SHOPLINE, except the Bottle theme.

Highlights: Add highlighted links or promotional content to the header.
Layout: Adjust the header's overall layout.
Custom CSS: Apply custom styling to the header.

You can also add content blocks to the Header section by clicking + Add content, which lets you insert items such as a Menu Image or Mega Menu.

Footer

The Footer is the last item in the Theme Editor's left panel. It contains one default section: Footer, which includes the following blocks:

Footer Information

Title typography: Customize the font style of footer section titles.
Layout: Adjust the block's layout.

Contact Us

Arrangement: Set how contact details are arranged within the block.
Layout: Adjust the block's layout.

Additional Content

Arrangement: Set how additional content items are arranged.
Layout: Adjust the block's layout.

Note: You can add more blocks to the Footer section by clicking + Add section above the footer in the Theme Editor.