Cornerstone

Layout and style

Header

Change the layout and style of the Header to match your brand. You can also enable the sticky header and customize colors and icons.

Change desktop and mobile layout

Change the layout of the logo, search bar, and menu for both desktop and mobile. The desktop layout includes multiple options to place the menu either below or in line with the logo. For mobile, the menu displays as a 'burger' icon (☰) that opens the mobile menu.

STEPS

In your theme editor (Customize):

  1. Click the Header section to open the settings.

  2. Under Desktop layout, select one of multiple options to either set the Menu below the logo or Menu in line with the logo.

  3. Under Mobile layout, change the alignment of the logo and the ‘burger’ menu icon.

  4. Choose to show a Drop shadow at the bottom of the header. Select Line or Small shadow, or None.

  5. Click Save.

Enable sticky header

The Sticky header option fixes the Header to the top of the screen or window when customers scroll down the page.

Click the Header section and select the Enable sticky header option.

Customize colors

In Theme settings > Colors, you can select custom colors for the elements of the Header. See our colors guide for a full overview.

Change cart icon and label

Click the Header section to find the settings for Icons.

Choose to display the cart icon as either a Cart or Bag.

Choose whether to Show cart label and select the type of label to show.

  • "Cart"

  • "Cart ($0.00)"

  • "($0.00)"

Customer account icon

Shopify | Customer accounts is a Shopify feature. Our theme support cannot provide code customizations to remove the customer icon. See Shopify's Customer accounts ↗ manual to learn more.

The customer account icon appears by default when customer accounts are enabled in your Shopify admin. Go to your admin Settings > Customer accounts to find the Show login link in the header of online store and at checkout option.

In the theme, you can choose to hide the text label of the account icon. Click the Header section and deselect the Show account label option.

Related links

Header Logo Mega navigation Transparent header Mobile menu Search bar

Last updated