System updates

We’re experiencing issues that may affect your Square services. We’ll continue to update our status page with more information.

Home>Building Your Website

Customize Your Website Header

The header section of your website displays on every page and includes a few key elements:

  • Logo/Title: Your business logo image or name. This always links back to your home page.

  • Navigation Menu: Links to the pages on your website. You can choose which pages to add to the menu, add links to external websites, and create subpages.

  • Shopping Cart: Visitors can view and edit items they’ve added to the cart before checking out.

  • Search Icon: Allows visitors to search and filter your items.

  • Action Button: Add a button to the header to direct attention to a special link or page.


You can customize several aspects of the header section to give your website a unique look.

Note: The Header section is global, so any changes you make will display automatically on all pages.
Click on the Header section itself or on the button to the left to access the settings.


Move your mouse over any of the items on the left to see the corresponding section highlighted on the right. Click on any item to open the options. Each part of the header has its own settings that you can adjust individually, and we’ll go over them one at a time here.



Click the Change layout link in the upper left corner. You can change the alignment of the logo and menu using the buttons below. Try them out to see which one works best for your content. For example, you might want to try the layout with the logo centered above the menu if you have more than a few pages in your menu. When you’re finished, click the back arrow at the top to return to the main settings panel.



Use the menu to switch to a logo image or to a text-only title. For titles displayed in text, you can adjust the font size and color. For images, you can change the logo size using the slider, or use the buttons to replace or delete the current image.



If you want to hide your navigation menu from all pages on your website, use the toggle in the Navigation options. Clicking the checkbox will convert the menu text to uppercase, while unchecking it will display the text exactly as you typed it when creating your pages.


Click the menu items button to view and edit the items in the navigation menu. Use the “. . .” icon to remove or edit an item. Clicking the blue “+” icon will allow you to add a subpage for that menu item. You can also create subpages manually by dragging a menu item under and to the right of any other page in the list.

Shopping Cart and Search Icons


You can select a different color for these icons by clicking on the color swatch. You can also hide the cart and search icons using the toggles for each one, but doing so will disable these features on your website.

Action Button


The Action button allows you to add a link that stands out visually from the rest of your navigation menu. You can toggle this on and off, change the color and style of the button, and link to any of the following:

  • Any page on your website, including item and category pages

  • An external website

  • A phone number or email address

  • An uploaded file, such as a menu

Section Style


In the Section style area, you can choose a different background color for the header section or upload an image to use as the background. You can also select a scroll effect for the navigation menu:

  • Sticky header: The menu displays at the top of the window, even when scrolling down on a page. This effect is visible in the screenshot above.

  • Reveal on scroll up: The menu is hidden while scrolling down the page but appears when scrolling back up.

  • No effects: The menu is fixed at the top of the page and does not appear while scrolling up or down.

Can't find what you need?