#Réglages globaux

Les réglages globaux valent pour le thème entier : les couleurs, la largeur du contenu, la typographie, l’arrondi des angles. Ils se lisent partout avec settings.<id> — dans la coquille, dans une section, dans une section de pied de page.

Deux fichiers, et la distinction entre les deux est toute la page : config/settings_schema.json déclare ce qui est réglable, config/settings_data.json valorise ces réglages pour ce site.

#settings_schema.json — déclarer

Un tableau de groupes. Chaque groupe porte un name — l’intertitre du panneau — et un tableau settings aux mêmes treize types que les schémas de section.

[
  {
    "name": "Couleurs",
    "settings": [
      { "type": "color", "id": "encre", "label": "Fond sombre et texte", "default": "#2b1b12" },
      { "type": "color", "id": "papier", "label": "Fond de page", "default": "#ffffff" },
      { "type": "color", "id": "accent", "label": "Accent", "default": "#b45309" },
      { "type": "color", "id": "creme", "label": "Crème", "info": "Le fond des bandes claires.", "default": "#fdf4e6" }
    ]
  },
  {
    "name": "Mise en page",
    "settings": [
      {
        "type": "range",
        "id": "largeur",
        "label": "Largeur du contenu",
        "min": 960,
        "max": 1440,
        "step": 40,
        "unit": "px",
        "default": 1160
      }
    ]
  }
]

Les quatre thèmes s’organisent tous de la même façon, et ça vaut la peine de copier le découpage :

#settings_data.json — valoriser

Un objet, avec une clé current. Tout ce qui est sous current devient un réglage global — sauf une clé réservée, sections.

{
  "current": {
    "encre": "#15171c",
    "papier": "#ffffff",
    "voile": "#f5f5f7",
    "accent": "#4364df",
    "accent_texte": "#ffffff",
    "police_titres": "systeme",
    "echelle": 100,
    "largeur": 1160,
    "arrondi": 12,
    "densite": 100,
    "boutons": "pilule",
    "sections": {
      "annonce": { "settings": { "texte": "Devis gratuit sous 48 h" } },
      "entete": { "settings": { "cta_label": "Nous contacter", "cta_href": "/contact" } },
      "pied": { "settings": { "mentions": true } }
    }
  }
}

#La clé sections — les sections de la coquille

L’en-tête et le pied ne sont dans aucun template : ils apparaissent sur toutes les pages. Leurs réglages n’ont donc nulle part où aller, sinon ici.

"sections": {
  "entete": {
    "settings": { "cta_label": "Nous contacter", "cta_href": "/contact" }
  },
  "pied": {
    "settings": { "mentions": true },
    "blocks": [
      { "type": "reseau", "settings": { "reseau": "Instagram", "href": "https://instagram.com/atelier" } }
    ]
  }
}

La clé est le nom de la section, celui du {% section 'entete' %} de la coquille — donc le nom du fichier. Chaque entrée accepte settings et blocks.

Les default du schéma de la section sont bien appliqués sous ces valeurs : une section de coquille qu’on ne renseigne pas du tout rend avec ses défauts.

#Lire un réglage global

Partout, avec settings.<id>. La forme canonique est de les convertir en variables CSS dans la coquille, et nulle part ailleurs.

<style>
  :root {
    --encre: {{ settings.encre }};
    --papier: {{ settings.papier }};
    --accent: {{ settings.accent }};
    --accent-sombre: {{ settings.accent | teinte: -18 }};
    --accent-clair: {{ settings.accent | teinte: 88 }};
    --largeur: {{ settings.largeur }}px;
    --arrondi: {{ settings.arrondi }}px;
    --bouton-rayon: {% if settings.boutons == 'droit' %}4px{% else %}999px{% endif %};
  }
</style>

Aucune section n’a alors besoin de connaître une couleur : elles héritent toutes de :root, et assets/theme.css reste un fichier CSS ordinaire, sans une ligne de Liquid.

#Ce qui se passe quand le JSON est cassé

Concrètement, un JSON invalide donne settings vide et sections vide. Deux conséquences distinctes :

• les réglages globaux retombent sur… rien. Il n’y a pas de fusion avec settings_schema.json : les default déclarés là ne sont jamais appliqués. {{ settings.accent }} rend une chaîne vide, et la variable CSS --accent: devient invalide — donc les couleurs du navigateur ;
• les sections de coquille, elles, retombent bien sur les default de leur propre {% schema %}, qui est lu séparément.

Une parade utile dans la coquille, tant que l’oubli reste possible :

--accent: {{ settings.accent | default: '#4364df' }};

#Les deux fichiers, côte à côte

#Ce qui vaut la peine d’être un réglage global

Ce qui doit changer partout d’un coup : couleurs, largeur, typographie, arrondi. Le test est simple — si le régler section par section serait une corvée, il est global.

Ce qui n’en est pas un : les titres, les textes, les images. Ils appartiennent à une section, et un réglage global qui ne sert qu’à un endroit est un réglage qu’on cherchera dans le mauvais panneau.

Les quatre thèmes tiennent entre 5 et 12 réglages globaux. Au-delà, un panneau ne se remplit plus — et c’est précisément à quoi sert le filtre teinte : dériver les nuances d’une couleur au lieu de les demander une par une.

#Pages voisines