XenonTheme guide Get support

Header and footer

The header and footer show on every page. In the theme editor they sit at the top and bottom of the section list, in their own groups. You can add sections to these groups too, for example a second announcement bar.

Announcement bar

A strip at the very top of the page for short messages, such as delivery times or a returns promise.

  • Messages: each Announcement block is one message, with optional Link. One message shows at a time, with previous and next buttons when there are two or more.
  • Rotate messages: moves to the next message every few seconds (Seconds per message). Rotation pauses while a shopper points at or tabs into the bar, and starts paused for shoppers who turn off animations on their device. A pause button appears while it rotates.
  • Top bar menu: a menu of links beside the messages, such as Track order or Contact. It shows on desktop only, and starts as your footer menu. Choose another menu, or none.

The announcement bar scrolls away with the page.

The header holds your logo, the main menu, search, the account icon and the cart.

  • Main menu: the menu shown across the header. Set its items up in Content > Menus, nesting items to make dropdowns, up to three levels.
  • Main menu style:
    • Mega menu: a wide panel. Second-level items that have their own children become columns with a heading; the rest are gathered in the first column.
    • Dropdown: a list under each item, in your menu's order.
  • Main menu color scheme: the colors of the bar the menu sits in.

Mega menu images. Add a Mega menu image block to put an image, with an optional Heading and Link, in a mega menu panel. In Main menu item, type the name of the top-level menu item exactly as it appears in your menu (capital letters don't matter). Main menu style must be Mega menu.

On phones the main menu opens from the menu button as a panel. Each level opens in place, starting with a "View all" link. Below it come the Secondary menu (it starts as your footer menu) and, when you sell in more than one country or language, the country/region and language selectors.

Keyboard and touch. Mouse users open a panel by pointing at an item. Keyboard and touch users open it with the small arrow next to the item, and close it with Escape.

  • Show search field on desktop: a search field in the header. With it off, and on phones, a search icon opens the field.
  • Search placeholder: the hint inside the empty field. Leave it blank to use the theme's wording.

Live results appear as shoppers type, when Theme settings > Search > Enable predictive search is on. See Collections and search.

Account and cart

  • Account: Shopify's account icon, which opens sign-in and a menu for signed-in customers. It shows when customer accounts are turned on in Settings > Customer accounts. Customer account menu chooses the links in it; it starts with Shopify's own customer account menu.
  • Cart: the cart icon shows how many items are in the cart. With Theme settings > Cart > Cart type set to Drawer, it opens the cart drawer.

Sticky header decides what the header does as shoppers scroll:

  • None: it scrolls away with the page.
  • On scroll up: it hides while shoppers scroll down, and comes back when they scroll up.
  • Always: it stays at the top of the screen.

Country/region and language

Show country/region selector and Show language selector add the selectors to the phone menu. They show only when your store sells in more than one country or language, set up in Settings > Markets and Settings > Languages.

The footer is made of blocks, side by side on desktop and stacked on phones.

Block What it shows
Brand Your logo, a short text and your store details. It can use its own Logo, for example a light version for a dark footer. Show store details shows the address, phone, email, WhatsApp number and opening hours from Theme settings > Store details.
Footer menu A Heading and a menu, with one level of sub-items. Add more of these blocks for more menus.
Text A Heading and text, for a short note about your store.
Social media icons An icon for each profile in Theme settings > Social media. It's hidden until you add a profile.
Newsletter An email signup. Signups are saved as customers who accept email marketing, tagged newsletter.

The bottom row

  • Copyright text: leave it blank to show the year and your store name.
  • Show country/region selector and Show language selector: shown only when you sell in more than one country or language.
  • Show Follow on Shop: a button that lets shoppers follow your store in the Shop app. It shows when Shop Pay is set up in Settings > Payments.
  • Show payment icons: icons for the payment methods set up in Settings > Payments.

WhatsApp button

The floating WhatsApp button is set up in theme settings, not in the footer. See Theme settings.