What is the header section?
The Header is a key section that introduces the store and enables customers to establish a connection with the brand. Beautify includes a smart mega menu, user-friendly search and clean icons that are all designed to make a great first impression. A transparent or solid color header can be anchored with sticky functionality to stay visible as shoppers scroll, supporting seamless navigation throughout the site.
Refer to the mega menu guide and the announcement bar guide for further information about these features.
How to set up the header section
Steps
- Open the Theme Editor and in the Header Group, select the Header section.
-
Under Layout, there is the option to Enable sticky header.
Turning the Enable sticky header on: When customers scroll down the page, the navigation stays anchored to the top of the page.
Turning the Enable sticky header off: The header section will scroll with the page.
- In the Logo settings, set the Logo position to Left or Middle. This will also affect the position of the menu.
- In the Logo settings, select a Logo image. The image logo width can be adjusted independently for desktop and mobile. If no image is selected, Beautify will display the Store name specified in the Shopify admin settings.
- Set the max Logo width and Mobile logo width.
- In the Transparency settings, select Enable transparent header if a transparent header is desired. Refer to how to set up the transparent header for further guidance.
- Under Navigation, select a Main menu. Menus are managed in the Shopify admin area under Content > Menus.
- The setting Parent links open dropdowns on mobile controls whether top level links are active on a mobile menu. Switching this off can make it simpler for customers to access lower menu levels on mobile as they need to be less accurate when tapping on links.
- Under Localization, select Enable localization to show a region and language picker.
- In Customer account, choose an alternative Customer account menu if desired.
- Choose one of the four Cart icons.
- In the Search settings, there is the option to show Popular searches and Popular products. Refer to the header search guide for further information.
Tip
Use the setting Enable logo <h1> on home page to select whether the logo should function as an h1 on the home page. This may not be required if the heading in another section is being used as the h1. For optimum SEO, a page should have one h1 and it should be the first heading on the page.
How to set up the transparent header
The transparent header is a design feature in Beautify where the header has no solid background color. Instead, the background is see-through, allowing the content behind the header to be visible, thereby blending the header more seamlessly into the rest of the page design. In addition, the header can include a fade color at the top of the transparent header to increase contrast and assist legibility.
The transparent header is designed to be displayed over an image. The transparent header can be used when one of the following sections is the first section in the Template or Header Group: Background video, Collage hero, Image banner, Image with scrolling text, Shoppable image or Slideshow.
If the header is sticky, the transparent header will be replaced by a solid color header as the customer scrolls down the page.
Tip
- In the Header settings, navigate to Transparency and select Enable transparent header.
- Select an optional Alternative logo which will be shown when the header is transparent.
- To select colors, navigate to Theme settings > Colors > Header, and select Transparent text, Transparent fade and use the slider to adjust the Transparent fade strength.
Tip
How to set up the header colors and typography
There are specific color settings for each aspect of the header including the cart count, dropdowns, text and background. The colors for both the standard header and transparent header are managed in Theme settings > Colors > Header.
The font used in the header is determined by the Typography theme settings. Choose whether to use the body or heading font.
FAQs
How do I set up a mega menu?
Refer to our mega menu guide which covers this in more detail.
Why isn't my transparent header showing?
The transparent header will be used over image sections including the Background video, Collage hero, Image banner, Shoppable image or Slideshow sections.
How do I control the height of the header?
The header height is determined by height of the logo and menu. The logo width settings can be used to adjust the size of the logo.
How do I add promotional images to the header?
This is possible when a mega menu is used. Either add a Menu: Columns, Menu: Collection tabs or Menu: Promos block to the Header and add promotions in the section settings. For further guidance, refer to the mega menu guide.
Can't find what you're looking for?
Our support staff are here to answer your queries, so don't hesitate to write to us!
Contact us