Header & Footer Sections
These sections make up the global navigation, branding, and utility areas of your store. Most of them live in section groups rather than on individual pages, so they appear on every page once you configure them. Lotio ships 3 header styles, 4 mega menus, and 3 footer styles, so you can pick the combination that fits your brand.
Header
The default navigation bar at the top of your store, with the logo, horizontal menu, and action icons in a single row.
Features:
- Sticky behavior: Always, On scroll up, or None
- Header style: Default or Centered pill (shrinks the bar into a compact rounded capsule on desktop)
- Logo position (left or center) with separate desktop and mobile logo width and optional fixed height
- Menu type (Default or Drawer) and menu event (Hover or Click); the menu is automatically optimized for mobile
- Use absolute on pages: float the header over the content on Home, Product, Collection, Blog, or any target template, with its own color scheme, background opacity, blur, and inverse logo
- Show or hide the currency selector, language selector, search, account (with a customer account menu), and cart
- Blocks: Bubble (a small label badge bound to a top-level menu item, with custom colors, position, and optional SVG icon)
Header editorial
A magazine-style header with a brand bar on top and a numbered column menu underneath. Each top-level menu item becomes a numbered column, a drop-down becomes a panel, and one more level becomes a nested fly-out.
Features:
- Sticky behavior: Always, On scroll up, or None
- Logo type: text wordmark (wrap a word in italics to switch it to the subheading font) or image, with desktop and mobile widths
- Tagline shown as a centered line in the brand bar (hidden on mobile)
- Numbered column menu with panels and nested fly-outs for three menu levels
- Mobile drawer with accordion sub-menus, search shortcut, and locale selectors
- Show or hide the currency selector, language selector, search, account, and cart
- Use absolute on pages with a dedicated color scheme, background opacity, and blur
Header overlay
A minimal header that reduces the bar to two floating "pucks": a logo puck and a menu puck. The menu opens as a full-screen overlay with numbered links, and top-level items with a drop-down become an accordion.
Features:
- Floating logo puck and menu puck instead of a full-width bar
- Logo type: text wordmark (leave empty to use your store name) or image, with desktop and mobile widths
- Full-screen overlay menu with numbered items and accordion sub-menus
- Sticky behavior: Always, On scroll up, or None (defaults to None)
- Currency and language selectors shown on desktop to the left of the search icon and inside the overlay on mobile
- Show or hide search, account (with a customer account menu), and cart
- Use absolute on pages, enabled for all pages by default so the pucks float over hero sections
Announcement bar
A thin strip above the header for promotions, shipping notices, or countdowns. It is restricted to the Header section group.
Features:
- Announcement style: Text inline, Carousel, or Marquee
- Carousel width, height, direction (horizontal or vertical), autoplay, and speed
- Marquee speed, right-to-left direction, and pause on hover
- Multiple announcements, each with an optional link
- Blocks: Announcement, Button, Count down, Image
Mega menu
Lotio includes 4 mega menu sections. Each one attaches to a single top-level item of the header menu through its Menu assignment location setting (Item 1 to Item 10) and opens as a full-width panel below the header. You can add several mega menus to the Header group and bind each to a different menu item.
Mega menu — Shop
A column-based menu for product categories, with an optional promo banner on the side.
Features:
- Up to 6 link columns, each with its own title and menu
- Columns count control for the grid
- Promo banner with image, overline, heading, and button
- Blocks: Column
Mega menu — Featured
A product-focused menu that pairs a "concern rail" of links with a grid of featured product cards.
Features:
- Concern rail with a title, link menu, and call-to-action button
- Featured products list with a title and column count
- Product card options: card type, vendor, price, swatches, add to cart, quick view, compare, and badge
- Product media aspect ratio, hover effect, navigation style, and bullets
- Variant display option (first option or a manual option name) for swatches
Mega menu — Journal
A menu for editorial content that combines a "browse rail" of tag links with a grid of articles.
Features:
- Browse rail with a title and tags menu
- Call-to-action button with style, size, URL, and new-tab options
- Hand-picked article list with a title
- Column count for the article grid
Mega menu — Collections
A grid of collection cards with an optional product count and a closing button.
Features:
- Collection list picker
- Column count for the grid
- Show product count on each collection card
- Call-to-action button with style, size, URL, and new-tab options
Footer
The full-featured footer with an editorial "letter" block, newsletter form, link lists, and a base row with selectors and payment icons.
Features:
- Letter area with overline, heading (italicise a word to set the accent), subtext, and sign-off
- Newsletter signup form
- Social media icons and Follow on Shop
- Wordmark as text or logo image, with a wordmark size that scales with the viewport width
- Base row: currency selector, language selector, policy links, and payment methods
- Blocks: Link list
Footer campaign
A footer that opens with a full-width campaign banner and button, followed by the brand column and link lists.
Features:
- Campaign banner with background image, overline, heading, and button
- Brand column with text or image logo and a short description
- Social media icons and Follow on Shop
- Base row: currency selector, language selector, and payment methods
- Blocks: Link list
Footer compact
A lightweight footer for stores that want a short brand line and a single row of links.
Features:
- Brand wordmark (text or logo image) with a tagline
- Note shown after the copyright line
- Base row: currency selector, language selector, and payment methods
- Blocks: Link list
Floating sidebar
A small fixed cluster of utility buttons anchored to a corner or edge of the screen. It lives in the Features section group.
Features:
- Placement: top, middle, or bottom, on the left or right
- Hide on scroll down and hide on mobile
- Inherit the page color scheme or set a custom one, with background, blur, corner radius, border, and shadow
- Each button has its own icon size and icon color
- Blocks: Back to top, Comparison, Dark mode (see Dark & light mode)
Breadcrumb
A standalone breadcrumb trail you can place above the main content of any page except the home page.
Features:
- Builds the trail automatically from the current page, collection, product, blog, or article
- Alignment (left, center, right)
- Universal width, color scheme, background, and padding controls (see Section Settings)
- Disabled on the home page template; Page hero and Banner with text ship their own Show breadcrumb toggle (see Hero Sections)
Predictive search
The search panel that opens from the header search icon, showing live results as the visitor types. It has no preset and belongs to the Header section group.
Features:
- Search type: Drawer (slides in from the side) or Overlay (covers the page); both are built on a shared base search panel that renders products, collections, pages, and articles
- Color scheme for the panel
- Trending block with a heading and comma-separated search terms, each linking to its results
- Product block with a heading and a hand-picked product list shown before the visitor types
- Blocks: Trending, Product
Section groups
Lotio organizes global sections into five groups. Open Online Store > Themes > Customize and use the left sidebar to add, remove, or reorder sections within each group.
- Header: Announcement bar, Header, Header editorial, Header overlay, Mega menu — Shop, Mega menu — Featured, Mega menu — Journal, Mega menu — Collections, and Predictive search. Keep one header style active at a time.
- Footer: Footer, Footer campaign, and Footer compact. Pick one footer style.
- Overlay: Cart mini, Quick view, and Product compare modal. See Product Sections.
- Popup: Popup promo, Popup age verification, Popup countdown, and Popup sign up. See Popup Sections.
- Features: Floating sidebar.