Section reference

Header

Set up Vellmar's header, with your logo, main menu, mega menus, search, account and cart.

The header holds your logo, the main menu, search, the customer account button and the cart. It sits in the header area of the theme editor, so it appears on every page. Your logo and its width are set in Theme settings → Logo and favicon.

On desktops, the menu shows in the header, with the logo on the left or in the center. On phones and tablets, it moves into a menu drawer that opens from the left.

Mega menus

A top-level menu item opens a wide mega menu instead of a small dropdown when either of these is true:

  • It has three levels of links: the item, its children and at least one grandchild. Children with grandchildren become column headings.
  • You add a Menu images block and type the item's title in Menu item, exactly as it's written in your menu, including capital letters.

A Menu images block adds up to two images with titles and links to that mega menu. The first Menu images block also shows its images at the bottom of the mobile menu drawer.

Best practices

  • Keep the top level short. Five to seven top-level items fit on one line at most screen sizes. Put the rest one level down.
  • Choose a menu style that fits your brand. Menu style → Pill groups the top-level links in a soft, rounded tray. Text keeps them as plain links.
  • Keep the header visible on long pages. Keep header visible while scrolling helps shoppers reach search and the cart from anywhere. Turn it off for very tall logos.
  • Account menu. The account button only appears when customer accounts are turned on in Shopify admin. Account menu sets the links shown in its account sheet.
  • Country and language. The selectors only make sense once you sell in more than one country or language. Add them in your market settings first.

See Navigation and mega menu for building the menu itself.

Preset tips

  • Vellmar centers the logo with plain text links, which suits a calm, editorial store.
  • Sorrel puts the logo on the left and uses the pill menu style.
  • Graphite puts the logo on the left with plain text links, which leaves room for a long menu.
Handle
header
Group
Header, footer and pop-ups
Where
Added to the header area of the theme editor. Up to 4 blocks.

Settings

SettingTypeDefaultOptions
Color schemeColor schemeScheme 1—
MenuMenumain-menu—
StyleDrop-downFloating pillFloating pill, Full width bar
Sticky headerDrop-downHide when scrolling downScroll with page, Always visible, Hide when scrolling down
Menu position on desktopDrop-downCenterCenter, Next to the logo
Overlay header on the first sectionWorks when the first section supports it, such as Image banner.CheckboxOn—
Show motion buttonLets visitors turn animations off or on. Shown when animations are on in theme settings.CheckboxOff—
SettingTypeDefaultOptions
Show accent dot before the store nameShown when no logo image is set.CheckboxOn—
Store name sizeSlider27px18px to 40px, in steps of 1px
SettingTypeDefaultOptions
Menu text styleDrop-downBodyBody, Label
Highlighted menu itemEnter a top level menu item title.TextNone—
Cart count colorDrop-downAccentAccent, Text
SettingTypeDefaultOptions
Show searchCheckboxOn—
Search on desktopDrop-downFieldField, Icon
Open search with the / keyCheckboxOn—
PlaceholderTextNone—
Trending productsCollectionNone—
Popular searchesSeparate with commas.TextNone—
Collections to suggestCollection listNoneUp to 6

Mobile menu

SettingTypeDefaultOptions
CardsDrop-downCollectionsNone, Menu, Collections
Cards menuCollection and product links show their image.MenuNone—
Card collectionsCollection listNoneUp to 4
Link sizeSlider30px24px to 48px, in steps of 2px
Show account linksShown when customer accounts are turned on.CheckboxOn—
Help menuMenuNone—
NoteRich textNone—

Customer accounts

SettingTypeDefaultOptions
Account menuShown in the account sheet for the latest customer accounts.Menucustomer-account-main-menu—

Country and language

To add a country or language, go to your market settings (Shopify admin > Settings > Markets).

SettingTypeDefaultOptions
Show country selectorCheckboxOff—
Show language selectorCheckboxOff—

Blocks

Add blocks to this section from the theme editor, then drag them to change their order. A section can have up to 4 blocks.

Mega menu

SettingTypeDefaultOptions
Menu itemTop level menu item title that opens this menu.TextShop—
HeadingTextShop by category—
Show product countsCheckboxOn—
Second column menuMenuNone—
Second column, second menuMenuNone—

Tiles

SettingTypeDefaultOptions
Tile 1 collectionCollectionNone—
Tile 1 imageDefaults to the collection image.ImageNone—
Tile 2 collectionCollectionNone—
Tile 2 imageDefaults to the collection image.ImageNone—
Tile 3 collectionCollectionNone—
Tile 3 imageDefaults to the collection image.ImageNone—

Product

SettingTypeDefaultOptions
LabelTextNone—
ProductProductNone—
Color schemeColor schemeScheme 3—
Title sizeSlider26px20px to 40px, in steps of 2px
Use accent color for titleCheckboxOff—

Edited . Written for Vellmar 1.0.0.

Something unclear or missing? Contact support.