# Blocs de thème

L'app ajoute trois blocs d'app à tout thème Online Store 2.0. Vous les placez dans l'éditeur de thème comme n'importe quelle section, et ils s'adaptent au thème : ils prennent les polices, les couleurs et le color scheme de leur section, et n'ajoutent que la mise en page dont ils ont besoin et ce qu'exige l'accessibilité.

Cette page est pour l'agence ou le développeur qui intègre l'app dans un thème. Elle explique quel bloc mettre où, comment régler chacun selon la marque et le thème, et comment changer leur apparence en quelques lignes de CSS. Le détail de chaque réglage est à la fin de chaque partie.

## Choisir un bloc

| Bloc | Pour | Où le placer |
| --- | --- | --- |
| **Store locator** | Trouver le point de vente le plus proche : une carte, une recherche, des filtres. Le bon choix dès que la marque a des dizaines de points de vente ou plusieurs pays. | Sur le template d'une page, par exemple « Nos boutiques ». |
| **Page point de vente** | Donner à chaque point de vente sa page, indexée par les moteurs de recherche : photos, horaires, itinéraire. | Sur le template **Store page**, une seule fois : toutes les pages l'utilisent. |
| **Liste des points de vente** | Montrer tous les points de vente d'un coup d'œil, par pays, par type ou en une grille, sans carte. Idéal pour une marque présente dans quelques pays, ou pour une page « Nos boutiques en France » ou « Nos revendeurs ». | Sur le template d'une page, à la place du store locator ou sous lui. |
| **Page pays ou ville** | Une page par pays, et par ville, qui liste ses points de vente, indexée par les moteurs de recherche. | Sur les templates **Country page** et **City page**, une fois chacun. |
| **Annuaire des boutiques** | Les liens vers les pages pays, et leurs pages villes. | Sous le store locator, ou en bas des templates des pages pays et villes. |

Les blocs sont servis par Shopify, avec la page : ils restent en ligne même si l'app est indisponible. Ils ne montrent que les points de vente actifs, chacun sur les canaux cochés sur sa fiche dans l'app (le store locator, sa page, ou les deux). Le style de carte et les marqueurs viennent des **Réglages** de l'app, communs à toute la boutique. Les cartes sont celles de Mapbox.

## Store locator

Le visiteur arrive sur une carte déjà cadrée sur sa zone, et la liste à côté garde les points de vente de cette zone ; une recherche, un filtre ou **Autour de moi** en cadrent une nouvelle. S'il déplace ou zoome la carte, la liste ne change pas : un bouton **Rechercher dans cette zone** propose la nouvelle vue, puis **Revenir à …** la liste d'avant. Sur ordinateur, la liste occupe le tiers gauche et la carte les deux tiers droits ; sur téléphone, une ligne de recherche, une carte courte, puis la liste, qui défile dans sa propre boîte.

### Choisir ce que la carte montre à l'arrivée

Une carte du monde avec trois points ne dit rien au visiteur, et une carte vide encore moins. Le réglage **Vue de la carte à l'arrivée** décide de la zone cadrée au premier affichage ; **Si aucun point de vente dans cette zone** décide du repli quand cette zone est vide.

| La marque… | Réglez **Vue de la carte à l'arrivée** sur |
| --- | --- |
| vend dans plusieurs pays avec Shopify Markets, et chaque marché a ses points de vente | **Marché de la boutique en ligne** (par défaut) : le pays choisi dans le sélecteur de pays du thème. |
| a une seule boutique en ligne pour des visiteurs de plusieurs pays | **Position du visiteur** : le pays de sa connexion, ou sa position exacte s'il l'a déjà partagée avec **Autour de moi**. |
| n'est présente que dans un pays | **Pays fixe**, avec son **Code du pays** (`FR`). |
| a peu de points de vente | **Toutes les boutiques**. |

Si la zone n'a aucun point de vente, la carte cadre par défaut le **pays le plus proche qui a des points de vente** : un visiteur belge voit la France, un visiteur japonais voit l'Europe. Une phrase sous la recherche le lui dit, pour que la carte ne paraisse pas fausse.

La vue à l'arrivée ne s'applique qu'une fois : dès que le visiteur déplace la carte, ou quand le lien qu'il a suivi porte déjà une ville ou un point de vente, elle ne joue plus.

### Lier vers une ville ou un point de vente

Le store locator garde le contexte du visiteur dans l'adresse de la page : sa recherche, la ville ou le point de vente choisi, les filtres, la position de la carte. Un visiteur qui revient d'une page de point de vente avec le bouton Retour retrouve donc la carte telle qu'il l'a laissée, et vous pouvez construire ces adresses vous-même, par exemple pour un lien depuis une campagne ou une page produit :

| Lien | Ouvre |
| --- | --- |
| `/pages/nos-boutiques?city=Lyon,FR` | La carte cadrée sur les points de vente de Lyon. |
| `/pages/nos-boutiques?store=lyon-presqu-ile` | La carte centrée sur ce point de vente (son identifiant), infobulle ouverte. |
| `/pages/nos-boutiques?q=lyon` | La recherche « lyon » tapée, sans choix. |
| `/pages/nos-boutiques?type=Flagship` | Seuls les points de vente du type **Flagship** cochés. Répétez le paramètre pour plusieurs types. |
| `/pages/nos-boutiques?service=Parking` | Seuls les points de vente qui ont ce service. |
| `/pages/nos-boutiques?at=45.76,4.83,13` | La carte à ce centre (latitude, longitude) et à ce zoom. |

Le type et le service s'écrivent comme sur le store locator, dans la langue de la page. Les autres paramètres de l'adresse sont gardés.

### Structure

Sur ordinateur, une grille place la barre de recherche et la liste dans la colonne de gauche (un tiers), la carte à droite (deux tiers). Sur téléphone, les trois s'empilent dans l'ordre du HTML, qui est aussi l'ordre de tabulation.

```text
<store-locator class="store-locator">
├─ .store-locator__toolbar         recherche, Autour de moi (.store-locator__near-me, son texte .store-locator__near-me-text), filtres, les raccourcis (.store-locator__cities, .store-locator__city-choice), .store-locator__open-map
│  ├─ .store-locator__search       le champ et ses suggestions (.store-locator__suggestions)
│  ├─ .store-locator__results      le nombre de points de vente (.store-locator__count), le bouton des filtres
│  └─ .store-locator__filter-panel les cases à cocher, un .store-locator__filter par filtre
├─ .store-locator__map             la carte, ses pastilles de groupe (.store-locator__cluster), .store-locator__area, .store-locator__back
└─ .store-locator__list            la liste
   └─ .store-locator__item         un point de vente : __city (le titre d'une ville), __nearest, __head (le nom et __distance), __name (son bouton : __locate), __type, __address,
                                   __actions (__phone, __directions, __page)
```

### Tous les réglages

| Réglage | Valeurs | Défaut | Ce qu'il fait |
| --- | --- | --- | --- |
| **Titre** | texte | « Trouver une boutique », dans la langue de l'éditeur | Le `h1` de la page, au-dessus de la carte. Vide : pas de titre. |

**Disposition de la carte**

| Réglage | Valeurs | Défaut | Ce qu'il fait |
| --- | --- | --- | --- |
| **Pleine largeur de page** | oui / non | oui | Le bloc prend toute la largeur de la page, au-delà de la colonne de la section. |
| **Remplir la hauteur de la fenêtre** | oui / non | oui | Sur ordinateur, la carte grandit avec la fenêtre, sous ce que le thème affiche au-dessus du bloc, jusqu'à la hauteur maximale : pas de grand blanc sous elle sur un grand écran. |
| **Espace au-dessus** | 0 à 200 px | 0 | Voir [Thème à en-tête fixe](#thème-à-en-tête-fixe-ou-sections-sans-marges). |
| **Marge latérale** | 0 à 80 px | 0 | Affiché quand **Pleine largeur de page** est décoché. |
| **Hauteur de la carte** | 400 à 1000 px | 680 px | Avec **Remplir la hauteur de la fenêtre** : la hauteur minimale. Sur téléphone, la carte fait 40 % de la hauteur de la fenêtre, cette valeur au plus. |
| **Hauteur maximale de la carte** | 600 à 1600 px | 960 px | Avec **Remplir la hauteur de la fenêtre** : la carte s'arrête de grandir, et le bas de la page reste en vue dans une fenêtre très haute. |
| **Carte à la demande sur téléphone** | oui / non | non | Sur téléphone, pas de carte à l'arrivée : **Voir sur la carte**, ou une fiche touchée, l'ouvre, cadrée sur la position ou la recherche du visiteur. Sur ordinateur, la carte est toujours là. |
| **Groupes de points de vente sur la carte** | **Serré**, **Normal**, **Large** | **Normal** | Les points de vente trop proches sont réunis en une pastille avec leur nombre, qui zoome au clic. **Serré** : groupes plus petits, plus de pastilles ; **Large** : moins de pastilles. Pas de groupe dans une vue de 50 points de vente ou moins, ni à l'échelle des rues. |

**Recherche et filtres**

| Réglage | Valeurs | Défaut | Ce qu'il fait |
| --- | --- | --- | --- |
| **Recherche** | oui / non | oui | Une recherche par ville, code postal ou nom de point de vente, parmi les points de vente de la page, sans appel réseau ; une ville sans point de vente est cherchée chez le fournisseur de la carte. Casse et accents ignorés. |
| **Raccourcis de villes** | oui / non | oui | Sous la recherche, les 6 villes du pays d'arrivée qui ont le plus de points de vente, avec leur nombre ; masqués dès que le visiteur cherche ou donne sa position. |
| **Filtre par type** | oui / non | oui | Affiché à partir de deux types. Tous les types sont cochés à l'arrivée ; les points de vente sans type ne sont jamais masqués. |
| **Filtre par service** | oui / non | oui | Affiché dès qu'un point de vente a un service. Rien n'est coché à l'arrivée ; seuls restent les points de vente qui proposent tous les services cochés. |

**Vue à l'arrivée**

| Réglage | Valeurs | Défaut |
| --- | --- | --- |
| **Vue de la carte à l'arrivée** | **Marché de la boutique en ligne**, **Position du visiteur**, **Pays fixe**, **Toutes les boutiques** | **Marché de la boutique en ligne** |
| **Code du pays** | deux lettres, par exemple `FR` ; utilisé avec **Pays fixe** | vide : le marché |
| **Si aucun point de vente dans cette zone** | **Pays le plus proche qui a des points de vente**, **Pays qui a le plus de points de vente**, **Tous les points de vente** | **Pays le plus proche qui a des points de vente** |

:::note[Bon à savoir]
- **Position du visiteur** ne demande jamais la position de lui-même : seul le bouton **Autour de moi** la demande. Sans réponse en 800 ms, la carte cadre le marché.
- Tous les points de vente sont dans la page, en une seule réponse : le bloc lit un index publié par l'app. Les 30 premiers de la liste sont dans le HTML de la page et s'affichent avec elle ; la liste écrit les suivants 30 à la fois, au fil du défilement et au clavier, et leur réserve la place.
- Un point de vente sans coordonnées n'est ni sur la carte, ni dans la liste, ni dans son nombre. Il garde sa page et reste dans le bloc **Liste des points de vente**.
- Tant que l'app n'a pas configuré la carte, un message la remplace.
:::

## Page point de vente

Le bloc compose toute la page d'un point de vente : son nom, sa photo principale en bandeau, sa présentation, son adresse avec l'itinéraire, ses services, son contact, ses horaires avec un badge « Ouvert en ce moment » à l'heure du point de vente, ses horaires exceptionnels, une carte, ses autres photos, et les 3 points de vente les plus proches. Il décrit aussi le point de vente aux moteurs de recherche (voir [SEO](/fr/docs/developers/seo/)).

Il ne marche que sur le template **Store page**, celui de toutes les pages des points de vente. Vous pouvez placer d'autres sections du thème au-dessus ou en dessous, et les relier aux données du point de vente (voir [Modèle de page et données](/fr/docs/developers/store-data/)).

### Donner au titre le style des autres pages

Le nom du point de vente est le `h1` de la page. Sans style à lui, il prend celui du `h1` du thème, qui est souvent plus grand que les titres des autres pages (les thèmes de la famille Horizon règlent ces titres par un preset). Pour le mettre au même style :

1. Sur le template **Store page**, ajoutez au-dessus du bloc **Page point de vente** le bloc de titre du thème (« Heading » dans Horizon).
2. Reliez son texte au champ **Name**, par la source dynamique (la petite prise).
3. Choisissez le même style que les autres titres de page.
4. Dans le bloc **Page point de vente**, videz le champ **Titre**.

Le nom reste dans les données structurées de la page, et le lien **Lien vers tous les points de vente** reste affiché.

### Structure

```text
<article class="store-page">
├─ .store-page__header       .store-page__title (le h1), .store-page__back (lien vers tous les points de vente)
├─ .store-page__hero         la photo principale
├─ .store-page__body         deux moitiés sur ordinateur, l'une sous l'autre sur téléphone
│  ├─ .store-page__details   les rubriques (.store-page__section) : présentation, adresse et services,
│  │                         contact, horaires (.store-page__hours, .store-page__special)
│  └─ .store-page__aside     la carte (.store-page__map), les autres photos (.store-page__photo)
└─ .store-page__nearby       les points de vente à proximité : des .store-card
```

### Tous les réglages

| Réglage | Valeurs | Défaut | Ce qu'il fait |
| --- | --- | --- | --- |
| **Titre** | texte | `[name]` | Le `h1` de la page, `[name]` remplacé par le nom du point de vente. Vide : pas de titre. |
| **Afficher les photos** | oui / non | oui | La photo principale en bandeau, les autres sous la carte. |
| **Afficher la carte** | oui / non | oui | Une image de carte, pour un point de vente qui a des coordonnées. Un clic ouvre l'itinéraire dans Google Maps, dans un nouvel onglet. |
| **Afficher les points de vente à proximité** | oui / non | oui | Les 3 points de vente avec une page les plus proches, à vol d'oiseau, quel que soit le pays. |
| **Lien vers tous les points de vente** | une adresse | vide : pas de lien | Un lien vers la page du store locator, au bout de la ligne du titre. |
| **Espace au-dessus** | 0 à 200 px | 0 | Voir [Thème à en-tête fixe](#thème-à-en-tête-fixe-ou-sections-sans-marges). |
| **Marge latérale** | 0 à 80 px | 0 | Pour une section en pleine largeur. |

La largeur du bloc suit le réglage de largeur de sa section (Horizon : Page ou Pleine).

## Liste des points de vente

Tous les points de vente en grille de cartes, sans carte : le visiteur parcourt plutôt qu'il ne cherche. Par défaut, sous un titre par pays, dans l'ordre alphabétique de leur nom dans la langue du visiteur ; **Regrouper par** propose aussi un titre par type, ou une seule grille. Tout le contenu est dans le HTML de la page, avec un lien vers chaque page point de vente : c'est aussi le bloc que les moteurs de recherche lisent le mieux. Les pages pays et villes ont leur propre bloc, qui partage le rendu de celui-ci : voir [Page pays ou ville](#page-pays-ou-ville).

### Une page par pays

Pour une page « Nos boutiques en France » :

1. Créez la page et son template, puis ajoutez-y le bloc **Liste des points de vente**.
2. Dans **Afficher seulement ces pays**, saisissez `FR`.
3. Avec un seul pays, la liste n'affiche pas de titre de pays : seulement la grille.

Pour un groupe de pays, séparez les codes par des virgules : `FR, BE, CH`. Pour une page « Nos revendeurs », saisissez le nom du type dans **Afficher seulement ces types de points de vente** et regroupez par pays.

### Structure

```text
<store-list class="store-list">
├─ .store-list__header       .store-list__title, le titre du bloc
├─ .store-list__controls     la ligne d'outils (.store-list__tools : .store-list__filter-toggle, .store-list__count), le panneau des filtres (.store-list__filter-panel)
└─ .store-list__group        un par pays (ou par type)
   ├─ .store-list__country   le titre du groupe, à partir de deux groupes
   ├─ .store-list__grid      les éléments .store-card
   └─ .store-list__section   regroupé par type sur une page pays : .store-list__section-title, puis sa .store-list__grid
```

Les filtres ont le même aspect dans les listes et le store locator : leur style est dans `store-filters.css`, sur les classes publiques `.store-list__filter-*` et `.store-locator__filter-*`.

Une carte, la même dans la liste et parmi les points de vente à proximité d'une page :

```text
.store-card
├─ .store-card__photo
├─ .store-card__name         le lien vers la page, étendu à toute la carte
├─ .store-card__type, .store-card__address, store-opening-status (le statut d'ouverture)
└─ .store-card__links        .store-card__phone, .store-card__directions
```

### Tous les réglages

| Réglage | Valeurs | Défaut | Ce qu'il fait |
| --- | --- | --- | --- |
| **Titre** | texte | « Nos boutiques », dans la langue de l'éditeur de thème | Au-dessus de la liste ; vide, pas de titre. |

**Liste**

| Réglage | Valeurs | Défaut | Ce qu'il fait |
| --- | --- | --- | --- |
| **Filtre par pays** | oui / non | oui | À partir de deux pays ; masqué quand la liste est regroupée par pays. |
| **Filtre par type** | oui / non | oui | Comme sur le store locator ; masqué quand la liste est regroupée par type. |
| **Filtre par service** | oui / non | oui | Comme sur le store locator. |
| **Regrouper par** | **Rien**, **Type**, **Pays** | **Pays** | Un titre par pays (ou par type, dans l'ordre des types des Réglages de l'app, les points de vente sans type en dernier ; les cartes n'affichent alors plus le type). |
| **Trier par** | **Nom**, **Ville, puis nom**, **Type, puis ville** | **Nom** | Dans chaque groupe. |
| **Afficher seulement ces pays** | codes pays à deux lettres, séparés par des virgules | vide : tous les pays | Limite la liste aux points de vente de ces pays. |
| **Afficher seulement ces types de points de vente** | noms ou identifiants des types, séparés par des virgules, sans tenir compte de la casse | vide : tous les types | Limite la liste aux points de vente de ces types ; les points de vente sans type sont écartés. Filtré quand Shopify rend la page : les autres points de vente ne sont pas envoyés. |
| **Taille des cartes** | **Petite**, **Moyenne**, **Grande** | **Moyenne** | Autant de cartes par ligne que la largeur de la section en contient : une sur un téléphone. |

**Contenu des cartes**

| Réglage | Défaut | Ce qu'il fait |
| --- | --- | --- |
| **Afficher le type de point de vente** | oui | Le type sous le nom. |
| **Afficher les photos** | oui | La photo principale en haut de la carte, ou un cadre vide pour garder les cartes alignées. |
| **Afficher l'adresse** | oui | L'adresse. |
| **Afficher le statut d'ouverture** | oui | Ouvert ou fermé en ce moment, à l'heure du point de vente. Pour les points de vente qui ont des horaires. |
| **Afficher le lien d'appel** | oui | Le numéro de téléphone, en lien pour appeler. |
| **Afficher le lien d'itinéraire** | oui | L'itinéraire dans Google Maps, dans un nouvel onglet. |

**Espacement** : **Espace au-dessus** (0 à 200 px, 48 par défaut) et **Marge latérale** (0 à 80 px, 0 par défaut).

:::note[Bon à savoir]
- Sans aucun filtre affiché, la liste n'affiche ni le bouton des filtres ni son nombre de points de vente.
- Dans l'éditeur de thème, au-delà de 100 points de vente, un message propose de limiter la liste : une grille aussi longue est mieux servie par le store locator et les pages pays. L'aperçu n'y rend que les 100 premières cartes (`request.design_mode`) ; la vitrine les rend toutes.
- Un code pays mal saisi ne correspond à aucun point de vente, sans message d'erreur.
- Les filtres gardent les cases cochées dans l'adresse de la page (`country`, `type`, `service`) : deux listes sur la même page les partagent.
- Sans JavaScript, la liste s'affiche en entier, sans filtres.
- Un titre prérempli dans la langue de l'éditeur de thème s'écrit à l'ajout du bloc : un bloc ajouté avant affiche « missing translation » jusqu'à ce qu'il soit enregistré à nouveau.
:::

## Page pays ou ville

Le bloc **Page pays ou ville** sur les templates « Country page » (`metaobject/app--<id>--country_page`) et « City page » (`metaobject/app--<id>--city_page`). Il lit le code du pays (et la ville) dans l'entrée et liste les points de vente du store locator de ce pays ou de cette ville, rendus sur le serveur : tout est dans le HTML. Une page pays les trie par ville, une page ville par nom. Le titre et la meta description de la page sont ceux de l'entrée.

- Au-dessus de la liste : le fil d'Ariane (`.store-list__breadcrumb`, Accueil / France / Lyon), affiché quand **Afficher le fil d'Ariane sur les pages pays et villes** est coché dans les Réglages de l'app ; le titre (`.store-list__header`, `.store-list__title`), puis `.store-list__introduction`.
- Sous la liste, `.store-list__cities` : sur une page pays, ses pages villes par ordre alphabétique, sous **Titre des villes** ; sur une page ville, le lien vers son pays (**Lien vers le pays**) et les autres villes du pays, la ville courante sans lien (`aria-current="page"`).
- Données structurées : une `CollectionPage`, le pays ou la ville (`about`), la marque (`publisher`, avec le même `@id` que sur les pages des points de vente) et le fil d'Ariane (`BreadcrumbList`), affiché ou non.

| Réglage | Valeurs | Défaut | Ce qu'il fait |
| --- | --- | --- | --- |
| **Titre** | texte ; `[name]` est remplacé par le nom du pays ou de la ville | `[name]` | Vide : pas de titre, pour le bloc Titre de votre thème au-dessus. |
| **Filtre par type**, **Filtre par service** | oui / non | oui | Comme sur la Liste des points de vente. |
| **Regrouper par** | **Rien**, **Type** | **Rien** | Un titre par type, dans l'ordre des Réglages de l'app. |
| **Taille des cartes** | **Petite**, **Moyenne**, **Grande** | **Moyenne** | Comme sur la Liste des points de vente. |
| **Titre des villes** | texte ; `[country]` est remplacé par le nom du pays | « Nos boutiques par ville » | Vide : pas de titre. |
| **Lien vers le pays** | texte ; `[country]` est remplacé par le nom du pays | « [country] : toutes nos boutiques » | Sur une page ville. |

Les réglages du contenu des cartes et de l'espacement sont ceux de la Liste des points de vente.

## Annuaire des boutiques

« Nos boutiques par pays » : un lien par page pays publiée, en colonnes, trié par nom dans la langue du visiteur (`.country-directory`, `.country-directory__heading`, `.country-directory__list`, `.country-directory__link`). Avec **Afficher les villes**, les pages villes de chaque pays sous son nom (`.country-directory--cities`, `.country-directory__cities`). Sur une page pays ou ville, la page courante n'est pas un lien (`.country-directory__current`, `aria-current="page"`). Rien ne s'affiche sans page pays publiée. Réglages : **Titre** (vide, pas de titre), **Afficher les villes** (non), **Espace au-dessus** (48 px) et **Marge latérale**.

## Thème à en-tête fixe ou sections sans marges

Deux réglages, communs aux trois blocs, corrigent l'affichage sur certains thèmes, souvent ceux faits sur mesure :

- **Espace au-dessus** : l'en-tête du thème reste en haut de l'écran et cache le haut du bloc (la recherche du store locator, le titre d'une page). Réglez la hauteur de l'en-tête, par exemple 90 px pour un en-tête de 86 px. Le store locator en tient compte pour remplir la fenêtre.
- **Marge latérale** : la section des applications du thème n'a pas de marges, et le bloc va bord à bord. Réglez l'espace à laisser de chaque côté.

L'aperçu de l'éditeur de thème montre le résultat en direct.

## Restyler un bloc

Les blocs n'ont pas de réglage de style : leur apparence vient du thème, et c'est voulu. Pour aller plus loin, une agence écrit son CSS dans le **CSS personnalisé** de la section du bloc (500 caractères) ou dans le CSS du thème. Le CSS des blocs est écrit pour ça :

- **une seule classe suffit**, sans `!important` : le style de base de chaque élément n'a qu'une classe de spécificité ;
- **des variables** pour ce qu'on change le plus souvent (espacements, rayons, bordures, fonds), à redéfinir sur la racine du bloc ;
- **des états en attributs** : `aria-current` sur le point de vente choisi dans la liste du store locator, `data-state="open"` ou `"closed"` sur le statut d'ouverture (`store-opening-status`), `[hidden]`.

### Exemples

Des cartes encadrées, sur un fond léger, dans la liste et parmi les points de vente à proximité :

```css
.store-card {
  --store-card-padding: 1rem;
  --store-card-background: color-mix(in srgb, currentColor 4%, transparent);
  border: 1px solid color-mix(in srgb, currentColor 15%, transparent);
}
```

La colonne de la liste du store locator sur un fond de la marque :

```css
.store-locator {
  --store-locator-panel-background: #f4efe6;
  --store-locator-panel-text: #2b2118;
}
```

Des photos carrées et sans arrondi :

```css
.store-card { --store-card-photo-ratio: 1 / 1; --store-card-radius: 0; }
.store-page { --store-page-radius: 0; }
```

Les bordures, le texte atténué et les contrôles du store locator se calculent à partir de `--store-locator-panel-text` : changez-le avec le fond, en gardant un contraste de 4,5:1 (voir [Accessibilité](/fr/docs/developers/accessibility/)).

### Classes et variables

Les classes suivent le BEM, préfixées par le bloc : `store-locator__…`, `store-page__…`, `store-list__…`, et `store-card__…` pour les cartes de la liste et des points de vente à proximité. La liste complète est en tête de chaque feuille de style (`store-locator.css`, `store-page.css`, `store-list.css`, `store-card.css`), que montrent les outils de développement du navigateur.

| Racine | Variables |
| --- | --- |
| `.store-locator` | `--store-locator-panel-text`, `--store-locator-panel-background`, `--store-locator-gap`, `--store-locator-border`, `--store-locator-muted`, `--store-locator-control-border`, `--store-locator-mobile-map` |
| `.store-page` | `--store-page-gap`, `--store-page-border`, `--store-page-muted`, `--store-page-radius` |
| `.store-list` | `--store-list-card-size`, `--store-list-gap`, `--store-list-group-gap`, `--store-list-muted` |
| `.store-card` | `--store-card-padding`, `--store-card-gap`, `--store-card-background`, `--store-card-radius`, `--store-card-muted`, `--store-card-photo-ratio` |

:::caution[L'app n'est pas encore sortie]
Les classes et les variables peuvent encore changer.
:::

## Pour aller plus loin

- [Modèle de page et données](/fr/docs/developers/store-data/) : lire les points de vente en Liquid, dans vos propres sections.
- [SEO](/fr/docs/developers/seo/) : les adresses des pages, les redirections et les données structurées.
- [Accessibilité](/fr/docs/developers/accessibility/) : ce que font les blocs, et ce qui reste au thème.