Skip to main content

Layout: Width, Header and Top Bar

The Layout tab controls the overall shape of your site: how wide it is, what the header looks like, the announcement top bar, and how dense product grids are.

Layout width

SettingOptionsDefaultWhat it does
Layout widthBoxed, Full widthBoxedBoxed keeps the site inside a fixed content width with breathing room at the sides. Full width lets it stretch across the whole browser window.
Boxed width1120 to 1600 px, in steps of 201280 pxThe content width used in Boxed mode. Shown only when Boxed is selected.

The width applies to the whole site: the top bar, header, page content and footer all align to it.

SettingOptionsDefaultWhat it does
Header styleSplit, Centered, MinimalSplitThe arrangement of logo, menu and action icons. See below.
Sticky header on scrollOn or offOnKeeps the header pinned to the top of the window while visitors scroll.
Show search iconOn or offOnAdds a search icon linking to the site search page.
Show account iconOn or offOnAdds an account icon. It links to the shop account area when EasyCommerce is installed, otherwise to the Joomla login page.

The three header styles:

  • Split: logo on the left with the menu and action icons laid out across the bar. The classic shop header.
  • Centered: the logo takes centre stage, with the menu arranged around or below it depending on the template.
  • Minimal: only the logo and action icons. No menu is rendered at all.
Minimal removes all navigation

The Minimal style removes the entire menu area, including any mega menus and menu item icons you configured on the Navigation tab. Use it for stripped-back designs where visitors navigate another way.

Icons that appear on their own

A cart button appears automatically whenever EasyCommerce is installed; whether it opens a slide-over drawer or the cart page is set on the Pages tab. On small screens a menu button also appears automatically whenever there is a menu to show.

Top bar

The top bar is a slim band above the header, useful for announcements and quick links.

SettingOptionsDefaultWhat it does
Show the top barOn or offOffMaster toggle for the band. The remaining settings appear when it is on.
Announcement textFree textEmptyA short message, for example "Free shipping on orders over $50".
Show social iconsOn or offOffReveals one link field per network.
Facebook, Instagram, X, YouTube, LinkedInWeb address per networkEmptyIcon links to your profiles. They open in a new tab.
Show language switcherOn or offOffShows links to switch between your site's content languages.
Social links need full web addresses

Only complete addresses beginning with http:// or https:// are shown; anything else is quietly ignored. The same links also appear in the footer's brand column.

When the language switcher appears

The switcher only renders on multilingual sites: Joomla's language filter must be active and at least two content languages published. On a single-language site the toggle has no visible effect.

The top bar also displays any modules you assign to the topbar position on the Modules tab. If the announcement, modules, language switcher and social links are all empty, the band is hidden entirely even while the toggle is on.

Product grid density

SettingOptionsDefaultWhat it does
Product grid density2 columns, 3 columns, 4 columns3 columnsHow many products sit side by side in shop product grids on large screens. Grids adapt automatically on smaller screens.