Code du thème Base

templates/category.html

<div class="wrap">
  {% include "breadcrumbs" %}

  <header class="cat-head{% if category.image %} with-image{% endif %}">
    <div>
      <h1>{{ category.name }}</h1>
      {% if category.description %}<p class="lead">{{ category.description }}</p>{% endif %}
    </div>
    {% if category.image %}<img src="{{ category.image }}" alt="">{% endif %}
  </header>

  {% if category.children %}
  <nav class="subcats" aria-label="Sous-catégories">
    {% for c in category.children %}
      <a class="subcat" href="{{ c.url }}">
        {% if c.image %}<img src="{{ c.image }}" alt="" loading="lazy">{% endif %}
        <span>{{ c.name }}</span>
      </a>
    {% endfor %}
  </nav>
  {% endif %}

  <div class="listing">
    <aside class="filters" aria-label="Filtres">
      <form action="{{ filters.action }}" method="get" class="filter-box">
        {% for f in filters.fields %}<input type="hidden" name="{{ f.name }}" value="{{ f.value }}">{% endfor %}
        <p class="filter-title">Prix</p>
        <div class="price-range">
          <label><span>Min €</span><input name="min" inputmode="decimal" value="{{ filters.min }}" placeholder="0"></label>
          <label><span>Max €</span><input name="max" inputmode="decimal" value="{{ filters.max }}" placeholder="∞"></label>
        </div>
        <button class="btn btn-small" type="submit">Appliquer</button>
        {% if filters.active %}<a class="clear" href="{{ filters.clear_url }}">Effacer les filtres</a>{% endif %}
      </form>
      {% for f in facets %}
      <details class="filter-box facet"{% if f.open %} open{% endif %}>
        <summary class="filter-title">{{ f.name }}{% if f.selected_count > 0 %} <small>({{ f.selected_count }})</small>{% endif %}</summary>
        <ul class="facet-values">
          {% for v in f.values %}
          <li><a class="facet-value{% if v.selected %} on{% endif %}" href="{{ v.url }}" rel="nofollow"{% if v.selected %} aria-current="true"{% endif %}>
            <span class="box" aria-hidden="true"></span><span class="facet-label">{{ v.value }}</span><small>{{ v.count }}</small>
          </a></li>
          {% endfor %}
        </ul>
      </details>
      {% endfor %}
      {% if category.children %}
      <div class="filter-box">
        <p class="filter-title">Catégories</p>
        {% for c in category.children %}<a class="filter-link" href="{{ c.url }}">{{ c.name }} <small>{{ c.product_count }}</small></a>{% endfor %}
      </div>
      {% endif %}
    </aside>

    <section class="results">
      {% if active_filters %}
      <div class="active-filters" aria-label="Filtres actifs">
        {% for a in active_filters %}<a class="chip-remove" href="{{ a.remove_url }}" rel="nofollow">{{ a.label }} <span aria-hidden="true">×</span><span class="sr-only">(retirer)</span></a>{% endfor %}
        <a class="clear" href="{{ filters.clear_url }}">Tout effacer</a>
      </div>
      {% endif %}
      <div class="toolbar">
        <p>{{ category.product_count }} {{ category.product_count | pluralize: "produit", "produits" }}</p>
        <div class="sort">
          <span>Trier :</span>
          {% for o in sort_options %}<a href="{{ o.url }}"{% if o.selected %} class="on" aria-current="true"{% endif %}>{{ o.label }}</a>{% endfor %}
        </div>
      </div>
      {% if products %}
        {% include "product-grid" %}
        {% include "pagination" %}
      {% else %}
        <div class="empty">
          <p class="empty-title">Aucun produit ici pour le moment</p>
          <p>{% if filters.active %}Aucun produit ne correspond à tous vos filtres : retirez-en un.{% else %}Revenez bientôt, ou découvrez nos autres rayons.{% endif %}</p>
          {% if filters.active %}<a class="btn" href="{{ filters.clear_url }}">Effacer les filtres</a>{% else %}<a class="btn" href="{{ shop.url }}">Retour à l'accueil</a>{% endif %}
        </div>
      {% endif %}
    </section>
  </div>
</div>