Double header, for online wineshop

Store Design
1

Can Somebody help me? I want a double header? I show I picture of a site that’s using the header I would like to use. how do I do this?

Scherm­afbeelding 2025-09-18 om 21.27.10
Scherm­afbeelding 2025-09-18 om 21.27.102428×208 35.5 KB

2

@Charcopp14 What is your website?

3

This will require custom coding, and it comes with some certain themes, what theme do you make use of the feature may be turned off

4

This would definitely require some coding, do you have your way around coding ?

5

@Charcopp14 Got it :+1: Thanks for sharing the screenshot. What you’re looking at is a double header layout (two rows of navigation stacked: the top with logo / account / cart, and the bottom with categories / menu).

You can achieve this in Shopify (or any theme) with a few approaches:

Option 1: Theme Customizer (if supported)

  • Some premium themes (like Prestige, Impulse, Warehouse) already support “double navigation” or “secondary menu.”

  • Check Online Store → Navigation → Menus to see if your theme allows assigning a secondary menu.

  • If it does, you can assign one to show below your primary header.

Option 2: Edit Theme Code

If your theme doesn’t have it built in, you can add it:

  1. Go to Online Store → Themes → Edit Code

  2. Find your header section (usually header.liquid in Sections).

  3. Inside the header container, add a new <nav> block for your second menu:

<!-- Existing header code (logo, search, cart, etc.) -->

<!-- New secondary navigation -->
<nav class="secondary-nav">
  <ul>
    {% for link in linklists['main-menu-2'].links %}
      <li><a href="{{ link.url }}">{{ link.title }}</a></li>
    {% endfor %}
  </ul>
</nav>

:warning: Replace "main-menu-2" with the name/handle of the menu you create in Navigation.

  1. Add CSS to style it stacked below your main nav:
.secondary-nav {
  background: #fff;  /* Or your theme’s background */
  padding: 8px 20px;
  border-top: 1px solid #eee;
  text-align: center;
}

.secondary-nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  justify-content: center;
  gap: 20px;
}

Option 3: Use a Page Builder App

If you’re not comfortable editing Liquid, apps like Ecomposer, GemPages, PageFly can build a double-header layout visually.

:white_check_mark: Recommendation: If you’re using a custom theme and want a clean double header like your screenshot, I suggest Option 2 (adding a secondary nav in header.liquid).

6

Hi @Charcopp14,

Please send the website link, I will check it for you

7

I use the Dawn theme but I adapted the lay-out with some custom coding. So I have basic experience but not enough to figure this out

8

Do you need my shopify website link?

9

My website is www.vientodelvino.com

10

I use the Dawn theme and then costumized it with some coding