Script&Theory

§10 / SECTIONS

REF: TG–DOC–10 · REV. 1.7

Header

The Header section sits in the header group at the top of every page. It shows the logo, the main menu, a search button, the customer account link, the cart button and, optionally, country/region and language selectors. On small screens the menu opens in a drawer.

TANGENT 1.7 / SHOPIFY OS 2.0 / UPDATED 2026-10-19

tangent / home
FIG. 01 — HEADER BARDEMO STORE · PROTOTYPE
tangent / home
FIG. 02 — MEGA MENU OPENDEMO STORE · PROTOTYPE
tangent / home
FIG. 03 — MOBILE MENU OPENDEMO STORE · PROTOTYPE

The announcement bar is a separate section (Announcement bar) in the same header group.

Setup

  1. In the theme editor, select Header in the header group.
  2. Choose a Layout and a Menu.
  3. Pick a Menu style. Use Mega menu with images to show each sub-item's collection or product image.
  4. Optional: add Menu promo or Product cards blocks. Type the menu item title in Menu item exactly as it appears in the menu (for example, Women).
  5. Set the logo in Theme settings > Logo and favicon. The logo is not a header section setting.

The logo comes from theme settings, not from the header section:

Theme settingTypeDefaultNotes
Logo (logo)Image—Shop name is shown when empty.
Logo over images (logo_inverse)Image—Used over images (for example, a transparent header on a banner).
Logo width (logo_width)Range, 50–300 px120 px

Section settings

SettingIDTypeDefaultOptions / notes
Color schemecolor_schemeColor schemescheme-1
Menu and search color schememenu_color_schemeColor schemescheme-1Used by menus, the mobile menu and the search drawer.
Layoutheader_layoutSelectLogo center, menu left
  • Logo center, menu left
  • Logo left, menu center
  • Logo left, menu next to it
  • Logo center, menu below
  • Logo left, menu below
  • Logo left, menu in a drawer
Sticky headersticky_headerSelectAlways
  • Always
  • On scroll up
  • Off
Show header over the first banner on the home pagetransparent_homeCheckboxOnHome page only. Works best when the page starts with an image or video banner.
SettingIDTypeDefaultOptions / notes
MenumenuMenumain-menuItems with sub-menus open in the chosen menu style.
Menu stylemenu_styleSelectMega menu
  • Mega menu
  • Mega menu with images
  • Dropdown
  • Showcase
Show product count on collection cardsmenu_collection_countCheckboxOff
Open menus onmenu_triggerSelectHover
  • Hover
  • Click
Hover effectmenu_hoverSelectUnderline
  • Underline
  • Highlight
  • Fade others
Menu text sizemenu_text_sizeSelectSmall
  • Small (12 px)
  • Medium (14 px)
  • Large (16 px)
Uppercase menumenu_uppercaseCheckboxOff
Customer account menucustomer_account_menuMenu—Passed to the account element as its menu.

Mobile menu

SettingIDTypeDefaultOptions
Sub-menusmobile_menu_navigationSelectSlide in
  • Slide in
  • Expand in place
Menu widthmobile_menu_widthSelectDrawer
  • Drawer
  • Full screen
Menu textmobile_menu_textSelectLarge
  • Large
  • Compact

Country and language

SettingIDTypeDefaultNotes
Show country/region selectorshow_countryCheckboxOnAdd countries in Settings > Markets.
Show language selectorshow_languageCheckboxOnAdd languages in Settings > Languages.

The selectors appear in the header and in the mobile menu.

Blocks

An image or video card shown inside a mega menu.

SettingIDTypeDefaultOptions / notes
Menu itemmenu_itemText—Exact title of the top-level menu item, for example Women.
Mediamedia_typeSelectImage
  • Image
  • Video
ImageimageImage—Also used as the video's poster.
VideovideoVideo—Shown when Media is Video.
Video playbackvideo_playSelectPlay muted when the menu opens
  • Play muted when the menu opens
  • Play on hover. Videos load only after the menu opens and do not play with reduced motion or data saver on.
Aspect ratioratioSelectPortrait
  • Portrait
  • Square
  • Landscape
  • 3:2
HeadingheadingTextNew season
CaptioncaptionTextShop now
LinklinkURL—

Product cards (products, up to 12)

SettingIDTypeDefaultNotes
Menu itemmenu_itemText—The menu item the cards appear under. In the Showcase style, use a second-level item.
HeadingheadingText—
Productsproduct_listProduct list—
Show star ratingshow_ratingCheckboxOffUses the rating a reviews app stores on the product.

Structure

example.txt
1Header (sections/header.liquid)
2├── <site-header>
3│   ├── Menu button (opens the mobile menu drawer)
4│   ├── Logo (theme settings)
5│   ├── Main menu (snippets/header-nav)
6│   └── Utilities: search, country/language, dark-mode toggle*, account, cart
7├── <menu-drawer>  mobile menu, account, country/language, social links
8└── <drawer-dialog id="SearchDrawer">  with <predictive-search>
text

\*The dark-mode toggle shows only when Theme settings > Colors > Dark mode is set to the toggle option.

For developers
← PreviousSectionsNext →Footer

Last updated for Tangent 1.7

Get support ↗