Menu de Categorias com produto

Snippet para criar um menu de categorias, exibindo um produto junto com os demais níveis de categorias.

HTML

{#
# Listagem de produto junto com 3 níveis de categorias
# elements/snippets/menu_product.html
#}
<nav class="nav">
    <ul class="list">
        {% for category in categories %}
            <li class="first-level">
                
                <a href="{{ category.link }}" title="{{ category.name }}">
                    {{ category.name }}
                </a>

                {% if category.children  %}
                    <div class="sub-line-category product-sub">
                        
                        <ul class="sub-list second-level">
                            {% for level2 in category.children %}
                                <li>
                                    
                                    <a href="{{ level2.link }}" title="{{ level2.name }}">
                                        {{ level2.name }}
                                    </a>

                                    {% if level2.children %}
                                    <ul class="sub-list third-level">
                                        {% for level3 in level2.children %}
                                            <li>
                                                <a href="{{ level3.link }}" title="{{ level3.name }}">
                                                    {{ level3.name }}
                                                </a>
                                            </li>
                                        {% endfor %}
                                    </ul>
                                    {% endif %} 

                                </li>
                            {% endfor %}   
                        </ul>   

                        {% element 'snippets/product_category' {"id": category.id } %}

                    </div>         
                {% endif %}

            </li>
        {% endfor %}
    </ul>
</nav>   

CSS

.nav{
    position: relative;
}

.nav .list{
    position: relative; 
    display: flex;
    justify-content: space-between;   
}

.nav .list > li > a{
    position: relative;
    text-align: center;
    cursor: pointer;
}

.nav .product-sub{
    position: absolute;
    top: calc(100% - 40px);
    min-width: 275px;
    width: auto;
    padding: 2.06rem 2.5rem;
    opacity: 0;
    visibility: hidden;
    background-color: #fff;
    box-shadow: 0 4px 8px rgb(0 0 0 / 6%); 
    transform: translateY(40px);
    overflow-y: scroll;
    transition: ease-out 0.2s;      
    display: flex;
    justify-content: space-between; 
}

.nav .first-level:hover .product-sub{
    opacity: 1;
    visibility: visible;
}

Como usar

Copie o código acima e crie um arquivo separado, ex: elements/snippets/menu_product.html

Faça a chamada desse arquivo onde desejar:

{% element('snippets/menu_product') %}

Criar o arquivo elements/snippets/product_category.html conforme o código abaixo que faz as validações de qual produto exibir no menu. No exemplo ira retornar um produto que esteja disponível. Caso deseje, alterar o filtro para retornar produto em destaque, lançamento, ...

{#
# Validações do produto
# elements/snippets/product_category.html
#}

{% set productCategory = Products({
    'filter': ['available'],
    'limit': 1,
    'categories': [id]
}) %}

{% if productCategory %}     
    <div class="col-product">
        {% for item in productCategory %} 
            {% element 'snippets/product' { 
                "product": item
            } %}
        {% endfor %}
    </div>
{% endif %}

O arquivo snippets/product.html deve ser o arquivo que monta os produtos da listagem. Caso o utilizado seja diferente, alterar essa chamada.