Skip to main content
HashnodeUntitled PublicationUntitled Publication

Command Palette

Search for a command to run...

Shopify - Add Sub-Collections

Updated
•24 min read
A
Al-Mooradi

The theme used in this article is Horizon

Collections Custom Metafield

  1. Go to Settings > Metafields and metaobjects

  2. Click on Collections

  3. Then click on Add definition on the top right

  4. In the Name field, enter “Subcollections”

  5. In the Type field, select “List” instead of “One”, then select “Collection”

Theme Edits

snippets/header-menu.liquid

{% liquid
  assign block_settings = block.settings
  assign menu_content_type = block_settings.menu_style | default: 'text'
  assign image_border_radius = block_settings.image_border_radius
  assign color_scheme_classes = ''
  assign color_scheme_setting_id = 'color_scheme_' | append: section.settings.menu_row
  assign current_color_scheme = block_settings.color_scheme
  assign parent_color_scheme = section.settings[color_scheme_setting_id]

  if parent_color_scheme.id != current_color_scheme.id
    assign color_scheme_classes = ' color-' | append: current_color_scheme
  endif

  # Check if header and menu colors match. This is used to apply different padding styles in css
  if parent_color_scheme.settings.background.rgb == current_color_scheme.settings.background.rgb
    assign color_scheme_classes = color_scheme_classes | append: ' color-scheme-matches-parent'
  endif

  if block_settings.menu_style == 'featured_collections'
    assign ratio = block_settings.featured_collections_aspect_ratio
  elsif block_settings.menu_style == 'featured_products'
    assign ratio = block_settings.featured_products_aspect_ratio
  endif
%}

{% capture children %}
  {% for link in block_settings.menu.links %}
    <li
      role="presentation"
      class="menu-list__list-item"
      on:focus="/activate"
      on:blur="/deactivate"
      on:pointerenter="/activate"
      on:pointerleave="/deactivate"
    >
      <a
        href="{{ link.url }}"
        data-skip-node-update="true"
        class="menu-list__link{% if link.active %} menu-list__link--active{% endif %}"
        {%- if link.links != blank -%}
          aria-controls="submenu-{{ forloop.index }}"
          aria-haspopup="true"
          aria-expanded="false"
        {%- endif -%}
        ref="menuitem"
      >
        <span class="menu-list__link-title">{{- link.title -}}</span>
      </a>
      {%- if link.links != blank -%}
        <div class="menu-list__submenu{{ color_scheme_classes }}" ref="submenu[]">
          <div
            id="submenu-{{ forloop.index }}"
            class="menu-list__submenu-inner"
            style="{% render 'submenu-font-styles', settings: block_settings %}"
          >
            {% assign list_id = 'MegaMenuList-' | append: forloop.index %}
            {% render 'mega-menu',
              section: section,
              parent_link: link,
              id: list_id,
              menu_content_type: menu_content_type,
              content_aspect_ratio: ratio,
              image_border_radius: image_border_radius
            %}
          </div>
        </div>
      {% elsif link.type == 'collections_link' %}
        <div class="collections-mega-menu{{ color_scheme_classes }}" ref="submenu[]">
          <div class="collections-mega-menu__inner">
            <ul class="collections-mega-menu__list">
              {%- comment -%} 
                1. Create a "blacklist" of IDs that are used as subcollections 
              {%- endcomment -%}
              {%- assign sub_ids = "" -%}
              {%- for collection in collections -%}
                {%- if collection.metafields.custom.subcollections.value != blank -%}
                  {%- for sub in collection.metafields.custom.subcollections.value -%}
                    {%- assign sub_ids = sub_ids | append: sub.id | append: "," -%}
                  {%- endfor -%}
                {%- endif -%}
              {%- endfor -%}

              {%- comment -%} 
                2. FIRST PASS: Main Parents (Collections that HAVE sub-items)
              {%- endcomment -%}
              {%- for collection in collections -%}
                {%- assign collection_id = collection.id | append: "" -%}
                {%- unless sub_ids contains collection_id -%}
                  {%- assign sub_links = collection.metafields.custom.subcollections.value -%}
                  {%- if sub_links != blank -%}
                    <li class="collections-mega-menu__item has-subcollections">
                      <a href="{{ collection.url }}" class="collections-mega-menu__link">
                        <span class="link-text">{{ collection.title }}</span>
                        <span class="icon-arrow">
                          <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="9 18 15 12 9 6"></polyline></svg>
                        </span>
                      </a>
                      <ul class="collections-mega-menu__sublist">
                        {%- for sub in sub_links -%}
                          <li class="collections-mega-menu__subitem">
                            <a href="{{ sub.url }}" class="collections-mega-menu__sublink">{{ sub.title }}</a>
                          </li>
                        {%- endfor -%}
                      </ul>
                    </li>
                  {%- endif -%}
                {%- endunless -%}
              {%- endfor -%}

              {%- comment -%} 
                3. SECOND PASS: Standalone Collections (No sub-items AND not a sub-item itself)
              {%- endcomment -%}
              {%- for collection in collections -%}
                {%- assign collection_id = collection.id | append: "" -%}
                {%- unless sub_ids contains collection_id -%}
                  {%- assign sub_links = collection.metafields.custom.subcollections.value -%}
                  {%- if sub_links == blank and collection.all_products_count > 0 -%}
                    <li class="collections-mega-menu__item">
                      <a href="{{ collection.url }}" class="collections-mega-menu__link">
                        <span class="link-text">{{ collection.title }}</span>
                      </a>
                    </li>
                  {%- endif -%}
                {%- endunless -%}
              {%- endfor -%}

            </ul>
          </div>
        </div>
      {%- endif -%}
    </li>
  {% endfor %}
  <li
    class="menu-list__list-item"
    role="presentation"
    slot="more"
    on:focus="/activate"
    on:blur="/deactivate"
    on:pointerenter="/activate"
    on:pointerleave="/deactivate"
  >
    <button role="menuitem" class="button menu-list__link button-unstyled">
      <span class="menu-list__link-title">{{ 'actions.more' | t }}</span>
    </button>
  </li>
{% endcapture %}

<nav header-menu>
  <div
    class="menu-list"
    style="{% render 'menu-font-styles', settings: block_settings %}"
  >
    {% assign class = 'overflow-menu' | append: color_scheme_classes %}
    {% render 'overflow-list',
      class: class,
      ref: 'overflowMenu',
      children: children,
      minimum-items: 2,
      data-testid: 'header-menu-overflow-list',
      attributes: 'data-skip-node-update'
    %}
  </div>
</nav>

{% stylesheet %}
    /* --- Global Variables & Resets --- */
    .menu-list__link {
      display: inline-flex;
      align-items: center;
      padding: 0.5rem 1rem;
      text-decoration: none;
      color: inherit;
      position: relative;
      transition: color 0.2s ease;
    }

    .menu-list__link-content {
      display: flex;
      align-items: center;
      gap: 6px; /* Spacing between text and arrow */
    }

    /* SVG Icon Styling */
    .icon-chevron-down {
      transition: transform 0.3s ease;
      width: 10px;
      height: 10px;
    }

    .menu-list__list-item {
      position: relative;
    }

    /* Rotate icon on hover/focus */
    .menu-list__list-item:hover .icon-chevron-down,
    .menu-list__list-item:focus-within .icon-chevron-down {
      transform: rotate(180deg);
    }

    /* --- Desktop/Tablet Hover Effects (Pill Shape) --- */
    @media screen and (min-width: 750px) {
      .menu-list__link::before {
        content: '';
        position: absolute;
        inset: 0;
        background-color: rgba(0, 0, 0, 0.05); /* Light gray pill */
        border-radius: 999px;
        opacity: 0;
        transform: scale(0.95);
        transition: all 0.2s ease-out;
        z-index: -1;
      }

      .menu-list__link:hover::before,
      .menu-list__link:focus::before {
        opacity: 1;
        transform: scale(1);
      }
    }

    /* --- Mega Menu Container (Shared Styles) --- */
    .collections-mega-menu,
    .menu-list__submenu {
      position: absolute;
      top: 100%;
      left: 0;
      width: 250px;
      z-index: 100;

      /* Animation Initial State */
      opacity: 0;
      visibility: hidden;
      transform: translateY(10px); /* Slide up effect start */
      transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }

    /* Reveal Mega Menu on Hover/Focus */
    .menu-list__list-item:hover .collections-mega-menu,
    .menu-list__list-item:focus-within .collections-mega-menu,
    .menu-list__list-item:hover .menu-list__submenu,
    .menu-list__list-item:focus-within .menu-list__submenu {
      opacity: 1;
      visibility: visible;
      transform: translateY(0); /* Slide up effect end */
    }

    /* --- Collections Mega Menu Inner --- */
    .collections-mega-menu__inner {
      padding: 0 1rem;
      max-height: 90vh;
      margin: 10px auto 0; /* Slight offset from header */
      background: white;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
      border-radius: 10px; /* Rounded corners */
      border: 1px solid rgba(0, 0, 0, 0.05);
    }

    /* Grid Layout */
    .collections-mega-menu__grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 0.5rem 1.5rem; /* Vertical gap larger for readability */
      list-style: none;
      margin: 0;
      padding: 0;
    }
    /* List Layout */
    .collections-mega-menu__list {
      list-style: none;
      margin: 0;
      padding: 10px 0;
      position: relative;
    }

    .collections-mega-menu__item {
      margin: 0;
      position: relative;
    }

    .collections-mega-menu__link {
      display: flex;
      align-items: center;
      padding: 0.5rem 0;
      color: #666;
      text-decoration: none;
      font-weight: 500;
      transition: color 0.2s ease, padding-left 0.2s ease;
    }
    .collections-mega-menu__link {
      justify-content: space-between;
      padding: 12px 20px;
      transition: background 0.2s ease;
    }

    /* Micro-interaction on items */
    .collections-mega-menu__link:hover {
      color: #444; /* Darker/Brand color */
    }

    /* Tablet - 3 columns */
    @media screen and (min-width: 990px) and (max-width: 1200px) {
      .collections-mega-menu__grid {
        grid-template-columns: repeat(3, 1fr);
      }
    }

    /* Tablet - 2 columns */
    @media screen and (min-width: 750px) and (max-width: 990px) {
      .collections-mega-menu__grid {
        grid-template-columns: repeat(2, 1fr);
      }
    }


    /* Image Wrapper - ensures a perfect square for the circle */
    .collections-mega-menu__image-wrapper {
      width: 50px;
      height: 50px;
      flex-shrink: 0;
      border-radius: 50%; /* Change to 8px or 12px for rounded squares */
      overflow: hidden;
      background-color: #f5f5f5;
      margin-right: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: transform 0.3s ease;
      box-shadow: 0 2px 10px #00000033;
    }

    .collections-mega-menu__image {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    /* Hover effect for the image when the link is hovered */
    .collections-mega-menu__link:hover .collections-mega-menu__image-wrapper {
      transform: scale(1.1);
    }

    /* Placeholder SVG styling */
    .placeholder-svg {
      width: 100%;
      height: 100%;
      fill: #ccc;
    }

    /* Adjust the link layout to align image and text */
    .collections-mega-menu__link {
      display: flex;
      align-items: center;
      padding: 8px 0;
    }

    /* Mobile Adjustments */
    @media screen and (max-width: 989px) {
      .collections-mega-menu__image-wrapper {
        width: 40px;
        height: 40px;
        margin-right: 15px;
      }
    }


    /* Sub-collection List (The Flyout) */
  .collections-mega-menu__sublist {
    position: absolute;
    top: 0;
    left: 100%; /* Push to the right of the parent */
    width: 250px;
    background: white;
    max-height: 70vh;
    border-left: 1px solid #eee;
    box-shadow: 10px 0 30px rgba(0, 0, 0, 0.05);
    list-style: none;
    padding: 10px 0;
    overflow-y: auto;
    border-radius: 10px;

    /* Hide by default */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease;
  }

  /* Show flyout on hover */
  .collections-mega-menu__item:hover > .collections-mega-menu__sublist {
    opacity: 1;
    visibility: visible;
  }

  .collections-mega-menu__sublink {
    display: block;
    padding: 5px 15px;
    text-decoration: none;
    color: #666;
  }

  .collections-mega-menu__sublink:hover {
    color: #000;
    background-color: #f9f9f9;
  }

  /* Arrow Icon styling */
  .icon-arrow {
    width: 12px;
    height: 12px;
    opacity: 0.5;
  }
{% endstylesheet %}

snippets/header-drawer.liquid

{%- doc -%}
  Renders a header drawer menu triggered by the top details element.

  @param {object} linklist - The linklist to render
  @param {string} [class] - Additional classes to add to the drawer
  @param {string} [data_header_drawer_type] - The type of header drawer to render
  @param {object} [block] - The block that can be used to provide settings
  @param {object} [section] - The section that can be used to provide settings

  @example
  {% render 'header-drawer', linklist: section.settings.menu, class: 'header-drawer--mobile' %}
{%- enddoc -%}

{% liquid
  assign block_settings = block.settings
  assign max_featured_items = 4
  assign image_border_radius = block_settings.image_border_radius

  if block_settings.menu_style == 'featured_collections'
    assign ratio = block_settings.featured_collections_aspect_ratio
  elsif block_settings.menu_style == 'featured_products'
    assign ratio = block_settings.featured_products_aspect_ratio
  endif

  ##
  # We only eager load heavy elements of the page when rendering this template
  # through the Section Rendering API.
  #
  # This keeps the initial render lightweight, minimizing the impact on TTFB.
  # The second render then refreshes the page with additional content.
  #
  # At the moment, we check if the Section Rendering API is being used by
  # checking if section.index is blank.
  assign eager_loading = false
  if section.index == blank
    assign eager_loading = true
  endif
%}

<script
  src="{{ 'header-drawer.js' | asset_url }}"
  type="module"
  fetchpriority="low"
></script>

<header-drawer
  class="header-drawer {{ class }}"
  style="--menu-image-border-radius: {{ image_border_radius }}px; --resource-card-corner-radius: {{ image_border_radius }}px;"
>
  <details
    id="Details-menu-drawer-container"
    data-skip-node-update="true"
    class="menu-drawer-container"
    ref="details"
    scroll-lock
  >
    <summary
      class="header__icon header__icon--menu header__icon--summary"
      aria-label="{{ 'accessibility.menu' | t }}"
      on:click="/toggle"
    >
      <span class="svg-wrapper header-drawer-icon header-drawer-icon--open">
        {{- 'icon-menu.svg' | inline_asset_content -}}
      </span>
      <span class="svg-wrapper header-drawer-icon header-drawer-icon--close">
        {{- 'icon-close.svg' | inline_asset_content -}}
      </span>
    </summary>
    <div
      data-header-drawer
      class="
        menu-drawer
        motion-reduce
        color-{{ block_settings.color_scheme }}
      "
    >
      <button
        class="button button-unstyled close-button menu-drawer__close-button"
        type="button"
        aria-label="{{ 'actions.close' | t }}"
        on:click="/close"
      >
        <span class="svg-wrapper header-drawer-icon header-drawer-icon--close">
          {{- 'icon-close.svg' | inline_asset_content -}}
        </span>
      </button>
      <nav
        class="menu-drawer__navigation"
        style="
          {%- render 'menu-font-styles', settings: block_settings, menu_type: 'drawer' %}
          {%- render 'submenu-font-styles', settings: block_settings %}
        "
      >
        <ul
          class="menu-drawer__menu has-submenu"
          role="list"
        >
          {%- comment -%}
            Handle menus with fewer than 3 levels of links
          {%- endcomment -%}
          {% if linklist.levels < 3 %}
            {% assign first_accordion_open = false %}
            {% assign animation_index = 0 %}
            {%- for link in linklist.links -%}
              {% assign animation_index = animation_index | plus: 1 %}
              <li
                style="--menu-drawer-animation-index: {{ animation_index }};"
                class="{%- if block_settings.drawer_accordion -%}menu-drawer__list-item--deep{%- else -%}menu-drawer__list-item--flat{%- endif -%}{% if block_settings.drawer_dividers %} menu-drawer__list-item--divider{% endif %}"
              >
                {% if block_settings.drawer_accordion and link.links != blank %}
                  {%- comment -%}
                    Accordion for links with children, in menus with fewer than 3 levels of links
                  {%- endcomment -%}
                  {% liquid
                    assign accordion_state = ''
                    if first_accordion_open == false and block_settings.drawer_accordion_expand_first
                      assign first_accordion_open = true
                      assign accordion_state = 'open-by-default-on-mobile'
                    endif
                  %}
                  <accordion-custom {{ accordion_state }}>
                    <details
                      id="Details-menu-drawer-{{ link.handle }}"
                    >
                      <summary
                        id="HeaderDrawer-{{ link.handle }}"
                        class="menu-drawer__menu-item menu-drawer__menu-item--mainlist menu-drawer__animated-element focus-inset"
                      >
                        <span class="menu-drawer__menu-item-text wrap-text">{{ link.title | escape }}</span>
                        <span class="svg-wrapper icon-plus">
                          {{- 'icon-plus.svg' | inline_asset_content -}}
                        </span>
                      </summary>
                      {% liquid
                        assign render_link_image = false
                        if block_settings.menu_style == 'collection_images'
                          assign catalog_links = link.links | where: 'type', 'catalog_link'
                          assign collection_list_links = link.links | where: 'type', 'collections_link'
                          assign collection_links = link.links | where: 'type', 'collection_link'
                          if catalog_links.size > 0 or collection_list_links.size > 0 or collection_links.size > 0
                            assign render_link_image = true
                          endif
                        endif
                      %}
                      <ul
                        class="menu-drawer__menu menu-drawer__menu--childlist menu-drawer__animated-element details-content{% if render_link_image %} menu-drawer__menu--grid{% endif %}"
                        role="list"
                        tabindex="-1"
                      >
                        {%- for childlink in link.links -%}
                          <li
                            class="menu-drawer__list-item"
                            style="--menu-drawer-animation-index: {{ forloop.index }};"
                          >
                            <a
                              id="HeaderDrawer-{{ link.handle }}-{{ childlink.handle }}"
                              href="{{ childlink.url }}"
                              class="menu-drawer__menu-item menu-drawer__menu-item--child focus-inset{% if childlink.current %} menu-drawer__menu-item--active{% endif %}"
                              {% if childlink.current %}
                                aria-current="page"
                              {% endif %}
                            >
                              {% if render_link_image %}
                                {% render 'link-featured-image',
                                  link: childlink,
                                  class: 'menu-drawer__link-image',
                                  sizes: 'auto, 400px'
                                %}
                              {% endif %}
                              <span class="menu-drawer__menu-item-text wrap-text">{{ childlink.title | escape }}</span>
                            </a>
                          </li>
                        {%- endfor -%}
                      </ul>
                    </details>
                  </accordion-custom>
                {% elsif block_settings.drawer_accordion == false and link.links != blank %}
                  {%- comment -%}
                    Flat menus for links with children, in menus with fewer than 3 levels of links
                  {%- endcomment -%}
                  <a
                    id="HeaderDrawer-{{ link.handle }}"
                    href="{{ link.url }}"
                    class="menu-drawer__menu-item menu-drawer__menu-item--mainlist menu-drawer__animated-element focus-inset{% if link.current %} menu-drawer__menu-item--active{% endif %}"
                    {% if link.current %}
                      aria-current="page"
                    {% endif %}
                  >
                    <span class="menu-drawer__menu-item-text wrap-text">{{ link.title | escape }}</span>
                  </a>
                  {% liquid
                    assign render_link_image = false
                    if block_settings.menu_style == 'collection_images'
                      assign catalog_links = link.links | where: 'type', 'catalog_link'
                      assign collection_list_links = link.links | where: 'type', 'collections_link'
                      assign collection_links = link.links | where: 'type', 'collection_link'
                      if catalog_links.size > 0 or collection_list_links.size > 0 or collection_links.size > 0
                        assign render_link_image = true
                      endif
                    endif
                  %}
                  <ul
                    class="menu-drawer__menu menu-drawer__menu--childlist{% if render_link_image %} menu-drawer__menu--grid{% endif %}"
                    role="list"
                    tabindex="-1"
                  >
                    {%- for childlink in link.links -%}
                      <li
                        class="menu-drawer__list-item"
                        style="--menu-drawer-animation-index: {{ animation_index }};"
                      >
                        <a
                          href="{{ childlink.url }}"
                          class="menu-drawer__menu-item menu-drawer__menu-item--child menu-drawer__animated-element focus-inset{% if childlink.current %} menu-drawer__menu-item--active{% endif %}"
                        >
                          {% if render_link_image %}
                            {% render 'link-featured-image',
                              link: childlink,
                              class: 'menu-drawer__link-image',
                              sizes: 'auto, 400px'
                            %}
                          {% endif %}
                          <span class="menu-drawer__menu-item-text wrap-text">{{ childlink.title | escape }}</span>
                        </a>
                      </li>
                    {%- endfor -%}
                  </ul>
                {% else %}
                  {%- comment -%}
                    Simple links for links with no children (regardless of accordion setting), in menus with fewer than 3 levels of links
                  {%- endcomment -%}
                  {%- if link.type == 'collections_link' -%}
                    <div class="mobile-drawer-collections">
                      {%- comment -%} The "Trigger" link/button {%- endcomment -%}
                      <a
                        id="HeaderDrawer-{{ link.handle }}"
                        href="#"
                        class="mobile-drawer-collections__trigger menu-drawer__menu-item menu-drawer__menu-item--mainlist menu-drawer__animated-element focus-inset{% if link.current %} menu-drawer__menu-item--active{% endif %}"
                        {% if link.current %}
                          aria-current="page"
                        {% endif %}
                        aria-expanded="false"
                        onclick="this.setAttribute('aria-expanded', this.getAttribute('aria-expanded') === 'false' ? 'true' : 'false');"
                      >
                        <span class="menu-drawer__menu-item-text wrap-text">{{ link.title | escape }}</span>
                        <svg class="icon-chevron" viewBox="0 0 10 6" width="10">
                          <path fill-rule="evenodd" clip-rule="evenodd" d="M9.354.646a.5.5 0 00-.708 0L5 4.293 1.354.646a.5.5 0 00-.708.708l4 4a.5.5 0 00.708 0l4-4a.5.5 0 000-.708z" fill="currentColor"/>
                        </svg>
                      </a>

                      <div class="mobile-drawer-collections__content">
                        <ul class="mobile-drawer-collections__list" role="list">
                          {%- comment -%} 
                            1. Create a "blacklist" of IDs that are used as subcollections 
                          {%- endcomment -%}
                          {%- assign sub_ids = "" -%}
                          {%- for collection in collections -%}
                            {%- if collection.metafields.custom.subcollections.value != blank -%}
                              {%- for sub in collection.metafields.custom.subcollections.value -%}
                                {%- assign sub_ids = sub_ids | append: sub.id | append: "," -%}
                              {%- endfor -%}
                            {%- endif -%}
                          {%- endfor -%}

                          {%- comment -%} 
                            2. FIRST PASS: Main Parents (Collections that HAVE sub-items)
                          {%- endcomment -%}
                          {%- for collection in collections -%}
                            {%- assign collection_id = collection.id | append: "" -%}
                            {%- unless sub_ids contains collection_id -%}
                              {%- assign sub_links = collection.metafields.custom.subcollections.value -%}
                              {%- if sub_links != blank -%}
                                <li class="mobile-drawer-collections__item">
                                  <a href="{{ collection.url }}" class="mobile-drawer-collections__link has-subcollections">
                                    {% comment %} <div class="mobile-drawer-collections__image-container">
                                      {%- if collection.featured_image -%}
                                        <img
                                          src="{{ collection.featured_image | image_url: width: 120, height: 120, crop: 'center' }}"
                                          alt="{{ collection.featured_image.alt | escape }}"
                                          loading="lazy"
                                          width="60"
                                          height="60"
                                        >
                                      {%- else -%}
                                        {{ 'collection-1' | placeholder_svg_tag: 'placeholder-svg' }}
                                      {%- endif -%}
                                    </div> {% endcomment %}
                                    <span class="mobile-drawer-collections__title">{{ collection.title }}</span>
                                    <span class="icon-arrow">
                                      <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="9 18 15 12 9 6"></polyline></svg>
                                    </span>
                                  </a>
                                  <ul class="mobile-drawer-collections__sublist">
                                    <div class="mobile-drawer-collections__sublist--header">
                                      <svg class="close-btn" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="9 18 15 12 9 6"></polyline></svg>
                                      <span class="mobile-drawer-collections__title">{{ collection.title }}</span>
                                    </div>

                                    {%- for sub in sub_links -%}
                                      <li class="mobile-drawer-collections__item">
                                        <a href="{{ sub.url }}" class="mobile-drawer-collections__link">
                                          <span class="mobile-drawer-collections__title">{{ sub.title }}</span>
                                        </a>
                                      </li>
                                    {%- endfor -%}
                                  </ul>
                                </li>
                              {%- endif -%}
                            {%- endunless -%}
                          {%- endfor -%}

                          {%- comment -%} 
                            3. SECOND PASS: Standalone Collections (No sub-items AND not a sub-item itself)
                          {%- endcomment -%}
                          {%- for collection in collections -%}
                            {%- assign collection_id = collection.id | append: "" -%}
                            {%- unless sub_ids contains collection_id -%}
                              {%- assign sub_links = collection.metafields.custom.subcollections.value -%}
                              {%- if sub_links == blank and collection.all_products_count > 0 -%}
                                <li class="mobile-drawer-collections__item">
                                <a href="{{ collection.url }}" class="mobile-drawer-collections__link">
                                  {% comment %} <div class="mobile-drawer-collections__image-container">
                                    {%- if collection.featured_image -%}
                                      <img
                                        src="{{ collection.featured_image | image_url: width: 120, height: 120, crop: 'center' }}"
                                        alt="{{ collection.featured_image.alt | escape }}"
                                        loading="lazy"
                                        width="60"
                                        height="60"
                                      >
                                    {%- else -%}
                                      {{ 'collection-1' | placeholder_svg_tag: 'placeholder-svg' }}
                                    {%- endif -%}
                                  </div> {% endcomment %}
                                  <span class="mobile-drawer-collections__title">{{ collection.title }}</span>
                                </a>
                              </li>
                              {%- endif -%}
                            {%- endunless -%}
                          {%- endfor -%}
                        </ul>
                      </div>
                    </div>
                  {% else %}
                    <a
                      id="HeaderDrawer-{{ link.handle }}"
                      href="{{ link.url }}"
                      class="menu-drawer__menu-item menu-drawer__menu-item--mainlist menu-drawer__animated-element focus-inset{% if link.current %} menu-drawer__menu-item--active{% endif %}"
                      {% if link.current %}
                        aria-current="page"
                      {% endif %}
                    >
                      <span class="menu-drawer__menu-item-text wrap-text">{{ link.title | escape }}</span>
                    </a>
                  {%- endif -%}
                {% endif %}
              </li>
            {%- endfor -%}
          {% else %}
            {%- comment -%}
              Handle menus with 3 levels of links
            {%- endcomment -%}
            {% assign animation_index = 0 %}
            {%- for link in linklist.links -%}
              {% assign animation_index = animation_index | plus: 1 %}
              <li
                class="menu-drawer__list-item"
                style="--menu-drawer-animation-index: {{ animation_index }};"
              >
                {%- if link.links != blank -%}
                  {%- comment -%}
                    Regardless of the Accordion setting, in menus with 3 levels of links, we use a details element to handle the top level of the menu for links that have children.
                  {%- endcomment -%}
                  <details
                    id="Details-menu-drawer-menu-item-{{ forloop.index }}"
                    class="menu-drawer__menu-container{% if block_settings.drawer_dividers %} menu-drawer__menu-container--divider{% endif %}"
                  >
                    <summary
                      id="HeaderDrawer-{{ link.handle }}"
                      class="menu-drawer__menu-item menu-drawer__menu-item--mainlist menu-drawer__animated-element focus-inset{% if link.child_active %} menu-drawer__menu-item--active{% endif %}"
                      on:click="header-drawer/open"
                    >
                      <span class="menu-drawer__menu-item-text wrap-text">{{ link.title | escape }}</span>
                      <span class="svg-wrapper icon-caret icon-caret--forward">
                        {{- 'icon-caret.svg' | inline_asset_content -}}
                      </span>
                    </summary>
                    <div
                      id="link-{{ link.handle | escape }}"
                      class="menu-drawer__submenu has-submenu gradient motion-reduce"
                      tabindex="-1"
                      style="--menu-drawer-animation-index: {{ animation_index }};"
                    >
                      <div class="menu-drawer__inner-submenu">
                        <div class="menu-drawer__nav-buttons">
                          <button
                            class="button menu-drawer__back-button focus-inset"
                            aria-expanded="true"
                            on:click="header-drawer/back"
                            aria-label="{{ 'actions.back' | t }}"
                          >
                            <span class="svg-wrapper icon-caret icon-caret--backward">
                              {{- 'icon-caret.svg' | inline_asset_content -}}
                            </span>
                            <span class="menu-drawer__menu-item-text wrap-text">{{ link.title | escape }}</span>
                          </button>
                          <button
                            class="button close-button menu-drawer__close-button"
                            type="button"
                            aria-label="{{ 'actions.close' | t }}"
                            on:click="header-drawer/close"
                          >
                            <span class="svg-wrapper header-drawer-icon header-drawer-icon--close">
                              {{- 'icon-close.svg' | inline_asset_content -}}
                            </span>
                          </button>
                        </div>
                        {% liquid
                          assign render_link_image = false
                          if block_settings.menu_style == 'collection_images'
                            assign catalog_links = link.links | where: 'type', 'catalog_link'
                            assign collection_list_links = link.links | where: 'type', 'collections_link'
                            assign collection_links = link.links | where: 'type', 'collection_link'
                            if catalog_links.size > 0 or collection_list_links.size > 0 or collection_links.size > 0
                              assign render_link_image = true
                            endif
                          endif
                        %}
                        <ul
                          class="menu-drawer__menu menu-drawer__menu--childlist{% if render_link_image and link.levels == 1 %} menu-drawer__menu--grid{% endif %}"
                          role="list"
                          tabindex="-1"
                        >
                          {% assign first_accordion_open = false -%}
                          {%- for childlink in link.links -%}
                            <li
                              class="
                                menu-drawer__list-item
                                {% if childlink.links != blank -%}
                                  {% if block_settings.drawer_accordion -%} menu-drawer__list-item--deep{% else -%} menu-drawer__list-item--flat{%- endif -%}
                                {%- endif -%}
                                {% if block_settings.drawer_dividers %} menu-drawer__list-item--divider{% endif %}
                              "
                            >
                              {%- if childlink.links == blank -%}
                                {%- comment -%}
                                  Simple links for links with no children (regardless of accordion setting), in menus with 3 levels of links
                                  This link is currently using --parent class style but --child would match the pattern on desktop
                                {%- endcomment -%}
                                <a
                                  id="HeaderDrawer-{{ link.handle }}-{{ childlink.handle }}"
                                  href="{{ childlink.url }}"
                                  class="menu-drawer__menu-item menu-drawer__menu-item--parent focus-inset{% if childlink.current %} menu-drawer__menu-item--active{% endif %}"
                                  {% if childlink.current %}
                                    aria-current="page"
                                  {% endif %}
                                >
                                  {% if render_link_image and link.levels == 1 %}
                                    {% render 'link-featured-image',
                                      link: childlink,
                                      class: 'menu-drawer__link-image',
                                      sizes: 'auto, 400px'
                                    %}
                                  {% endif %}
                                  <span class="menu-drawer__menu-item-text wrap-text">
                                    {{- childlink.title | escape -}}
                                  </span>
                                </a>
                              {%- else -%}
                                {% liquid
                                  assign accordion_state = ''
                                  if first_accordion_open == false and block_settings.drawer_accordion and block_settings.drawer_accordion_expand_first
                                    assign first_accordion_open = true
                                    assign accordion_state = 'open-by-default-on-mobile'
                                  endif
                                %}
                                {% if block_settings.drawer_accordion %}
                                  {%- comment -%}
                                    Accordion for links with children, in menus with 3 levels of links
                                  {%- endcomment -%}
                                  <accordion-custom {{ accordion_state }}>
                                    <details
                                      id="Details-menu-drawer-{{ link.handle }}-{{ childlink.handle }}"
                                    >
                                      <summary
                                        id="HeaderDrawer-{{ link.handle }}-{{ childlink.handle }}"
                                        class="menu-drawer__menu-item menu-drawer__menu-item--parent focus-inset"
                                      >
                                        <span class="menu-drawer__menu-item-text wrap-text">
                                          {{- childlink.title | escape -}}
                                        </span>
                                        <span class="svg-wrapper icon-plus">
                                          {{- 'icon-plus.svg' | inline_asset_content -}}
                                        </span>
                                      </summary>
                                      {% liquid
                                        assign render_link_image = false
                                        if block_settings.menu_style == 'collection_images'
                                          assign catalog_links = childlink.links | where: 'type', 'catalog_link'
                                          assign collection_list_links = childlink.links | where: 'type', 'collections_link'
                                          assign collection_links = childlink.links | where: 'type', 'collection_link'
                                          if catalog_links.size > 0 or collection_list_links.size > 0 or collection_links.size > 0
                                            assign render_link_image = true
                                          endif
                                        endif
                                      %}
                                      <ul
                                        class="menu-drawer__menu menu-drawer__menu--grandchildlist details-content{% if render_link_image %} menu-drawer__menu--grid{% endif %}"
                                        role="list"
                                        tabindex="-1"
                                      >
                                        {%- for grandchildlink in childlink.links -%}
                                          <li
                                            class="menu-drawer__list-item"
                                            style="--menu-drawer-animation-index: {{ forloop.index }};"
                                          >
                                            <a
                                              id="HeaderDrawer-{{ link.handle }}-{{ childlink.handle }}-{{ grandchildlink.handle }}"
                                              href="{{ grandchildlink.url }}"
                                              class="menu-drawer__menu-item menu-drawer__menu-item--child focus-inset{% if grandchildlink.current %} menu-drawer__menu-item--active{% endif %}"
                                              {% if grandchildlink.current %}
                                                aria-current="page"
                                              {% endif %}
                                            >
                                              {% if render_link_image %}
                                                {% render 'link-featured-image',
                                                  link: grandchildlink,
                                                  class: 'menu-drawer__link-image',
                                                  sizes: 'auto, 400px'
                                                %}
                                              {% endif %}
                                              <span class="menu-drawer__menu-item-text wrap-text">
                                                {{- grandchildlink.title | escape -}}
                                              </span>
                                            </a>
                                          </li>
                                        {%- endfor -%}
                                      </ul>
                                    </details>
                                  </accordion-custom>
                                {% else %}
                                  {%- comment -%}
                                    Flat menus for links with children, in menus with 3 levels of links
                                  {%- endcomment -%}
                                  <a
                                    id="HeaderDrawer-{{ link.handle }}-{{ childlink.handle }}"
                                    href="{{ childlink.url }}"
                                    class="menu-drawer__menu-item menu-drawer__menu-item--parent focus-inset{% if childlink.current %} menu-drawer__menu-item--active{% endif %}"
                                  >
                                    <span class="menu-drawer__menu-item-text wrap-text">
                                      {{- childlink.title | escape -}}
                                    </span>
                                  </a>
                                  {% liquid
                                    assign render_link_image = false
                                    if block_settings.menu_style == 'collection_images'
                                      assign catalog_links = childlink.links | where: 'type', 'catalog_link'
                                      assign collection_list_links = childlink.links | where: 'type', 'collections_link'
                                      assign collection_links = childlink.links | where: 'type', 'collection_link'
                                      if catalog_links.size > 0 or collection_list_links.size > 0 or collection_links.size > 0
                                        assign render_link_image = true
                                      endif
                                    endif
                                  %}
                                  <ul
                                    class="menu-drawer__menu menu-drawer__menu--grandchildlist details-content{% if render_link_image %} menu-drawer__menu--grid{% endif %}"
                                    role="list"
                                    tabindex="-1"
                                  >
                                    {%- for grandchildlink in childlink.links -%}
                                      <li
                                        class="menu-drawer__list-item"
                                        style="--menu-drawer-animation-index: {{ forloop.index }};"
                                      >
                                        <a
                                          id="HeaderDrawer-{{ link.handle }}-{{ childlink.handle }}-{{ grandchildlink.handle }}"
                                          href="{{ grandchildlink.url }}"
                                          class="menu-drawer__menu-item menu-drawer__menu-item--child focus-inset{% if grandchildlink.current %} menu-drawer__menu-item--active{% endif %}"
                                          {% if grandchildlink.current %}
                                            aria-current="page"
                                          {% endif %}
                                        >
                                          {% if render_link_image %}
                                            {% render 'link-featured-image',
                                              link: grandchildlink,
                                              class: 'menu-drawer__link-image',
                                              sizes: 'auto, 400px'
                                            %}
                                          {% endif %}
                                          <span class="menu-drawer__menu-item-text wrap-text">
                                            {{- grandchildlink.title | escape -}}
                                          </span>
                                        </a>
                                      </li>
                                    {%- endfor -%}
                                  </ul>
                                {%- endif -%}
                              {%- endif -%}
                            </li>
                          {%- endfor -%}
                        </ul>
                        {% liquid
                          if eager_loading
                            if block_settings.menu_style == 'featured_collections'
                              assign featured_collections = link.links | where: 'type', 'collection_link'
                            endif

                            if block_settings.menu_style == 'featured_products'
                              assign collection_linklist = link.links | where: 'type', 'collection_link' | first
                              assign featured_products_collection = collection_linklist.object
                            endif
                          else
                            assign featured_collections = null | sort
                            assign featured_products_collection = null | sort
                          endif
                        -%}

                        {% if featured_collections.size > 0 or featured_products_collection.products_count > 0 %}
                          <div
                            class="menu-drawer__featured-content menu-drawer__featured-content--childlist"
                            style="--menu-drawer-animation-index: {{ linklist.links.size | plus: 1 }};"
                          >
                            <ul class="menu-drawer__featured-content-list list-unstyled">
                              {% if featured_collections.size > 0 %}
                                {%- for collection in featured_collections limit: max_featured_items -%}
                                  <li class="menu-drawer__featured-content-list-item menu-drawer__featured-content-list-item--collection">
                                    {% render 'resource-card',
                                      resource: collection.object,
                                      resource_type: 'collection',
                                      style: 'overlay',
                                      image_aspect_ratio: ratio,
                                      image_sizes: 'auto, 400px'
                                    %}
                                  </li>
                                {%- endfor -%}
                              {% else %}
                                {% paginate featured_products_collection.products by max_featured_items %}
                                  {%- for product in featured_products_collection.products limit: max_featured_items -%}
                                    <li class="menu-drawer__featured-content-list-item menu-drawer__featured-content-list-item--product">
                                      {% render 'resource-card',
                                        resource: product,
                                        resource_type: 'product',
                                        image_aspect_ratio: ratio,
                                        image_sizes: 'auto, 400px'
                                      %}
                                    </li>
                                  {%- endfor -%}
                                {% endpaginate %}
                              {% endif %}
                            </ul>
                          </div>
                        {% endif %}
                      </div>
                    </div>
                  </details>
                {%- else -%}
                  {%- comment -%}
                    Simple links for links with no children (regardless of accordion setting), in menus with 3 levels of links
                  {%- endcomment -%}
                  <a
                    id="HeaderDrawer-{{ link.handle }}"
                    href="{{ link.url }}"
                    class="menu-drawer__menu-item menu-drawer__menu-item--mainlist menu-drawer__animated-element focus-inset{% if link.current %} menu-drawer__menu-item--active{% endif %}"
                    {% if link.current %}
                      aria-current="page"
                    {% endif %}
                  >
                    <span class="menu-drawer__menu-item-text wrap-text">{{ link.title | escape }}</span>
                  </a>
                {%- endif -%}
              </li>
            {%- endfor -%}
          {% endif %}
        </ul>
      </nav>
      <div
        class="menu-drawer__utility-links menu-drawer__animated-element"
        style="--menu-drawer-animation-index: {{ linklist.links.size }};"
      >
        {% liquid
          assign show_language = section.settings.show_language
          if localization.available_languages.size <= 1
            assign show_language = false
          endif

          assign show_country = section.settings.show_country
          if localization.available_countries.size <= 1
            assign show_country = false
          endif
        %}
        {% if data_header_drawer_type == 'mobile-drawer' and show_country or show_language %}
          {% render 'drawer-localization',
            show_country: show_country,
            show_language: show_language,
            country_style: section.settings.country_selector_style
          %}
        {%- endif -%}
      </div>

      {% liquid
        if block_settings.menu_style == 'featured_collections'
          assign top_level_featured_collections = linklist.links | where: 'type', 'collection_link'
        endif

        if eager_loading and block_settings.menu_style == 'featured_products'
          for link in linklist.links
            if link.type == 'collection_link'
              assign collection_linklist = link
              assign top_level_featured_products_collection = collection_linklist.object
              break
            elsif link.type == 'catalog_link' or link.type == 'collections_link'
              assign top_level_featured_products_collection = collections.all
              break
            endif
          endfor
        endif
      -%}
      {% if top_level_featured_collections.size > 0 or top_level_featured_products_collection.products_count > 0 %}
        <div
          class="menu-drawer__featured-content"
          style="--menu-drawer-animation-index: {{ linklist.links.size | plus: 1 }};"
        >
          <ul class="menu-drawer__featured-content-list menu-drawer__animated-element list-unstyled">
            {% if top_level_featured_collections.size > 0 %}
              {%- for collection in top_level_featured_collections limit: max_featured_items -%}
                <li class="menu-drawer__featured-content-list-item menu-drawer__featured-content-list-item--collection">
                  {% render 'resource-card',
                    resource: collection.object,
                    resource_type: 'collection',
                    style: 'overlay',
                    image_aspect_ratio: ratio,
                    image_sizes: 'auto, 400px'
                  %}
                </li>
              {%- endfor -%}
            {% elsif top_level_featured_products_collection.products_count > 0 %}
              {% paginate top_level_featured_products_collection.products by max_featured_items %}
                {%- for product in top_level_featured_products_collection.products limit: max_featured_items -%}
                  <li class="menu-drawer__featured-content-list-item menu-drawer__featured-content-list-item--product">
                    {% render 'resource-card',
                      resource: product,
                      resource_type: 'product',
                      image_aspect_ratio: ratio,
                      image_sizes: 'auto, 400px'
                    %}
                  </li>
                {%- endfor -%}
              {% endpaginate %}
            {% endif %}
          </ul>
        </div>
      {% endif %}
    </div>
    <div
      class="menu-drawer__backdrop"
      on:click="header-drawer/close"
    ></div>
  </details>
</header-drawer>

<script>
  document.addEventListener('click', function (event) {
    // Sub-Collections Navigation - Open
    const arrowClick = event.target.closest('.icon-arrow');
    if (arrowClick) {
      event.preventDefault();
      event.stopPropagation();

      const item = arrowClick.closest('.mobile-drawer-collections__item');
      if (item) {
        const sublist = item.querySelector('.mobile-drawer-collections__sublist');
        if (sublist) {
          sublist.classList.add('open');
        }
      }
    }

    // Sub-Collections Navigation - Close
    const subCollectionCloseBtn = event.target.closest('.mobile-drawer-collections__sublist--header .close-btn');
    if (subCollectionCloseBtn) {
      const sublist = subCollectionCloseBtn.closest('.mobile-drawer-collections__sublist');
      if (sublist) {
        sublist.classList.remove('open');
      }
    }
  }, false);
</script>

{% stylesheet %}
  .header__icon--menu {
    position: initial;
  }

  @media screen and (min-width: 750px) {
    .header--desktop header-menu + .header__drawer header-drawer {
      display: none;
    }
  }

  .menu-drawer-container .header__icon--summary {
    color: var(--color-foreground);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: var(--padding-lg);
  }

  .header__icon--summary .header-drawer-icon {
    margin: auto;
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
  }

  .header__drawer {
    display: flex;
    min-height: 60px;
    align-items: center;

    @media screen and (min-width: 750px) {
      min-height: 0;
    }
  }

  .header--compact .header__drawer {
    min-height: var(--minimum-touch-target);
  }

  .menu-drawer__navigation {
    padding: 0;

    @media screen and (min-width: 750px) {
      margin-top: var(--drawer-header-desktop-top);
    }
  }

  details:not([open]) .header__icon--menu .header-drawer-icon--close {
    display: none;
  }

  details[open] .header__icon--menu .header-drawer-icon--close {
    @media screen and (min-width: 750px) {
      display: none;
    }
  }

  details[open] .header__icon--menu .header-drawer-icon--open {
    display: none;

    @media screen and (min-width: 750px) {
      display: flex;
    }
  }

  .menu-drawer {
    position: fixed;
    transform: translateX(-100%);
    visibility: hidden;
    height: var(--drawer-height);
    width: var(--drawer-width);
    max-width: var(--drawer-max-width);
    z-index: var(--layer-menu-drawer);
    left: 0;
    top: 0;
    padding: 0;
    background-color: var(--color-background);
    overflow: auto;
    display: flex;
    border-right: var(--style-border-drawer);
    box-shadow: var(--shadow-drawer);
    flex-direction: column;

    @media screen and (min-width: 750px) {
      width: 25rem;
    }

    .header__drawer--desktop & {
      height: 100vh;
    }
  }

  .menu-drawer:has(details[open]) {
    overflow: initial;
  }

  .menu-drawer__backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100dvh;
    backdrop-filter: brightness(0.75);
    z-index: var(--layer-heightened);
    opacity: 0;
    transition: opacity var(--drawer-animation-speed) ease;

    .menu-open & {
      opacity: 1;
    }
  }

  .menu-drawer,
  details[open] > .menu-drawer__submenu {
    transition: transform var(--drawer-animation-speed) ease, visibility var(--drawer-animation-speed) ease,
      opacity var(--drawer-animation-speed) ease;
  }

  .menu-open > .menu-drawer,
  .menu-open > .menu-drawer__submenu:not(.menu-drawer__menu--childlist) {
    transform: translateX(0);
    visibility: visible;
    opacity: 1;
    display: flex;
    flex-direction: column;
    will-change: transform;
  }

  .menu-drawer__inner-container {
    position: relative;
    height: 100%;
  }

  .menu-drawer__navigation-container {
    display: grid;
    grid-template-rows: 1fr auto;
    align-content: space-between;
    overflow-y: auto;
    height: 100%;
  }

  .menu-drawer__inner-submenu {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow-y: auto;

    @media screen and (min-width: 750px) {
      margin-top: var(--drawer-header-desktop-top);
    }
  }

  .menu-drawer__nav-buttons {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .menu-drawer__menu {
    --menu-drawer-inline-padding: calc(var(--padding-sm) + 7px);

    list-style: none;
    padding-inline: var(--drawer-padding);
    margin-inline: 0;
    margin-block-start: 0;
  }

  .menu-drawer__menu--grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--padding-sm);
    padding-inline-end: var(--menu-drawer-inline-padding);
    padding-block-start: var(--padding-xs);
  }

  .menu-drawer__menu--childlist:not(.menu-drawer__menu--grid) {
    flex-grow: 1;
  }

  .menu-drawer__menu.has-submenu,
  .menu-drawer__menu--childlist:not(:has(.menu-drawer__animated-element)) {
    margin-block-end: var(--margin-xs);

    @media screen and (min-width: 750px) {
      margin-block-end: 2.5rem;
    }
  }

  .menu-drawer__list-item--divider {
    border-block-end: 1px solid var(--color-border);
  }

  .menu-drawer__list-item--deep:not(.menu-drawer__list-item--divider) .menu-drawer__menu {
    margin-block-start: -0.3rem;
  }

  .menu-drawer__list-item--flat.menu-drawer__list-item--divider .menu-drawer__menu {
    margin-block-start: -0.4rem;
  }

  .menu-drawer__menu-container--divider {
    border-block-end: 1px solid var(--color-border);
  }

  .menu-drawer__menu > .menu-drawer__list-item {
    display: flex;
    min-height: calc(2 * var(--padding-lg) + var(--icon-size-xs));
  }

  .menu-drawer__list-item--deep .menu-drawer__list-item,
  .menu-drawer__list-item--flat .menu-drawer__list-item {
    min-height: auto;
  }

  .menu-drawer__menu .menu-drawer__list-item--flat {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-block-end: var(--margin-md);
  }

  .menu-drawer__menu--childlist .menu-drawer__list-item--flat {
    margin-block-end: var(--margin-sm);

    @media screen and (min-width: 750px) {
      margin-block-end: var(--margin-lg);
    }
  }

  .menu-drawer__menu--childlist .menu-drawer__list-item--flat.menu-drawer__list-item--divider {
    margin-block-end: 0;
  }

  .menu-drawer__list-item--flat .menu-drawer__menu--childlist {
    width: 100%;
    padding-inline-start: 0;
  }

  .menu-drawer-container[open] .menu-drawer__animated-element {
    animation: menu-drawer-nav-open var(--drawer-animation-speed) ease-in-out;
    animation-delay: calc(var(--drawer-animation-speed) + (var(--menu-drawer-animation-index) - 1) * 0.1s);
    animation-fill-mode: backwards;
  }

  .menu-drawer__menu accordion-custom .details-content--no-animation {
    animation: none;
    visibility: visible;
    opacity: 1;
    transform: translateX(0);
    transition: none;
  }

  .menu-drawer__menu details,
  .menu-drawer__menu-item,
  .menu-drawer__menu accordion-custom {
    width: 100%;
  }

  .menu-drawer__list-item--divider .menu-drawer__menu-item:not(.menu-drawer__menu-item--child) {
    min-height: calc(2 * var(--padding-lg) + var(--icon-size-xs));
  }

  .menu-drawer__menu-item--mainlist {
    min-height: calc(2 * var(--padding-lg) + var(--icon-size-xs));
    font-family: var(--menu-top-level-font-family);
    font-style: var(--menu-top-level-font-style);
    font-weight: var(--menu-top-level-font-weight);
    font-size: var(--menu-top-level-font-size);
    line-height: var(--menu-top-level-font-line-height);
    text-transform: var(--menu-top-level-font-case);
    color: var(--menu-top-level-font-color);
    justify-content: space-between;

    &:hover {
      color: var(--menu-top-level-font-color);
    }
  }

  .menu-drawer__menu-item--parent {
    font-family: var(--menu-parent-font-family);
    font-style: var(--menu-parent-font-style);
    font-weight: var(--menu-parent-font-weight);
    font-size: var(--menu-parent-font-size);
    line-height: var(--menu-parent-font-line-height);
    text-transform: var(--menu-parent-font-case);
    color: var(--menu-parent-font-color);

    &:hover {
      color: var(--menu-parent-font-color);
    }
  }

  .menu-drawer__menu-item--child {
    font-family: var(--menu-child-font-family);
    font-style: var(--menu-child-font-style);
    font-weight: var(--menu-child-font-weight);
    font-size: var(--menu-child-font-size);
    line-height: var(--menu-child-font-line-height);
    text-transform: var(--menu-child-font-case);
    color: var(--menu-child-font-color);

    &:hover {
      color: var(--menu-child-font-color);
    }
  }

  .menu-drawer__menu--childlist summary.menu-drawer__menu-item {
    display: flex;
    width: 100%;
    padding-inline-end: 0;
  }

  .menu-drawer__list-item--deep .menu-drawer__menu,
  .menu-drawer__menu--grandchildlist {
    padding-inline-start: 0;
  }

  .menu-drawer__list-item--deep .menu-drawer__menu {
    padding-block-end: 0.5rem;
  }

  .menu-drawer__list-item--deep.menu-drawer__list-item--divider .menu-drawer__menu {
    padding-block-end: 0.3rem;
  }

  .menu-drawer__list-item--flat.menu-drawer__list-item--divider .menu-drawer__menu--grandchildlist {
    padding-block-end: 0.5rem;
  }

  .menu-drawer__menu-item {
    display: flex;
    padding: var(--padding-2xs) 0;
    position: relative;
    text-decoration: none;
    justify-content: space-between;
    align-items: center;
  }

  .menu-drawer__menu-item:has(> .menu-drawer__link-image) {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    row-gap: var(--padding-3xs);
    padding: 0;
  }

  .menu-drawer__link-image {
    width: 100%;
    position: relative;
    aspect-ratio: 16 / 9;
    object-fit: cover;
  }

  /* Fix alignment for collection image mode links without images in drawer */

  /* Target menu items in grids that have images */
  .menu-drawer__menu--grid:has(.menu-drawer__link-image) .menu-drawer__menu-item:not(:has(> .menu-drawer__link-image)) {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    row-gap: var(--padding-3xs);
    padding: 0;
  }

  .menu-drawer__menu--grid:has(.menu-drawer__link-image)
    .menu-drawer__menu-item:not(:has(> .menu-drawer__link-image))::before {
    content: '';
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    background-color: var(--color-foreground-muted);
    opacity: 0.1;
    border-radius: var(--menu-image-border-radius);
  }

  .menu-drawer__close-button {
    position: relative;
    right: auto;
    top: auto;
    width: fit-content;
    height: fit-content;
    padding: var(--padding-lg);
    will-change: transform;
  }

  .menu-drawer__back-button {
    display: flex;
    width: 100%;
    padding: var(--padding-md) var(--padding-xl);
    border: none;
    align-items: center;
    color: var(--color-foreground);
    background-color: transparent;
    text-align: left;
    text-decoration: none;
    white-space: nowrap;
    overflow-x: hidden;
    line-height: 1.2;
    box-shadow: none;
  }

  .menu-drawer__menu-item-text {
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /** Styles when the country selector is hidden */
  .menu-drawer .language-selector:not(.menu-drawer__submenu *) {
    width: fit-content;
    padding-inline-start: 0;

    .localization-form__select {
      text-align: left;
    }
  }

  .menu-drawer__menu-item > .svg-wrapper {
    width: fit-content;
    height: fit-content;
    margin: 0;
    padding-block: var(--padding-lg);
    padding-inline-start: var(--padding-xl);
    flex-shrink: 0;
  }

  .menu-drawer__list-item--divider .menu-drawer__menu-item > .svg-wrapper {
    padding-block: var(--padding-md);
  }

  .menu-drawer svg {
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
  }

  .menu-drawer__submenu {
    position: absolute;
    width: 100%;
    top: 0;
    height: 100dvh;
    left: 0;
    background-color: var(--color-background);
    z-index: var(--layer-flat);
    transform: translateX(-5%);
    visibility: hidden;
    overflow-y: auto;
    opacity: 0;
  }

  .menu-drawer__back-button > .svg-wrapper {
    margin-right: var(--padding-md);
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
  }

  .menu-drawer__utility-links {
    display: flex;
    flex-direction: column;
    padding: 0;
    margin-block: auto var(--padding-sm);
    margin-inline-start: var(--padding-xl);
    background-color: rgb(var(--color-foreground) 0.03);
  }

  .menu-drawer__account {
    display: inline-flex;
    align-items: center;
    gap: var(--gap-xs);
    text-decoration: none;
    height: 44px;
    font-size: 1.4rem;
    color: rgb(var(--color-foreground));
  }

  .menu-drawer__account svg {
    height: var(--icon-size-sm);
    width: var(--icon-size-sm);
  }

  .menu-drawer__account shop-user-avatar {
    --shop-avatar-size: 2.4rem;

    margin-right: 0.55rem;
    margin-left: -0.45rem;
  }

  .menu-drawer__link-image,
  .menu-drawer__featured-product-image,
  .menu-drawer__featured-collection-image,
  .menu-drawer__featured-collection-link::before {
    border-radius: var(--menu-image-border-radius);
  }

  @keyframes menu-drawer-nav-open {
    0% {
      visibility: hidden;
      opacity: 0;
      transform: translateX(-0.5rem);
    }

    100% {
      visibility: visible;
      opacity: 1;
      transform: translateX(0);
    }
  }

  @keyframes menu-drawer-subnav-open {
    0% {
      visibility: visible;
      opacity: 1;
      transform: translateX(0);
    }

    100% {
      visibility: hidden;
      opacity: 0;
      transform: translateX(-1rem);
    }
  }




  /* Container & Trigger */
  .mobile-drawer-collections {
    width: 100%;
  }

  .mobile-drawer-collections__trigger .icon-chevron {
    transition: transform 0.3s ease;
  }

  /* When opened: Rotate arrow and show content */
  .mobile-drawer-collections__trigger[aria-expanded="true"] .icon-chevron {
    transform: rotate(180deg);
  }

  /* Content Area - The "Dropdown" */
  .mobile-drawer-collections__content {
    display: grid;
    grid-template-rows: 0fr; /* Collapsed state */
    transition: grid-template-rows 0.3s ease-out;
    /* background-color: rgba(0, 0, 0, 0.02); */
    overflow: hidden;
  }

  .mobile-drawer-collections__trigger[aria-expanded="true"] + .mobile-drawer-collections__content {
    grid-template-rows: 1fr; /* Expanded state */
  }

  /* The Scrollable List */
  .mobile-drawer-collections__list {
    min-height: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    max-height: 350px; /* Constraints for scrollbar trigger */
    overflow-y: auto;

    /* Scrollbar styling for a premium feel */
    scrollbar-width: thin;
    scrollbar-color: rgba(0,0,0,0.2) transparent;
  }

  /* Webkit Scrollbar UI */
  .mobile-drawer-collections__list::-webkit-scrollbar {
    width: 4px;
  }
  .mobile-drawer-collections__list::-webkit-scrollbar-track {
    background: transparent;
  }
  .mobile-drawer-collections__list::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,0.1);
    border-radius: 10px;
  }

  /* List Items */
  .mobile-drawer-collections__item {
    margin: 5px 5px 0px 5px;
  }

  .mobile-drawer-collections__link {
    display: flex;
    align-items: center;
    padding: 0.5rem 1rem;
    text-decoration: none;
    color: inherit;
    justify-content: space-between;
  }

  .mobile-drawer-collections__image-container {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    overflow: hidden;
    margin-right: 15px;
    background: #fff;
    flex-shrink: 0;
    border: 1px solid rgba(0,0,0,0.05);
  }

  .mobile-drawer-collections__image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .mobile-drawer-collections__title {
    font-size: 1.4rem;
    font-weight: 400;
  }

  /* Arrow Icon styling */
  .mobile-drawer-collections__link .icon-arrow {
    padding: 10px;
  }
  .mobile-drawer-collections__link .icon-arrow,
  .mobile-drawer-collections__link .icon-arrow svg {
    width: 45px !important;
    height: 45px !important;
  }

  .mobile-drawer-collections__sublist {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    background: #fff;
    height: 100%;
    list-style: none;
    padding: 0;
    overflow-y: auto;
    border-radius: 10px;
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s ease;
    z-index: 10;
  }
  .mobile-drawer-collections__sublist.open {
    visibility: visible;
    opacity: 1;
  }
  .mobile-drawer-collections__sublist--header {
    display: flex;
    justify-content: start;
    align-items: center;
    border-bottom: 1px solid #ccc;
    padding: 10px 0;
  }

  .mobile-drawer-collections__sublist--header .close-btn {
    width: 50px;
    height: 50px;
    transform: rotate(180deg);
    padding: 10px;
  }
{% endstylesheet %}

Automatically Sync Parent Collections with Sub-Collections Products using “Flow”

You can download the workflow file here and import it to the “Flow” app in Shopify

Comments

Join the discussion

No comments yet. Be the first to comment.

More from this blog

U

Untitled Publication

12 posts