Lorenza 3.0

Header

Lorenza'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::

Set up the header

The header has a number of settings. This section walks you through each one, and what it does. Note that we'll skip the Add mega nav button until later on in the article.

To set up the header:

STEPS

  1. From your Customize theme editor, select the Header section.

  2. Choose a Header style, either Inline links or Menu icon (☰).

    The Menu icon version of the menu is always used on mobile devices.

  3. If you are using the Inline links header style, choose a Navigation alignment: either Left, Center, or Right.

    See an example of the Center alignment below. You can see that the navigation menu items have moved to the center, and the store logo has moved to the left:

  4. Select the Enable menu length detection option to automatically switch to the Menu icon (☰) header style if the menu items are too wide.

  5. Enable Show language selector and Show currency selector to display language and currency switchers in your header.

    These settings only work if your store has multiple languages and currencies enabled.

    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.

  6. (Optional.) Use the Logo image file selector to select or upload your logo file.

    We recommend using a logo with a transparent background (PNG format).

  7. (Optional.) If you added a logo, use the Custom logo size slider to change size of the logo in the header.

  8. Choose a Main menu to be displayed in the header.

    For more information about how menus work on Shopify, see their Menus and links article. You can use the Edit menu link to go edit the menu if it's not quite right.

  9. (Optional.) Configure your header to be transparent.

    For more information about this, see the Transparent header section below.

  10. (Optional.) Return to the list of Home page sections and use the Add mega nav button nested under the Header section to add a mega nav menu.

    For more information, see the Mega nav section of this article.

  11. Click Save.

Settings reference

Lorenza's header has the following settings:

Header style

Choose a menu style: either Menu icon (☰) or Inline links.

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.

Navigation alignment

Choose how the navigation items should be aligned in the header. Either Left, Center, or Right.

Alignment will only apply if header style is Inline links.

Enable menu length detection

Enable this feature to automatically switch the menu style to the mobile navigation if the menu is too wide for the header.

Show language selector

Let customers switch languages from the header.

You can learn more about offering your store in multiple languages by reading Shopify's Selling in multiple languages guide.

Show currency selector

Let customers switch currencies from the header.

You can learn more about offering your store with multiple currencies from Shopify's Sell in multiple currencies with Shopify Payments documentation.

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).

Custom logo size

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.

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.

To set up the transparent header:

STEPS

  1. From your Customize theme editor, select the Header section and scroll down the the Transparent header settings.

  2. Select the Enable on home page checkbox to turn on the transparent header.

  3. Add a Logo image to be used specifically with the transparent header. You may want to tweak this logo to look good opposite the colors of your product photography.

  4. Set the Text color and Border color to look good opposite the colors of your product photography.

  5. Use the Border opacity slider to make the border more or less visible. Where 0 is completely invisible and 10 is completely opaque.

  6. Click Save.

Settings reference

The transparent header has the following settings:

Enable on home page

Select this checkbox to enable the transparent header feature.

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.

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.

Border color

Select a color to be used for all of the borders and lines in Lorenza's header layout.

Border opacity

Use the slider to set the border opacity: where 0 is invisible and 10 is completely opaque.

Mega nav

From Lorenza'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.

Each mega nav menu has up to three columns of sub-menus.

On mobile devices, mega nav menus appear as nested drawers: :

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::

You can add one or many mega navigation menus. Our Lorenza demo, Chic has a mega nav menu enabled under the Shop menu item.

Here's a quick video tutorial on how to set it up:

Before you start

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:

Shop
  Shop
    Tops
    Bottoms
    Dresses & Skirts
    ...
  Collections
    Spring
    Summer
    Winter
    Fall
  Favourites
    Best Sellers
    New Releases
    Sale
Blog
About
Contact

Where Shop, Collections, and Favourites each turn into a menu column. And the items below (for Collections, that would be Spring, Summer, Winter, and Fall), each belong to the parent item's column.

Set up a mega nav menu

To set up a mega nav menu:

STEPS

  1. From your Customize theme editor, select the arrow beside the Header section. markdown:shopify-header-mega-nav.md

  2. Use the Add mega nav button to add a new menu.

  3. Set the Dropdown parent link. This text should match the menu with sub-menus you added to your navigation menu.

  4. (Optional.) Select or upload a Mega nav featured image to be displayed inside the mega navigation menu.

    On mobile devices, the featured image is not displayed.

  5. Underneath the featured image, you can add a Featured image caption, a Featured image link and link text, great for linking to a featured product or collection.

    On mobile devices, the caption and link are not displayed.

  6. You can also add Strapline text to the bottom of the mega nav menu.

    This text is rich text, meaning you can add links, bold, and italics to it.

    On mobile devices, the strapline text is not displayed.

  7. Make sure to use the Save button in the top-right corner when you are finished editing.

Settings reference

The following settings are available for each mega nav menu:

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.

Featured image caption

Add caption text to be displayed below the featured image.

We recommend keeping this to just a few words long.

Featured image link text

Add link text for a link that is displayed below the featured image and caption.

Featured image link

Choose a link to be used below the featured image and caption.

Strapline text

Add text to be displayed along the bottom edge of the mega nav menu.

This text can include bold and italic formatting, as well as links to other URLs.

Last updated