[Horizon Theme] How to manually select featured collections in the menu

[andrwmai]

Per title, the new Horizon theme has a menu feature where it can show Featured Collections. However, I notice that it automatically selects the first two collections only and doesn’t let me select the collections manually. Does anyone know some custom code to be able to select the collections manually? I'd really appreciate it.

[tim]

The theme pulls them from the Menu, first 2 menu items are shown as collection cards.

So maybe you can simply re-order your menu items?

I was thinking that maybe you can hide 2 first menu items with CSS, but on narrow desktop it shows only one collection, so the CSS rule can be complex'ish:

li:first-child:has(.mega-menu__link[href*="/collections/"]) {
  display: none;
}

@media screen and (width > 990px) {
  li:nth-child(2):has(.mega-menu__link[href*="/collections/"]) {
    display: none;
  }
}

[andrwmai]

Hi Tim, thank you for your response.

I actually thought about reordering the menu items already, but say when we have a new collection or so we’d like for it to be featured instead of having to reorder the items.

[wo]

find _header-menu.liquid， add code.

find mega-menu-list.liquid, replace code.

 {% assign collection_handles = collection_handles | split: ',' | uniq %}
    <ul
      class="mega-menu__content-list list-unstyled"
      style="--menu-content-columns-desktop: {{ max_collection_columns }}; --menu-content-columns-tablet: {{ max_collection_columns_tablet }}; --resource-card-corner-radius: {{ image_border_radius }}px;"
    >
      <span
        class="mega-menu__content-column mega-menu__content-column--collections"
        style="--menu-content-columns-desktop: {{ max_featured_collections }}; --menu-content-columns-tablet: {{ max_featured_collections_tablet }};"
      >
        {% if block.settings.featured_collections != blank %}
           {% for handle in block.settings.featured_collections limit: max_featured_collections %}
          {% # todo: ensure the hidden iamge assets don't get lazy loaded initially %}
          <li class="mega-menu__content-list-item{% if forloop.index > max_featured_collections_tablet %} mega-menu__content-list-item--hidden-tablet{% endif %}">
            {% render 'resource-card',
              resource: handle,
              resource_type: 'collection',
              style: 'overlay',
              image_width: 600,
              image_aspect_ratio: content_aspect_ratio
            %}
          </li>
        {% endfor %}
          {% else %}
          {% for handle in collection_handles limit: max_featured_collections %}
          {% # todo: ensure the hidden iamge assets don't get lazy loaded initially %}
          <li class="mega-menu__content-list-item{% if forloop.index > max_featured_collections_tablet %} mega-menu__content-list-item--hidden-tablet{% endif %}">
            {% render 'resource-card',
              resource: collections[handle],
              resource_type: 'collection',
              style: 'overlay',
              image_width: 600,
              image_aspect_ratio: content_aspect_ratio
            %}
          </li>
        {% endfor %}
        {% endif %}
      </span>
    </ul>

[andrwmai]

Hi @wo, thank you so much for your response. Correct me if I'm wrong, but your code is supposed to let me choose two featured collections, and lock it, right? So in my website, if I select two featured collections for CLOTHING, they'll also show in the other dropdowns?

Is it possible to select the featured collections for each dropdown as well? For example, for CLOTHING I want these two featured collections, and for SPORTS, I want two other featured collections.

[wo]

In this case, you need to modify it to use the collection metafields. Modify the code and set the metafields corresponding to the collection of the menu item. and the value of the metafields is the collection you want to display.