Using Section Groups in the Theme Editor
What Are Section Groups?
Section Groups are named containers in your theme template that separate header and footer sections from the main page body. The two built-in groups are Header and Footer. Sections assigned to a group appear above or below the page content, on every page that uses that template.
Header Group
The Header group typically contains your store navigation, logo, and announcement banner. These sections appear at the top of every page and are shared across all page types that reference the same template.
In the Visual Editor, click the Header tab in the left sidebar to manage header sections. You can:
- Edit header settings (logo, menu, sticky behaviour).
- Add or remove sections within the header group (e.g. add an announcement bar).
- Reorder sections within the group.
Footer Group
The Footer group contains your store's footer — links, newsletter sign-up, social media icons, and legal text. Manage it via the Footer tab in the Visual Editor sidebar.
How Is This Different from Regular Sections?
Regular sections (in the page body tab) appear only on the specific page type you are editing. Header and footer sections appear on every page — changes to the header on your homepage also affect your product pages, collection pages, and all other pages.
Editing Header and Footer Code
If you want to edit the Liquid code behind the header or footer:
- Go to Online Store → Themes → Edit Code.
- In the file tree, find
sections/header.liquidorsections/footer.liquid. - Click the file to open it (read-only if it is a stock file).
- Click Edit file (or press ⌘E) to fork it and start editing.
After saving, your changes appear immediately in the Visual Editor preview. Use the Preview button in the toolbar to check how the header looks on your live storefront.
Using a Different Header per Page Type
If you need a different header layout for a specific page (e.g. a minimal header for your checkout landing page), create an alternate template in the code editor — for example templates/page.minimal.json — with its own header-group configuration. Then assign that template to the specific CMS page from the page edit form.