Trying to add a Utility menu to my store

Technical Q&A
, ,
1

Hi! This is my first post, so my apologies in advance if I don’t provide enough details. I am trying to add an additional menu to my store. Right now, I have the dropdown menu. If at all possible, I would like to keep that. But, I want to add a Utility menu for easier navigation for first-time visitors. I am using the “Beaux” theme at the moment

1 Like
3

@RichAscend can you please share your website link? is it right now showing the hamburger menu on desktop and mobile? and you want one more?

4

Hmmmmm I’m not seeing the option to switch to “top bar” option. I did, however, make another menu. Once I know how to implement it, I will be able to switch it over.

The URL is https://kaibreartistry.shop

5

What exactly do you mean by utility menu? Where should it show up and what should it look like?

6

The menu that sits at the top of a webpage. I would like one under the top banner

7

You can create one as a section and add it above the main banner.

  1. Go to Online Store → Themes → Actions → Edit code
  2. Right click the ‘sections’ folder, ‘add new file’
  3. Name it utility-menu.liquid
  4. Paste the code
  5. Save

Then in the customize page:

  1. Click “Add section” (on the left side, inside ‘template’)
  2. Select “Utility Menu”
  3. Edit and save


<div class="utility-menu">
  <div class="utility-menu__container">
    {%- if section.settings.menu != blank -%}
      <nav class="utility-menu__nav" role="navigation">
        <ul class="utility-menu__list">
          {%- for link in linklists[section.settings.menu].links -%}
            <li class="utility-menu__item">
              <a href="{{ link.url }}" class="utility-menu__link">
                {{ link.title }}
              </a>
            </li>
          {%- endfor -%}
        </ul>
      </nav>
    {%- endif -%}
  </div>
</div>

<style>
  .utility-menu {
    background-color: {{ section.settings.background_color }};
    border-bottom: 1px solid {{ section.settings.border_color }};
    padding: 8px 0;
    font-size: 13px;
  }

  .utility-menu__container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
  }

  .utility-menu__nav {
    display: flex;
    justify-content: {{ section.settings.alignment }};
  }

  .utility-menu__list {
    display: flex;
    gap: {{ section.settings.spacing }}px;
    list-style: none;
    margin: 0;
    padding: 0;
    flex-wrap: wrap;
  }

  .utility-menu__item {
    margin: 0;
  }

  .utility-menu__link {
    color: {{ section.settings.text_color }};
    text-decoration: none;
    transition: opacity 0.2s ease;
  }

  .utility-menu__link:hover {
    opacity: 0.7;
  }

  @media screen and (max-width: 749px) {
    .utility-menu {
      font-size: 12px;
    }
    
    .utility-menu__list {
      gap: {{ section.settings.spacing | divided_by: 2 }}px;
    }
  }
</style>

{% schema %}
{
  "name": "Utility Menu",
  "settings": [
    {
      "type": "link_list",
      "id": "menu",
      "label": "Menu",
      "default": "footer",
      "info": "Select which menu to display"
    },
    {
      "type": "select",
      "id": "alignment",
      "label": "Alignment",
      "options": [
        {
          "value": "flex-start",
          "label": "Left"
        },
        {
          "value": "center",
          "label": "Center"
        },
        {
          "value": "flex-end",
          "label": "Right"
        }
      ],
      "default": "center"
    },
    {
      "type": "range",
      "id": "spacing",
      "min": 10,
      "max": 40,
      "step": 2,
      "unit": "px",
      "label": "Link spacing",
      "default": 20
    },
    {
      "type": "color",
      "id": "background_color",
      "label": "Background color",
      "default": "#f8f8f8"
    },
    {
      "type": "color",
      "id": "text_color",
      "label": "Text color",
      "default": "#333333"
    },
    {
      "type": "color",
      "id": "border_color",
      "label": "Border color",
      "default": "#e0e0e0"
    }
  ],
  "presets": [
    {
      "name": "Utility Menu"
    }
  ]
}
{% endschema %}

image
image1437×619 62.1 KB

1 Like
8

This worked!!! Thank you!!

1 Like