Code du thème Base

layout/theme.html

<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
{% davcode_head %}
<link rel="stylesheet" href="{{ "theme.css" | asset_url }}">
</head>
<body class="t-font-{{ settings.font }} t-radius-{{ settings.radius }} t-cols-{{ settings.products_per_row }} page-{{ request.page_type }}">
<a class="skip" href="#contenu">Aller au contenu</a>
<div class="announce" data-dc-announcement{% unless shop.announcement %} hidden{% endunless %}>{{ shop.announcement }}</div>

<header class="site-header">
  <div class="wrap header-row">
    <details class="mobile-nav">
      <summary aria-label="Menu"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M3 6h18M3 12h18M3 18h18"/></svg></summary>
      <nav class="mobile-panel" aria-label="Catégories">
        {% for c in menu %}
          <a class="m-top" href="{{ c.url }}">{{ c.name }}</a>
          {% for s in c.children %}<a class="m-sub" href="{{ s.url }}">{{ s.name }}</a>{% endfor %}
        {% endfor %}
        {% for p in pages %}<a class="m-page" href="{{ p.url }}">{{ p.title }}</a>{% endfor %}
      </nav>
    </details>

    <a class="brand" href="{{ shop.url }}">
      {% if shop.logo %}<img src="{{ shop.logo }}" alt="{{ shop.name }}">{% else %}{{ shop.name }}{% endif %}
    </a>

    {% if modules.catalog and show.header_search %}
    <form class="search" action="{{ shop.search_url }}" method="get" role="search" data-suggest="{{ shop.suggest_url }}">
      {% for f in shop.search_fields %}<input type="hidden" name="{{ f.name }}" value="{{ f.value }}">{% endfor %}
      <input type="search" name="q" value="{{ request.q }}" placeholder="Rechercher un produit" aria-label="Rechercher un produit" autocomplete="off" role="combobox" aria-autocomplete="list" aria-expanded="false" aria-controls="suggestions">
      <button type="submit" aria-label="Rechercher"><svg viewBox="0 0 24 24" aria-hidden="true"><circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/></svg></button>
    </form>
    {% else %}<span class="header-spacer"></span>{% endif %}

    <div class="header-actions">
      {% if modules.booking and not modules.shop %}<a class="btn btn-small header-cta" href="{{ shop.booking_url }}">Prendre rendez-vous</a>{% endif %}
      {% if modules.accounts %}
      <a class="h-action" href="{{ shop.account_url }}">
        <svg viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="8" r="4"/><path d="M4 21c1.5-4 4.5-6 8-6s6.5 2 8 6"/></svg>
        <span>{% if customer %}Bonjour {{ customer.first_name | default: "!" }}{% else %}Mon compte{% endif %}</span>
      </a>
      {% endif %}
      {% if modules.shop %}
      <a class="h-action" href="{{ shop.cart_url }}" data-dc-cart>
        <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5 8h14l-1.2 11.2a2 2 0 0 1-2 1.8H8.2a2 2 0 0 1-2-1.8z"/><path d="M9 8V6a3 3 0 0 1 6 0v2"/></svg>
        <span>Panier</span><b class="cart-count" data-dc-cart-count>0</b>
      </a>
      {% endif %}
    </div>
  </div>

  {% if menu and show.mega_menu %}
  <nav class="mega" aria-label="Catégories">
    <ul class="wrap mega-row">
      {% for c in menu %}
      <li class="mega-item{% if c.children %} has-children{% endif %}">
        <a href="{{ c.url }}">{{ c.name }}</a>
        {% if c.children %}
        <div class="mega-panel">
          <div class="wrap mega-grid">
            {% for s in c.children %}
            <div class="mega-col">
              <a class="mega-title" href="{{ s.url }}">{{ s.name }}</a>
              {% for x in s.children | limit: 8 %}<a href="{{ x.url }}">{{ x.name }}</a>{% endfor %}
            </div>
            {% endfor %}
            <a class="mega-all" href="{{ c.url }}">Tout voir dans {{ c.name }} →</a>
          </div>
        </div>
        {% endif %}
      </li>
      {% endfor %}
    </ul>
  </nav>
  {% endif %}
</header>

<main id="contenu">
{% if notice %}<div class="wrap"><p class="notice {{ notice.type }}" role="status">{{ notice.msg }}</p></div>{% endif %}
{{ content }}
</main>

<footer class="site-footer">
  <div class="wrap footer-grid">
    <div>
      <p class="f-brand">{{ shop.name }}</p>
      {% if show.footer_contact %}
      {% if shop.contact.address %}<p>{{ shop.contact.address | newline_to_br }}</p>{% endif %}
      {% if shop.contact.phone %}<p><a href="tel:{{ shop.contact.phone | replace: " ", "" }}">{{ shop.contact.phone }}</a></p>{% endif %}
      {% if shop.contact.email %}<p><a href="mailto:{{ shop.contact.email }}">{{ shop.contact.email }}</a></p>{% endif %}
      {% endif %}
    </div>
    {% if menu %}
    <div>
      <p class="f-title">Rayons</p>
      {% for c in menu | limit: 8 %}<a href="{{ c.url }}">{{ c.name }}</a>{% endfor %}
    </div>
    {% endif %}
    <div>
      <p class="f-title">Informations</p>
      {% for p in pages %}<a href="{{ p.url }}">{{ p.title }}</a>{% endfor %}
      {% if modules.contact %}<a href="{{ shop.contact_url }}">Nous contacter</a>{% endif %}
    </div>
    {% if modules.accounts or modules.booking %}
    <div>
      <p class="f-title">{% if modules.accounts %}Mon compte{% else %}Rendez-vous{% endif %}</p>
      {% if modules.accounts %}<a href="{{ shop.account_url }}">{% if customer %}Mon compte{% else %}Se connecter{% endif %}</a>{% endif %}
      {% if modules.booking %}<a href="{{ shop.booking_url }}">Prendre rendez-vous</a>{% endif %}
    </div>
    {% endif %}
  </div>
  <div class="wrap footer-bottom">
    <span>© {{ year }} {{ shop.name }}</span>
    {% if shop.branding %}<span data-dc-branding>Boutique propulsée par davemarkets</span>{% endif %}
  </div>
</footer>
{% davcode_scripts %}
<script src="{{ "theme.js" | asset_url }}" defer></script>
</body>
</html>