Skip to main content

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. Ronin ships 3 header styles, 4 mega menus, and 3 footer styles, so you can pick the combination that fits your brand.

The default navigation bar at the top of your store, with the logo, horizontal menu, and action icons in a single row.

section-header.webp

Features:

  • Sticky behavior: Always, On scroll up, or None
  • Header style: Default or Segmented (wraps the menu and actions into rounded pill tracks on desktop; works best with the logo on the left)
  • 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, List collections, Blog, other pages, or target pages, 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 bound to a main menu item by position, with background and text colors, an Above or Aside position, and an optional custom SVG icon)

Header box​

A header that splits the bar into two floating clusters: the logo and menu on the left, and the action icons on the right. The logo always sits on the left.

section-header-box.webp

Features:

  • Sticky behavior: Always, On scroll up, or None
  • Desktop and mobile logo width with optional fixed height
  • Menu type (Default or Drawer) and menu event (Hover or Click)
  • Use absolute on pages with a dedicated 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

Header split​

A header with a centered logo and the navigation split on either side of it.

section-header-split.webp

Features:

  • Sticky behavior: Always, On scroll up, or None
  • Centered logo with desktop and mobile width and optional fixed height
  • Left menu (shown left of the logo on desktop and used for the mobile drawer) and right menu (shown right of the logo on desktop)
  • Menu event: Hover or Click
  • Use absolute on pages with a dedicated 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

Announcement bar​

A thin strip above the header for promotions, shipping notices, or countdowns. It has no preset: it ships in the Header section group (disabled by default) and is restricted to that group.

section-announcement-bar.webp

Features:

  • Announcement style: Text inline, Carousel, or Marquee
  • Carousel width, height, style (Horizontal or Vertical), autoplay, and speed in milliseconds
  • Marquee speed, right-to-left direction, and stop on hover
  • Blocks: Announcement (text with an optional link), Button (one per bar, Primary, Secondary, or Tertiary style), Count down (one per bar, counts to a date such as 2024-12-30 00:00), Image (with image size)

Mega menu​

Ronin 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. All four also carry the universal width, color scheme, background, and padding controls (see Section Settings).

Mega menu — Collections​

A grid of collection cards with an optional product count and a closing button.

section-megamenu-collections.webp

Features:

  • Collection list picker
  • Column count for the grid
  • Show product count on each collection card
  • Button with label, style, size, URL, and new-tab options

Mega menu — Featured​

A product-focused menu that pairs a "concern rail" of links with a grid of featured product cards.

section-megamenu-featured.webp

Features:

  • Concern rail with a title, rail menu, and button (label, style, size, URL, new tab)
  • Products title, hand-picked product list, and column count
  • Product card: color scheme, card type (Global, Standard, Detailed, or Overlay), vendor, price, swatches, add to cart, quick view, and compare
  • Product media aspect ratio, hover effect, navigation style, and bullets with bullet style
  • Variant display option (First option or Manual with an 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.

section-megamenu-journal.webp

Features:

  • Browse rail with a title and tags menu
  • Button with label, style, size, URL, and new-tab options
  • Articles title and hand-picked article list
  • Column count for the article grid

Mega menu — Shop​

A column-based menu for product categories, with an optional promo banner on the side.

section-megamenu-shop.webp

Features:

  • Columns count control for the grid
  • Promo banner with image, overline, heading, and button
  • Blocks: Column (a column title and a menu)

The Statement footer: an oversized hashtag headline, followed by the brand and newsletter, link columns, and a base row.

section-footer.webp

Features:

  • Hashtag shown as the oversized statement
  • Brand mark: Wordmark or Logo image (the store name is shown when the chosen mark is empty), with a tagline
  • Newsletter signup with a custom label
  • Social media icons (linked in your theme settings) and Follow on Shop (requires Shop Pay)
  • Base row: currency selector, language selector, policy links, and payment methods
  • Blocks: Link list (heading and menu)

A footer that opens with a row of service pillars, followed by an editorial split of brand, newsletter, and link columns, and a fine-print baseline. It pairs best with a light color scheme.

section-footer-ledger.webp

Features:

  • Brand mark: Wordmark or Logo image, with a manifesto and an established line
  • Newsletter signup with a custom label
  • Base row: currency selector, language selector, policy links, and payment methods
  • Blocks: Service pillar (Icon or Image media, with icons such as Infinity, Pencil, Leaf, Rotate, Shield check, or Truck, plus a heading and note), Link list

A footer that leads with a call to action and newsletter, then a link grid, and ends with a giant brand mark clipped to the footer baseline.

section-footer-movement.webp

Features:

  • Call to action with overline and headline
  • Signature brand mark: Wordmark or Logo image, with a mark size that scales with the viewport width
  • Newsletter signup with a custom label
  • Base row: currency selector, language selector, policy links, and payment methods
  • Blocks: Link list
note

All three footers share the universal width, color scheme, background, and padding controls. See Section Settings.

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.

section-floating-sidebar.webp

Features:

  • Placement: Top left, Top right, Middle left, Middle right, Bottom left, or Bottom right
  • Hidden on scroll down and hidden 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, color, and color opacity
  • Blocks: Back to top, Comparison, Dark mode (see Dark/Light mode)

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.

section-main-predictive-search.webp

Features:

  • Search type: Drawer (slides in from the side) or Overlay (covers the page)
  • Color scheme for the panel
  • Blocks: Trending (a heading and comma-separated search terms, each linking to its results), Product (a heading and a hand-picked product list)
tip

Breadcrumbs in Ronin are a theme block rather than a section. See Breadcrumb in Basic Blocks.

Section groups​

Ronin 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, Predictive search, Header, Header box, Header split, Mega menu — Collections, Mega menu — Featured, Mega menu — Journal, and Mega menu — Shop. Keep one header style active at a time.
  • Footer: Footer, Footer ledger, and Footer movement. 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.