Sampo
documentation

Layout options

Header Layout

Header's layout related options allow you to customize the header to align seamlessly with your brand and overall store design. 

In the Header settings you can:

  • Select the menu to be shown as a main menu.
  • Choose the color scheme to be used in the header
  • Choose from several layout options to arrange the header content:
    • Logo left, menu left
    • Logo left, menu center
    • Logo left, menu drawer
    • Logo center, menu left
    • Logo center, menu below
    • Logo center, menu drawer

Desktop Submenu Type

Control how submenus appear on desktop devices. Choose between:

  • Dropdown
  • Drawer

Sticky Header

Determine how the header behaves as users navigate your store:

  • Always: The header remains visible at the top of the page.
  • On scroll up: The header appears when users scroll up after scrolling down.
  • None: The header stays fixed at the top of the page and does not follow scrolling.

Toolbar

The toolbar displays announcements and additional navigation items.

In the toolbar settings, you can:

  • Select a menu to display toolbar links.
  • Choose a color scheme.
  • Set the announcements animation and adjust the animation speed.
  • Enable social icons, language selection, and country/region settings.

 

Drawer menu 

You can add informational text to the drawer using the Additional Info rich text field. In the theme editor, go to Header > Drawer Menu > Additional Info and add the text, which will be displayed at the bottom of the drawer.

 

Advanced

If you have selected the Dropdown submenu type in the Header settings, you can define the number of columns in dropdowns.

  • Use a comma-separated list to specify the column numbers.
  • The columns are applied in the order of the top menu items.
  • Format example: 1,1,5,6