Appearance
Header
This guide describes setting up the Header section to provide visitors with a menu for navigating the pages in your store. The header section is typically displayed across the top of store pages.
The following video shows a header section on a store's homepage that uses the following settings:
- A custom logo image is uploaded, and the Desktop layout dropdown option is set to Logo left with search bar.
- The Show social icons checkbox option is set to
on, to display social media icons in the header. - With the Show collection image checkbox option enabled, the expanded Books navigation menu displays collection images and provides (second level) links to individual collection pages. Refer to Shopify help: Menus and links.
For general guidance with modifying sections, refer to Sections overview.
Set up the header section
To set up your store's header section:
Go to Customize theme. At the top of the page, use the dropdown to select the Home page template.
Note
The header section is accessible from all page templates, excluding the Checkout, Password, and Gift card page templates.
From the side menu, select Header.
Select a section setting described in the following table.
| Section setting name | Description |
|---|---|
| Logo > Custom logo | Use the Custom logo menu options to set up an image to use as a logo inside the section. The recommended image dimensions are 800 x 300 pixels, in .jpg format.
|
| Logo > Custom logo width | Select the slider Custom logo width to set a size for the logo image inside the section between 20 and 800 pixels or px. If an image block is active, this setting won't apply to the homepage. |
| Menu > Main menu | Select a menu to display inside the section. Refer to Set a header menu. |
| Menu > Enable links to drop-down link headings | Select the checkbox Enable links to drop-down link headings to turn links on/ off for dropdown headings inside the section. |
| Menu > Feature second level links | Select the checkbox Feature second level links to show/ hide second level links inside the section. With this setting enabled, the section displays second level links to products or collections. Note this setting also rearranges the order of products and collections inside the section. |
| Menu > Show collection images | Select the checkbox Show collection images to show/ hide collection images inside the section. A collection image is associated with a collection, each product within a collection can have individual product images. Refer to Shopify help: Collection layout and appearance. |
| Menu > Collection image crop | Select the dropdown Collection image crop to set the shape of collection images inside the section. The dropdown options are No crop, Portrait, Square, Landscape, Super wide, and Letterbox. If enabled, this setting applies to collection images above third level links, and to feature collection links. |
| Layout > Desktop layout | For desktop devices, use the Desktop layout dropdown to select a position for the logo and menu items inside the section. The dropdown options are
|
| Layout > Show border | Select the Show border checkbox to show/ hide a horizontal line below the section. The border is not displayed if the first section is set to full width. |
| Layout > Show search icon | Select the Show search checkbox to show/ hide the search icon inside the section. This setting is ignored if a search bar is present. |
| Layout > Show social icons | Select the checkbox Show social icons to show/ hide links to your store's social media, inside the section. Refer to Social media. |
| Layout > Sticky header | Select the Sticky header checkbox to turn on/ off keeping the header at the top of the page. |
| Overlay settings > Overlay header over home page | Select the checkbox Overlay header over home page to turn on/ off positioning the header over the homepage, as an overlay. |
| Overlay settings > Overlay text color | Select the Overlay text color dropdown to set a color for text when the header overlays the homepage. The color options are Primary text, Secondary text, Tertiary text, White, and Black. The first 3 options are text colors defined by your color schemes. Refer to Colors. |
| Overlay settings > Overlay logo image | Use the Overlay logo image menu options to set up an image to use as a logo, inside the section, when the header overlays the homepage.
|
| Overlay settings > Overlay gradient color | Select the dropdown Overlay gradient color to set a color for the overlay gradient inside the section. The options are Black or White. |
| Overlay settings > Overlay gradient opacity | Select the Overlay gradient opacity slider to adjust the visibility of the overlay gradient, by setting an opacity value between 0% and 100%. |
Set a header menu
To select a menu to display inside the header section, apply the following settings in Header > Menu.
To use an existing menu, choose Select menu. Enter the name of the menu into the Search box, or pick a menu from the list, and then choose Select.
To create a new menu, choose Select menu, and then follow the Create menu link. The link opens the Navigation > Add menu editor on your store's admin page. Use the editor to create a new menu. Refer to Shopify help: Add, remove, or edit menu items in your online store.
To edit the current menu, select the Edit menu link. The link opens the Navigation menu editor on your store's admin page. Use the editor to modify the menu. Refer to Shopify help: Add, remove, or edit menu items in your online store.
To replace the current menu, use the Change dropdown to select Change menu. Enter the name of the replacement menu into the Search box, or pick a replacement menu from the list, and then choose Select.
To delete the current menu, use the Change dropdown to select Remove menu.
Note that this header menu is only displayed on desktop devices. To change navigation for the mobile/ drawer menu, refer to Sidebar menu.
Configure a video in the header section
A default header section contains a video (block). To configure a video block inside the header section:
Go to Customize theme. At the top of the page, use the dropdown to select the Home page template.
From the side menu, expand the Header section menu.
To configure an existing video block, select the Video block from the side menu.
To add a new video block, select Add block, and then select the Video block you added.
Note
Inside the header section, you can add, remove, or show/ hide a video block. Refer to Configure blocks inside a section, or Shopify help: Sections and blocks.
Apply a block setting described in the following table.
| Block setting name | Description |
|---|---|
| Video URL | In the Video URL box, enter a URL for the block's video. YouTube and .mp4 links are accepted. |
| Aspect ratio – mobile | Select the dropdown Aspect ratio – mobile to set a size for the video inside the block. This setting applies to smaller screens, and the options are: Standard, Widescreen, Extra wide, and Full screen. |
| Aspect ratio – desktop | Select the dropdown Aspect ratio – desktop to set a size for the video inside the block. This setting applies to desktop screens, and the options are: Same as mobile, Standard, Widescreen, Extra wide, and Full screen. |
| Fallback image | Use the Fallback image menu options to select an image to show inside the block. The image is shown if the video does not load or play.
|
| Text color | Select the Text color dropdown to set a color for the text inside the block. The options are: Primary, Secondary, Tertiary, Black, and White. Refer to Colors. |
| Logo > Overlay logo on hero video | Select the checkbox Overlay logo on hero video to turn on/ off displaying the store's logo in the video block, as an image overlay. With this setting enabled, the logo is moved from the header to the video (hero) block. |
| Logo > Max logo width for image block | Select the slider Max logo width for image block to set a maximum width for the logo image. This setting applies when the logo is set to display over the banner image. |
| Logo > Alternate logo | Use the Alternate logo menu options to select an alternate image to display as an logo inside the block. The recommended image dimensions ara 800 x 300px.
|
| Gradient > Color | Select the Color dropdown to set a color for the gradient inside the block. the options are White or Black. |
| Gradient > Opacity | Select the Opacity slider to adjust the visibility of the block by setting an opacity value between 0% and 100%. |
| Remove block | Select Remove block to delete the block from the current section. |