Skip to main content

Header, Footer & Site Chrome

The chrome is everything that wraps your storefront โ€” the announcement bar at the top, the header with your logo, navigation, search, account and cart, the amber B2B greeting bar that appears for signed-in company buyers, and the footer. In Vertex, every piece is B2B-aware out of the box: switchers, badges, and sales-rep pills appear automatically when a company buyer signs in, and the layout drops back to a polished B2C look when they're not.

Vertex desktop header โ€” logo, nav, search, account, cart

Two header layouts, applied automatically

You don't have to choose between a "B2B header" and a "B2C header". Vertex shows one header, and layers the amber B2B greeting bar above it the moment a company buyer signs in. Guests see the clean white header; signed-in buyers see the same header plus their company badges, NET-terms pill, tax-exempt indicator, and ship-to switcher.

Announcement barโ€‹

The top bar above the main header โ€” short message on the left, optional icon (truck, lightning, lock), phone number, social icons, and a dismissible close button on the right. Two color schemes ship out of the box: dark and amber.

To configure it, open Shopify admin โ†’ Online Store โ†’ Themes โ†’ Customize. In the page editor, find the Announcement bar section and click to expand its settings.

Settingsโ€‹

  • Text โ€” Your short value message: "Free shipping on orders over $500", "NET-30 available to qualified buyers". Supports inline links.
  • Left icon โ€” Choose Truck, Lightning, Lock, or None.
  • Phone number โ€” Shows on the right. Tap-to-call on mobile.
  • Instagram / LinkedIn / X / YouTube URL โ€” Each social icon only appears when you fill its URL.
  • Color scheme โ€” Pick Dark (default) or Amber.

Inside the Announcement bar section, click Add block and choose Link to push small text links into the bar โ€” Special offers, Become a dealer, Resources. Give each link a label and a URL.

Dismissibleโ€‹

The close button on the right hides the announcement bar for that visitor. The bar stays hidden until the visitor clears their browser data.

When to use the amber scheme

The amber scheme matches the B2B greeting bar's accent color. Use it when your announcement is a B2B value proposition (NET-30 terms, dealer signup, RFQ). Use the dark scheme for general marketing.

Main headerโ€‹

The main header is your primary navigation surface โ€” logo, brand text, primary menu, optional secondary menu, predictive search, locale and currency switchers, account, and cart.

In the page editor, find the Header section and click to expand its settings.

Settingsโ€‹

  • Logo โ€” Upload your logo. SVG or 2x PNG recommended. Adjust the size with the Logo max height setting.
  • Brand text override โ€” Optional text shown when no logo is set (e.g., "Vertex Supply"). Appears in the heading typeface.
  • Primary menu โ€” Pick the main navigation. Each parent menu item gets a dropdown driven by its child items.
  • Submenu style โ€” Choose Auto, Mega menu, or Dropdown. Auto picks Mega when a parent has 8 or more children; otherwise it shows a flat dropdown.
  • Secondary menu โ€” Right-aligned utility nav (Special offers ยท Guides ยท Services ยท FAQ). Auto-detected by the secondary-menu link-list handle if you leave it blank.
  • Search placeholder โ€” Translatable. Defaults to "Search by product, SKU, or part number".
  • Show locale switcher โ€” On by default. Hides or shows the language pill.
  • Show currency switcher โ€” On by default. Hides or shows the currency pill. Even single-market B2B buyers see this so they always know what currency they're paying in.
  • Sticky on scroll โ€” Pins the header to the top of the viewport when scrolling.

What appears to the right of the menuโ€‹

From left to right: predictive-search input, language pill, currency pill, sales-rep pill (auto-shown for B2B), Account, and Cart counter.

The sales-rep pill pulls from the company's sales-rep name, email, and phone metafields. See the Metafield setup guide for how to fill these in.

Mega menu vs. simple dropdownโ€‹

You can switch each parent menu item between two formats:

  • Mega menu โ€” Multi-column grid panels with optional icons and a dedicated brand grid. Use it for Shop by category, Shop by brand, Industries โ€” parent items with 8 or more children or visual subcategories.
  • Simple dropdown โ€” Flat list. Use it for About, Resources, Account โ€” parent items with a handful of pages.

When set to Auto, Vertex picks Mega if the parent has 8 or more children; otherwise the simple dropdown.

B2B greeting barโ€‹

The amber band that sits above the main header for signed-in company buyers. There are no merchant settings for this section โ€” it appears automatically based on who's signed in.

When it appearsโ€‹

It shows up when all three of these are true:

  1. The customer is a B2B (company) buyer, not a B2C account.
  2. They're attached to at least one company.
  3. The theme isn't set to B2C-only mode.

If any one of those isn't true (guest, B2C-only mode, no company attached) the greeting bar doesn't appear at all.

What it showsโ€‹

  • Company name โ€” "Signed in as Company Name"
  • NET-terms badge โ€” NET-30, NET-60, or NET-90 from the company's payment-terms setting
  • Tax-exempt badge โ€” pulled from Shopify's native company tax status
  • Language pill โ€” avatar style with the language code and a chevron
  • Currency pill โ€” avatar style with the currency code and a chevron
  • Ship-to switcher โ€” static label when the buyer has one location; full dropdown when they have multiple
Responsive behavior

On screens up to 1169px wide, the greeting bar collapses and its contents move into the hamburger drawer's account section. The amber band only appears at 1170px and above (desktop), so it doesn't fight the search bar for vertical space on mobile.

โ†’ See B2B-only sections for the full feature surface.

The site footer โ€” menu, social, email, payment icons, newsletter, legal links.

In the page editor, find the Footer section at the bottom of the page tree and click to expand its settings.

Settingsโ€‹

  • Footer menu โ€” Pick the multi-column footer nav. Each parent renders as a column header.
  • Instagram / Facebook / LinkedIn / X / YouTube URL โ€” Each social icon only appears when you fill its URL.
  • Email โ€” Leave blank to hide. When filled, appears as a clickable email link in the contact column.
  • Show payment icons โ€” On by default. Vertex reads the payment methods you've enabled in Shopify Settings โ†’ Payments and shows only those icons, so you never have to maintain the list yourself.
  • Newsletter heading โ€” E.g., "Join the trade list".
  • Newsletter intro โ€” Short reassurance copy โ€” "Monthly drops, no spam".
  • Legal menu โ€” Privacy, Terms, Refund, Cookies. Falls back automatically to your policy URLs if you leave the menu blank.

Newsletter formโ€‹

The newsletter block uses Shopify's native customer-newsletter form, so subscribers are written to your Shopify customer list (with the newsletter marketing flag). No third-party integration required.

Payment icons reflect what's enabled

You don't pick payment icons by hand. Vertex reads your enabled payment types from Shopify and shows only the icons you've turned on. Enable Apple Pay in Settings โ†’ Payments and it appears in the footer. Disable it and it vanishes.

Predictive search drops down from the search input as the buyer types. It shows four panels:

  1. Products โ€” Image thumbnail, title, vendor, and price. Also matches manufacturer part numbers (MPN), so searching 1N4148 finds the diode by part number.
  2. Collections โ€” Title and image.
  3. Pages โ€” Title and URL.
  4. Suggested queries โ€” Shopify's native search suggestions.

MPN recognitionโ€‹

When you fill in the MPN metafield on a product, predictive search will match queries against that field in addition to the standard product title, SKU, and vendor. This is essential for technical catalogs where buyers search by part number rather than product name.

โ†’ See the Metafield setup guide for how to fill these in.

Responsive behaviorโ€‹

The header switches between mobile and desktop layouts at 1170px โ€” chosen so iPad Pro in portrait (1024px) stays in the hamburger flow and most laptops land in the desktop layout.

ViewportLayout
Under 1170pxHamburger menu opens a drawer with the primary menu, secondary menu, ship-to switcher, locale and currency pills, sales-rep card, language, and sign-in.
1170px and aboveFull desktop nav with mega menu and dropdown panels, predictive-search input, switchers, sales-rep pill, account, and cart.

Custom dropdown panelsโ€‹

Vertex uses zero native browser dropdowns anywhere. Language, currency, and ship-to switchers all use the same custom panel system with:

  • Hover states
  • Current-selection highlight with a check icon
  • Fade-in animation
  • Mutual exclusion (opening one closes the others)
  • Click-outside-to-close
  • Press Escape to close
  • Full keyboard navigation (arrow keys and Enter)

Restyling these dropdowns is a matter of editing the theme color scheme โ€” no code required.

What's nextโ€‹