Header
Ira's header appears at the top of each page. You can customize it to fit with your brand and product offerings.
On mobile devices, the header shrinks down into a floating menu bar::
Configure the header
To configure the header:
Settings reference
Ira's header has the following settings:
Logo image
Select or upload an image to be used as the logo in the heading.
If you don't upload a logo, the name of your store appears instead.
We recommend using a logo with a transparent background (PNG format).
Logo max width
Select the display width, in pixels, of your logo image.
Your logo height is scaled to match the width. You can use this setting to make the logo super tiny or super huge.
Main menu
Select a menu to be displayed in the header.
Menus are a Shopify feature. See Shopify's Menus and links to learn more about them.
Style
Choose a menu style: either Menu icon (☰) or Inline links. Learn more here.
If your menu has too many inline links to be displayed, the menu becomes scrollable.
On mobile devices, the style is always set to Menu icon.
Logo position
Choose the position of your logo in the header: either Left or Center.
Your main menu swaps places with the logo.
Transparent header
You can make your store's header transparent. This is great for stores that want to push big, bright product photography.
In this image, you can see the transparent header enabled, helping the Slideshow section section below to pop out.
The transparent header is only used on the home page or collection pages, and with a Full width slideshow or featured collection image as the first section. Otherwise, your normal header settings are used.
Set up the transparent header
Settings reference
The transparent header has the following settings:
Enable on home page
Select this checkbox to enable the transparent header feature on the home page. This setting requires that you have a Slideshow Section with 'full width' enabled as the first Section on your homepage. Learn more in the Slideshow article.
Enable on collection pages
Select this checkbox to enable the transparent header feature on collection pages. This setting requires that you have Collection images and have enabled full-width within your Collection pages Section. Learn more about Collection images in the Collection pages article.
Text color
Select a color to be used for all text in your header.
Make sure the text is readable against your top-most home page section's background colors, images, or video.
Icon color
Select a color to be used for all icons in your header.
We recommend using the same color you used for your Text color.
Border color
Select a color to be used for all of the borders and lines in Ira's header layout.
Border opacity
Use the slider to set the border opacity: where 0% is invisible and 100% is completely opaque.
Logo image
Select or upload a logo image to be used on the transparent header.
This logo is only used when the header is shown as a transparent header. Scroll up to the normal header settings to pick the normal logo.
Add a mega navigation menu
From Ira's header settings, you can add a mega navigation menu. Using this menu, you can add more links to your main menu. Your customers can browse large catalogs more quickly and more easily.
If your mega navigation contains a link to a collection with a featured image, the collection's featured image will automatically appear when the link is hovered over. :
The mega navigation menu makes use of your existing Main menu. You can nest sub-menus inside of your menus, which is what makes mega navigation menus so mega.
Here's an example of a main menu with nested menus within it, as shown in the Shopify admin::
Settings reference
You can add one or many mega navigation menus. Our demo store, Active, has a mega nav menu for its Shop menu item.
Make sure your main navigation menu has nested menus with in. You can add or change menus from the Navigation page of the Shopify admin.
This feature makes use of nested menus. So your menu would look something like this:
Where the indented items are nested menus inside your menu. See how Shop has a nested menu item called Women, which has its own nested menu items.
In the Shopify admin, you can drag-and-drop to reorder and nest your menu items. When you're finished, it might look like this::
To learn more about how Shopify menus work, see Shopify's Menus and links guide.
Set up a mega nav menu
To set up a mega nav menu:
Settings reference
For each mega navigation you add, the following settings are available:
Dropdown parent link
Add text that matches a top-level menu item in your store's main navigation menu.
This link is used to activate the mega nav menu. Sub-menus are populated beneath this parent link.
Mega nav featured image
Select or upload a feature image to be displayed as part of the mega nav menu.
If the image is taller or wider than 4:3 (width:height), it is center-cropped and displayed as a 4:3 image.
Menu styles
Ira's header has two distinct menu styles: Inline links, and Menu icon.
Inline links
On desktop devices with Inline links enabled, Ira's header displays your menu links in one clean line: :
This setting is most effective with 3-6 top level menu items. If there are too many items in your navigation, the links will become horizontally scrollable. If you have a lot of links, we suggest organizing them in the second level with a mega navigation menu.
Menu icon
The Menu icon always appears on mobile devices, but you can also enable it to display at all times. Note that the mega navigation menu is only available for the inline links navigation style. :
Whenever the menu icon (☰) is clicked, the drawer menu is toggled. Ira's drawer menu features a search box and a navigation menu. The bottom of the menu can display account links, a language selector, and a currency picker. Learn more about these here.
Note that if your header is set to use the Inline links style, the menu icon only appears on mobile devices. Customers can still navigate and search using the main menu and search icon (🔍 ).
Settings reference
If you have customer accounts enabled, customers can also register or log in from the drawer menu. If your store offers multiple languages or sells in multiple currencies, customers can switch languages and currency from the drawer menu. :
You can learn more about offering your store in multiple languages by reading Shopify's Selling in multiple languages guide.
You can learn more about offering your store with multiple currencies from Shopify's Sell in multiple currencies with Shopify Payments documentation.
Accounts are a Shopify feature. See Shopify's Customer accounts documentation for more information.
Last updated