> ## Documentation Index
> Fetch the complete documentation index at: https://storekit.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.
# Personnaliser le design et la marque de votre magasin dans storekit
> Configurez le logo, les couleurs, les polices, les boutons, la mise en page du menu et le contenu de votre page de commande storekit afin que votre magasin corresponde à l'identité visuelle de votre marque.
Design & Branding vous permet de personnaliser l'apparence, la mise en page et le contenu de votre page de commande storekit.
Vous pouvez l'utiliser pour mettre à jour les images, les couleurs, la typographie, les boutons, la mise en page du menu, le contenu de la page, les avis et d'autres éléments de design visibles par le client.
Les modifications sont visibles dans l'aperçu au fur et à mesure, mais elles **ne sont pas appliquées à votre page de commande en direct tant que vous ne cliquez pas sur Save**.
La plupart des clients commandent depuis des appareils mobiles, nous vous recommandons donc de vérifier l'aperçu mobile avant d'enregistrer vos modifications.
## Ce que vous pouvez personnaliser
La barre latérale Design & Branding est organisée en trois sections principales :
| Domaine | Ce qu'il inclut |
| -------- | -------------------------------------------------------------- |
| Branding | Images, Typographie, Boutons, Couleurs |
| Layout | Menu, Éléments du menu, Panier, Style d'en-tête |
| Content | Description, Avis, Statut de commande, Sections personnalisées |
***
## Avant de commencer
| Domaine | Recommandations |
| ------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Accès | Ouvrez votre établissement dans l'admin storekit, puis sélectionnez **Design & Branding** dans la navigation de gauche. |
| Appareil recommandé | Design & Branding fonctionne mieux sur un ordinateur de bureau ou portable. |
| Aperçu | L'aperçu se met à jour au fur et à mesure de vos modifications, vous pouvez donc examiner votre design avant d'enregistrer. |
| Aperçu mobile | Vérifiez toujours l'aperçu mobile avant d'enregistrer, car la plupart des clients commandent sur mobile. |
| Enregistrement | Les modifications ne sont appliquées à votre page de commande en direct qu'après avoir cliqué sur **Save**. |
| Annuler / Rétablir | Utilisez `Ctrl + Z` pour annuler et `Ctrl + Y` ou `Ctrl + Shift + Z` pour rétablir. |
| Accès aux fonctionnalités | Certaines sections Design & Branding nécessitent **storekit+**. Si une section est verrouillée, il se peut que vous deviez passer à un plan supérieur pour y accéder. |
Si vous quittez la page avant d'enregistrer, vos modifications peuvent être perdues.
***
## Accès aux fonctionnalités Design & Branding
Certaines sections Design & Branding ne sont disponibles qu'avec **storekit+**.
Si une section est verrouillée dans votre admin, votre plan actuel peut ne pas inclure l'accès complet à Design & Branding. Pour débloquer toutes les options Design & Branding, vous devrez passer à **storekit+**.
Besoin d'un accès complet à Design & Branding ? [Contactez le support storekit](/docs/fr/getting-started/contact-support) pour ajouter cette fonctionnalité à votre compte. Un abonnement **storekit+** est requis.
***
## Branding
Les paramètres Branding contrôlent l'identité visuelle de votre page de commande.
La section Branding comprend :
* Images
* Typographie
* Boutons
* Couleurs
***
### Images
La section **Images** vous permet de mettre à jour les principaux visuels utilisés sur votre page de commande.
| Paramètre | Ce qu'il contrôle | Où les clients peuvent le voir | Format recommandé |
| ------------------- | --------------------------------------------------------------------- | --------------------------------------------------------------- | ------------------------------------------------------------------------------- |
| Logo | Votre logo de marque principal | En-tête ou zone hero, selon le style d'en-tête sélectionné | Image carrée recommandée. Le PNG transparent fonctionne le mieux. |
| Nav logo | Logo affiché dans la barre de navigation collante | Barre de navigation supérieure lorsque les clients font défiler | Image carrée recommandée. |
| Favicon | Petite icône du navigateur | Onglet du navigateur et favoris | Image carrée, par exemple `32 × 32px` ou `180 × 180px`. |
| Header image | Image principale utilisée dans l'en-tête ou la zone hero | Haut de votre page de commande | Image paysage recommandée. |
| Page background | Image d'arrière-plan derrière la page de commande | Arrière-plan de toute la page | Utilisez une image qui fonctionne bien derrière le texte et le contenu du menu. |
| Pay-at-Table header | Image d'en-tête utilisée pour la commande Pay-at-Table, si disponible | Flux de commande Pay-at-Table | Image paysage recommandée. |
#### Astuces pour les images
* Utilisez des images de haute qualité qui correspondent à votre marque.
* Gardez les logos simples et facilement reconnaissables.
* Utilisez des images carrées pour les logos et favicons.
* Utilisez des images paysage pour les images d'en-tête.
* Évitez de placer du texte important près du bord des images d'en-tête, car les images peuvent être recadrées différemment sur mobile.
* Vérifiez toujours l'aperçu mobile avant d'enregistrer.
Les images d'en-tête peuvent être recadrées différemment selon la taille de l'écran. Pour de meilleurs résultats, gardez la partie la plus importante de l'image centrée.
***
### Typographie
La section **Typographie** vous permet d'ajuster le style de texte utilisé sur votre page de commande.
Vous pouvez personnaliser la typographie de différentes zones de texte, telles que les titres, le corps du texte, les boutons et le texte du menu. Chaque paramètre de typographie contrôle la police utilisée, si le texte est en majuscules et l'échelle de taille.
| Paramètre | Ce qu'il contrôle | Impact côté client |
| ----------------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------- |
| Police | La police utilisée pour la zone de texte sélectionnée | Change le style global et le ressenti de marque du texte |
| Capitalisation | Si le texte sélectionné apparaît en casse standard ou en majuscules | Peut rendre les titres, boutons ou étiquettes plus visibles |
| Échelle de taille | La taille relative de la zone de texte sélectionnée | Rend le texte sélectionné plus petit ou plus grand sur la page de commande |
#### Police
Le paramètre de police contrôle le typeface utilisé pour la zone de texte sélectionnée.
Par défaut, la page de commande peut utiliser la police système. Vous pouvez également téléverser un fichier de police personnalisée là où c'est pris en charge.
Les polices personnalisées doivent être téléversées au format `WOFF2`.
#### Capitalisation
La bascule de capitalisation vous permet de choisir si la zone de texte sélectionnée utilise une capitalisation standard ou un style tout en majuscules.
Cela peut être utile pour faire ressortir les titres, boutons ou étiquettes de menu.
Utilisez le style tout en majuscules avec précaution. De longues portions de texte en majuscules peuvent être plus difficiles à lire, en particulier sur mobile.
#### Échelle de taille
L'échelle de taille vous permet d'ajuster la taille relative de la zone de texte sélectionnée.
Par exemple, réduire l'échelle rend le texte sélectionné plus petit, tandis que l'augmenter le rend plus grand. C'est utile si les titres, les noms de produits, les descriptions ou les boutons semblent trop grands ou trop petits pour le design de votre magasin.
#### Astuces typographie
* Téléversez un fichier de police `WOFF2` si vous utilisez une police personnalisée.
* Choisissez des styles de texte faciles à lire.
* Utilisez la capitalisation avec précaution, en particulier pour les textes plus longs.
* Ajustez l'échelle de taille si les titres, éléments de menu ou boutons semblent trop grands ou trop petits.
* Vérifiez les noms de produits et descriptions longs avant d'enregistrer.
* Vérifiez toujours l'aperçu mobile avant d'enregistrer.
Les changements de typographie peuvent affecter l'espacement et la mise en page, en particulier sur mobile. Vérifiez toujours l'aperçu mobile avant d'enregistrer.
***
### Boutons
La section **Boutons** vous permet de personnaliser l'apparence des boutons visibles par les clients sur votre page de commande.
Les boutons sont utilisés pour les actions client importantes, telles que l'ajout d'articles au panier, la consultation du panier, le démarrage du paiement et la passation d'une commande.
| Paramètre | Ce qu'il affecte | Impact côté client |
| ------------------ | ---------------------------------------------------------- | --------------------------------------------------------------------------- |
| Style du bouton | L'apparence globale des boutons | Change l'apparence des boutons d'action sur la page de commande |
| Forme du bouton | Le style des coins du bouton, par exemple arrondi ou carré | Change le ressenti visuel des boutons |
| Couleurs du bouton | Couleurs de fond et de texte du bouton | Affecte la clarté avec laquelle les clients voient et utilisent les boutons |
#### Astuces pour les boutons
* Utilisez des couleurs qui ressortent clairement de l'arrière-plan de la page.
* Assurez-vous que le texte des boutons est facile à lire.
* Vérifiez les actions importantes telles que **Add to basket**, **View basket** et les boutons de paiement.
* Évitez les couleurs de bouton qui se fondent dans la page.
Les boutons font partie du parcours de commande, assurez-vous donc qu'ils restent clairs et faciles à toucher sur mobile.
***
### Couleurs
La section **Couleurs** vous permet de personnaliser la palette de couleurs de votre page de commande.
Les paramètres de couleur affectent le thème général, les arrière-plans, le texte, les accents, les boutons, les éléments de menu, les modificateurs et d'autres éléments visibles par les clients.
#### Presets
Les presets vous permettent d'appliquer rapidement un thème de couleurs prédéfini à votre page de commande.
C'est utile si vous voulez partir d'un style prêt à l'emploi, comme un thème minimal, un thème mode sombre ou une autre palette prédéfinie, avant de procéder à des ajustements plus détaillés.
Après avoir choisi un preset, vous pouvez toujours ajuster manuellement les champs de couleur individuels.
#### Afficher les avertissements de contraste
La bascule **Show contrast warnings** met en évidence les paires texte/arrière-plan qui peuvent être difficiles à lire.
Lorsqu'elle est activée, Design & Branding vérifie si les combinaisons de couleurs sélectionnées respectent les recommandations de contraste WCAG AA.
Les avertissements de contraste mettent en évidence les paires texte/arrière-plan qui échouent au contraste WCAG AA : `4.5:1` pour le texte standard et `3:1` pour le texte grand format. Visez AA ou plus pour garantir la lisibilité à tous les utilisateurs.
#### Paramètres de couleur
| Paramètre | Ce qu'il affecte | Astuces |
| -------------------------------------------- | ------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------- |
| Mobile browser and desktop nav | La couleur utilisée pour la zone du navigateur mobile et la navigation desktop | Utilisez une couleur qui correspond à votre marque tout en gardant la navigation lisible. |
| Page background | La couleur de fond principale de la page de commande | Utilisez une couleur neutre qui permet au contenu du menu de ressortir. |
| Page background darker | Une teinte de fond plus foncée utilisée dans certaines zones | Gardez-la suffisamment proche du fond principal pour rester cohérente. |
| Primary backgrounds | Zones de fond principales du storefront | Fonctionne généralement mieux avec une couleur de fond propre et lisible. |
| Secondary backgrounds | Panneaux secondaires ou zones de contenu | Utilisez cela pour séparer subtilement les sections sans réduire la lisibilité. |
| Category scrolling nav bar background | Couleur de fond de la barre de navigation des catégories | Assurez-vous que les noms de catégories restent lisibles. |
| Category and item names | Couleur du texte des noms de catégorie et d'article | Utilisez un contraste fort pour que les clients puissent facilement lire les articles du menu. |
| Category navigation and modifier group names | Couleur du texte pour la navigation de catégorie et les noms de groupes de modificateurs | Gardez-la claire, en particulier sur mobile. |
| Prices | Couleur du texte pour les prix des articles | Les prix doivent être faciles à lire et pas trop discrets. |
| Item descriptions (preview) | Couleur du texte pour les descriptions courtes d'articles | Utilisez suffisamment de contraste pour que les descriptions restent lisibles. |
| Item descriptions (full) | Couleur du texte pour les descriptions complètes d'articles | Vérifiez les descriptions longues sur mobile. |
| Accent colour | Couleur d'accent utilisée sur certains éléments | Choisissez une couleur qui ressort clairement du fond. |
| Primary colour | Couleur principale du thème utilisée sur la page de commande | Utilisez votre couleur de marque approuvée lorsque c'est possible. |
| Secondary colour | Couleur de thème complémentaire | Utilisez-la pour compléter la couleur primaire. |
| Highlight border colour | Couleur de bordure utilisée pour mettre en évidence les éléments sélectionnés ou importants | Assurez-vous que les articles sélectionnés sont faciles à identifier. |
| Secondary actions colour | Couleur utilisée pour les actions secondaires | Gardez-la visible, mais moins proéminente que les actions primaires. |
| Overlay background | Couleur de fond utilisée pour les superpositions ou zones de type modal | Assurez-vous que le contenu de la superposition reste lisible. |
| Secondary background transparent | Couleur de fond secondaire transparente | Utilisez avec précaution afin que le texte et les boutons restent clairs. |
| Modifier card background | Couleur de fond des cartes d'options de modificateur | Assurez-vous que les options de modificateur sont faciles à parcourir. |
| Selected modifier card background | Couleur de fond des options de modificateur sélectionnées | Les options sélectionnées doivent être visuellement claires. |
| Borders and shadows | Style de bordure et d'ombre pour certains éléments | Utilisez un style subtil pour séparer le contenu sans encombrer la page. |
#### Astuces couleurs
* Commencez avec un preset si vous voulez un thème rapide, puis ajustez les couleurs individuelles au besoin.
* Utilisez vos couleurs de marque lorsque c'est possible.
* Utilisez des codes hexadécimaux exacts si vous avez une charte graphique.
* Activez **Show contrast warnings** pendant l'édition.
* Assurez-vous que le texte reste lisible sur l'arrière-plan.
* Vérifiez les boutons, le panier, le paiement, les avis, les modificateurs et les descriptions de produits.
* Prévisualisez sur mobile avant d'enregistrer.
Un mauvais contraste de couleurs peut rendre votre page de commande difficile à utiliser. Les clients doivent pouvoir lire clairement les noms de produits, descriptions, prix, avis, options de modificateur, totaux de panier et boutons de paiement.
***
## Layout
Les paramètres Layout contrôlent la façon dont votre page de commande est organisée et la façon dont les clients parcourent votre menu, votre panier et votre en-tête.
La section Layout comprend :
* Menu
* Éléments du menu
* Panier
* Style d'en-tête
***
### Menu
La section **Menu** vous permet de personnaliser l'affichage de votre menu pour les clients.
Vous pouvez choisir la mise en page globale des articles, ajuster le nombre de colonnes affichées sur desktop et mobile, contrôler la taille des images, choisir la direction des articles et décider comment les images de navigation des catégories apparaissent.
Les changements de mise en page du menu affectent la façon dont les clients parcourent votre menu. Vérifiez toujours l'aperçu desktop et mobile avant d'enregistrer.
#### Mise en page des articles
La mise en page des articles contrôle la structure globale utilisée pour afficher les articles du menu.
| Mise en page | Ce qu'elle fait |
| ------------ | -------------------------------------------------------------------------- |
| List | Affiche les articles du menu dans une simple liste verticale |
| 2-col list | Affiche les articles du menu dans une mise en page en deux colonnes |
| Cards | Affiche les articles du menu sous forme de blocs plus grands de type carte |
| 2-col grid | Affiche les articles du menu dans une grille à deux colonnes |
| 3-col grid | Affiche les articles du menu dans une grille à trois colonnes |
| Compact | Affiche les articles du menu dans une mise en page plus condensée |
#### Personnaliser la mise en page du menu
Les options **Customise** vous permettent d'ajuster plus en détail la mise en page sélectionnée.
| Paramètre | Ce qu'il contrôle | Impact côté client |
| -------------------------- | ------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------- |
| Desktop columns | Nombre de colonnes affichées sur desktop | Contrôle combien d'articles apparaissent sur chaque ligne sur les grands écrans |
| Mobile columns | Nombre de colonnes affichées sur mobile | Contrôle si les articles apparaissent en une ou plusieurs colonnes sur mobile |
| Image size | Taille des images des articles du menu | Affecte l'importance des images d'articles |
| Item direction | Position du texte et de l'image dans chaque article du menu | Change si l'image apparaît à côté, inversée ou au-dessus du texte |
| Large images | Utilise des images pleine largeur sur les articles du menu | Rend les images d'articles plus proéminentes là où c'est pris en charge |
| Show a currency symbol | Affiche le symbole monétaire à côté des prix | Affiche des symboles tels que `£`, `$` ou `€` à côté des prix |
| Category navigation images | Contrôle où les images de catégorie apparaissent dans la navigation | Peut afficher les images de catégorie sur desktop uniquement, sur desktop et mobile, ou les masquer |
| Stories position | Contrôle où les stories apparaissent dans le menu | `0` place les stories en haut du menu, `1` les place après la première catégorie, etc. |
#### Direction des articles
La direction des articles contrôle la façon dont l'image et le texte sont agencés à l'intérieur de chaque article du menu.
| Option | Ce qu'elle fait |
| ------- | --------------------------------------------------------------------------------- |
| Row | Affiche l'image et les détails de l'article côte à côte |
| Reverse | Inverse la mise en page côte à côte |
| Stacked | Place l'image et les détails de l'article l'un au-dessus ou en dessous de l'autre |
#### Images de navigation des catégories
Les images de navigation des catégories contrôlent si les images de catégorie sont affichées dans la navigation du menu.
| Option | Ce qu'elle fait |
| ---------------- | -------------------------------------------------------------------- |
| Desktop only | Affiche les images de navigation de catégorie uniquement sur desktop |
| Desktop & Mobile | Affiche les images de navigation de catégorie sur desktop et mobile |
| None | Masque les images de navigation de catégorie |
#### Astuces menu
* Choisissez une mise en page qui correspond à la taille et au style de votre menu.
* Utilisez des mises en page liste ou compactes pour les menus plus simples.
* Utilisez des mises en page carte ou grille si votre menu repose beaucoup sur les images.
* Gardez les colonnes mobiles faciles à parcourir. Une colonne est généralement plus claire pour les noms ou descriptions longs.
* Vérifiez les produits avec des noms longs, des descriptions longues, des modificateurs et des images avant d'enregistrer.
* Activez le symbole monétaire si les prix ne sont pas clairs sans lui.
* Si vous utilisez des images de navigation de catégorie, assurez-vous que les images de catégorie sont claires et cohérentes.
* Prévisualisez à la fois sur desktop et mobile avant d'enregistrer.
Les mises en page avec plusieurs colonnes ou de grandes images peuvent bien apparaître sur desktop mais sembler encombrées sur mobile. Vérifiez toujours l'aperçu mobile avant d'enregistrer.
Design & Branding contrôle la façon dont votre menu est présenté. Les noms de produits, prix, modificateurs, images et disponibilités peuvent devoir être mis à jour depuis l'éditeur de menu ou une autre zone pertinente de l'admin.
***
### Éléments du menu
La section **Menu items** vous permet de personnaliser la façon dont les produits individuels apparaissent sur votre page de commande et la façon dont les détails d'un article sont affichés lorsqu'un client ouvre un article.
Cela inclut la mise en page du modal d'article, l'affichage des modificateurs, l'affichage du stock faible, l'affichage des allergènes, les informations macros, les contrôles d'âge et le nombre de lignes de texte affichées.
Les paramètres d'articles de menu affectent la façon dont les clients visualisent les produits et font leurs sélections. Vérifiez toujours les articles avec images, modificateurs, allergènes et descriptions longues avant d'enregistrer.
#### Modal d'article
Le modal d'article est la fenêtre pop-up ou la vue de détail d'article que les clients voient lorsqu'ils sélectionnent un article du menu.
| Paramètre | Ce qu'il contrôle | Impact côté client |
| ------------------ | ----------------------------------------------------------------- | ---------------------------------------------------------------------------- |
| Modal image style | La taille de l'image de l'article dans le modal | Contrôle l'importance de l'image du produit lorsqu'un article est ouvert |
| Modal desktop view | La mise en page du modal d'article sur desktop | Affecte l'agencement de l'image, des détails, modificateurs et actions |
| Content position | L'alignement du contenu dans le modal d'article | Contrôle si le contenu utilise la mise en page par défaut ou apparaît centré |
| Modal border | Style, couleur et largeur de la bordure autour du modal d'article | Ajoute ou supprime une bordure autour du modal |
#### Style d'image du modal
| Option | Ce qu'elle fait |
| ------ | ----------------------------------------------------------- |
| Medium | Affiche une image de taille moyenne dans le modal d'article |
| Large | Affiche une image plus grande dans le modal d'article |
#### Vue desktop du modal
| Option | Ce qu'elle fait |
| ------------------- | ---------------------------------------------------------------------------------- |
| Default | Utilise la mise en page standard du modal d'article |
| Desktop wide | Utilise une mise en page de modal plus large sur desktop |
| Desktop large | Utilise une mise en page de modal plus grande sur desktop |
| Desktop extra large | Utilise une mise en page de modal très grande sur desktop |
| Desktop fullscreen | Affiche le modal en plein écran sur desktop |
| Desktop info panel | Utilise une mise en page avec les informations de l'article dans un panneau séparé |
#### Position du contenu
| Option | Ce qu'elle fait |
| ------- | ----------------------------------------------------- |
| Default | Utilise l'alignement standard du contenu de l'article |
| Centred | Centre le contenu de l'article dans le modal |
#### Style des modificateurs
Le style des modificateurs contrôle la façon dont les options d'article et les groupes de modificateurs apparaissent lorsque les clients personnalisent un article.
| Option | Ce qu'elle fait |
| ------------------ | ---------------------------------------------------------------------------- |
| Default | Affiche les modificateurs dans la mise en page liste standard |
| Cards | Affiche les options de modificateur sous forme de cartes |
| Cards (image only) | Affiche les options de modificateur sous forme de cartes axées sur l'image |
| Landscape cards | Affiche les options de modificateur sous forme de cartes paysage plus larges |
#### Affichage du stock faible
L'affichage du stock faible contrôle si les clients peuvent voir les informations d'inventaire restantes pour les articles à stock limité.
| Option | Ce qu'elle fait |
| ------------------------ | -------------------------------------------------------------------------------------------- |
| Hide | N'affiche pas les informations de stock faible ou d'inventaire |
| Low only | Affiche une étiquette de stock faible lorsque l'inventaire est bas, par exemple `10 or less` |
| Always display inventory | Affiche la quantité d'inventaire restante aux clients |
N'utilisez les options d'affichage d'inventaire que si les niveaux de stock sont activement maintenus et précis.
#### Affichage des allergènes
L'affichage des allergènes contrôle la façon dont les informations sur les allergènes apparaissent sur les articles du menu.
| Option | Ce qu'elle fait |
| -------- | --------------------------------------------------------------------- |
| Default | Affiche les allergènes dans le style compact standard |
| Extended | Affiche les informations sur les allergènes dans un style plus étendu |
Les informations sur les allergènes doivent toujours être exactes et à jour. Si vous n'êtes pas sûr que les allergènes des articles soient corrects, vérifiez les paramètres de l'article concerné avant de vous fier à l'affichage.
#### Calculateur de macros
Le calculateur de macros contrôle si les informations nutritionnelles macros sont affichées aux clients, si disponibles.
| Option | Ce qu'elle fait |
| -------------- | ------------------------------------------------------------- |
| Disabled | N'affiche pas les informations macros |
| Show on mobile | Affiche les informations macros sur mobile, si pris en charge |
#### Contrôle d'âge
Le contrôle d'âge détermine si les clients sont invités à confirmer leur âge avant de consulter ou de commander certains articles.
| Option | Ce qu'elle fait |
| ------------ | ---------------------------------------------- |
| Disabled | N'affiche pas de contrôle d'âge |
| Over 18 | Affiche une confirmation `18+` |
| Challenge 25 | Affiche une confirmation de style Challenge 25 |
Les paramètres de contrôle d'âge ne doivent être utilisés que lorsqu'ils sont appropriés pour des produits restreints ou pour les exigences de l'établissement.
#### Nombre de lignes du nom d'article de menu
Le nombre de lignes du nom d'article de menu contrôle combien de lignes du nom d'article sont affichées avant que le texte ne soit raccourci.
| Paramètre | Ce qu'il contrôle |
| --------- | ---------------------------------------------------------------------- |
| Lines | Le nombre maximal de lignes affichées pour les noms d'articles de menu |
Par exemple, régler ce paramètre sur `1` garde les noms d'articles sur une seule ligne lorsque c'est possible. Augmenter le nombre permet aux noms plus longs de s'afficher plus complètement.
#### Lignes de description d'article
Les lignes de description d'article contrôlent combien de lignes de description sont affichées dans l'aperçu de l'article de menu.
| Paramètre | Ce qu'il contrôle |
| --------- | ----------------------------------------------------------------------- |
| Lines | Le nombre maximal de lignes de description affichées |
| `0` | Masque les descriptions des articles dans l'aperçu de l'article du menu |
C'est utile si vous voulez une mise en page de menu plus épurée ou si les descriptions sont très longues.
#### Astuces éléments de menu
* Vérifiez les produits avec des noms longs.
* Vérifiez les produits avec des descriptions longues.
* Passez en revue les articles avec modificateurs ou options.
* Vérifiez les articles avec images de produit.
* Vérifiez l'affichage des allergènes là où les informations sur les allergènes sont utilisées.
* N'utilisez l'affichage de stock faible que si l'inventaire est précis.
* Soyez prudent avec les paramètres de contrôle d'âge et ne les utilisez que si nécessaire.
* Vérifiez le modal d'article sur desktop et mobile avant d'enregistrer.
* Évitez les mises en page qui rendent le menu trop encombré sur mobile.
Les paramètres d'article de menu peuvent affecter le parcours de commande. Avant d'enregistrer, ouvrez quelques produits et vérifiez que les clients peuvent clairement lire les détails, sélectionner des modificateurs et ajouter des articles au panier.
Design & Branding contrôle la façon dont les articles du menu sont affichés. Les noms de produits, prix, descriptions, images, modificateurs, allergènes, inventaire et disponibilité peuvent devoir être mis à jour depuis l'éditeur de menu ou une autre zone de l'admin.
***
### Panier
La section **Basket** vous permet de personnaliser l'apparence du panier client pendant le parcours de commande.
Les paramètres du panier affectent la façon dont les clients examinent les articles sélectionnés, consultent les prix et poursuivent le paiement.
Le panier est une partie importante du paiement. Assurez-vous que les clients peuvent examiner clairement leurs articles et poursuivre pour passer leur commande.
#### Images des articles
Les images des articles contrôlent si les images des produits sont affichées dans le panier.
| Option | Ce qu'elle fait |
| ------ | ------------------------------------------------------------------ |
| None | Masque les images d'articles dans le panier |
| Small | Affiche de petites images à côté des articles du panier |
| Medium | Affiche des images de taille moyenne à côté des articles du panier |
| Large | Affiche des images plus grandes à côté des articles du panier |
#### Personnaliser les images des articles
L'option **Customise** vous permet d'affiner la taille des images du panier.
| Paramètre | Ce qu'il contrôle | Impact côté client |
| ---------- | ------------------------------------------------------- | --------------------------------------------------------------- |
| Image size | Ajuste la taille des images des articles dans le panier | Contrôle l'espace visuel que prennent les images dans le panier |
#### Prix
L'affichage des prix contrôle la façon dont la tarification apparaît dans le panier.
| Option | Ce qu'elle fait |
| ----------------- | -------------------------------------------------------------------------------- |
| Show all | Affiche les prix des articles et le total du panier |
| Hide basket total | Masque le total du panier tout en affichant les prix par article, si disponibles |
| Hide all | Masque les prix dans le panier |
Soyez prudent lorsque vous masquez les prix. Les clients doivent clairement comprendre le coût de leur commande avant le paiement.
#### Bouton de paiement à largeur automatique
Le paramètre **Auto-width checkout button** modifie la largeur du bouton de paiement sur mobile.
Lorsqu'il est activé, le bouton de paiement utilise un bouton flottant dimensionné au contenu au lieu d'un bouton pleine largeur sur mobile.
| Paramètre | Ce qu'il contrôle | Impact côté client |
| -------------------------- | ------------------------------------------------------------------------------ | ------------------------------------------------------ |
| Auto-width checkout button | Change le bouton de paiement mobile de pleine largeur à dimensionné au contenu | Affecte la visibilité du bouton de paiement sur mobile |
#### Astuces panier
* Utilisez des images d'articles si elles aident les clients à reconnaître rapidement les produits.
* Masquez les images d'articles si le panier semble trop encombré.
* Gardez les prix visibles sauf raison spécifique de les masquer.
* Vérifiez le panier avec plusieurs articles avant d'enregistrer.
* Vérifiez le panier avec des modificateurs ou options d'articles.
* Passez en revue le bouton de paiement sur mobile.
* Assurez-vous que le bouton de paiement est facile à voir et à toucher.
Les modifications du panier peuvent affecter l'expérience de paiement du client. Vérifiez toujours le panier sur mobile avant d'enregistrer.
***
### Style d'en-tête
La section **Header style** vous permet de personnaliser la section supérieure de votre page de commande.
L'en-tête est l'une des premières choses que les clients voient lorsqu'ils ouvrent votre page de commande, il a donc un fort impact sur l'apparence globale de votre magasin.
Besoin d'accéder à Header style ? [Contactez le support storekit](/docs/fr/getting-started/contact-support) pour ajouter cette fonctionnalité à votre compte. Un abonnement **storekit+** est requis.
#### Ce que vous pouvez personnaliser
| Paramètre | Ce qu'il affecte |
| -------------------- | ------------------------------------------------------------------------- |
| Header layout | La façon dont la section supérieure de votre page de commande est agencée |
| Logo placement | L'emplacement de votre logo dans l'en-tête |
| Header image display | La façon dont votre image d'en-tête apparaît |
| Navigation style | La façon dont la navigation supérieure apparaît |
#### Astuces en-tête
* Vérifiez que votre logo est clairement visible.
* Utilisez une image d'en-tête qui fonctionne bien sur desktop et mobile.
* Gardez le contenu d'image important centré.
* Évitez les images d'en-tête avec du texte près des bords.
* Vérifiez à quoi ressemble l'en-tête après défilement, en particulier si une barre de navigation collante est utilisée.
Les images d'en-tête peuvent s'afficher différemment selon la taille de l'écran. Vérifiez toujours l'aperçu mobile avant d'enregistrer.
***
## Contenu
Les paramètres Content contrôlent les informations supplémentaires affichées sur votre page de commande.
La section Content comprend :
* Description
* Avis
* Statut de commande
* Sections personnalisées
***
### Description
La section **Description** vous permet de mettre à jour la description de l'établissement affichée sur votre page de commande.
Vous pouvez utiliser la description pour présenter votre établissement, expliquer votre cuisine ou fournir des informations utiles pour la commande.
| Paramètre | Ce qu'il affecte | Impact côté client |
| ---------------------- | ----------------------------------------- | ------------------------------------------------------------------------------------------ |
| Store description | Texte descriptif sur votre établissement | Aide les clients à comprendre votre magasin, votre cuisine ou votre expérience de commande |
| Description visibility | Si et comment la description est affichée | Affecte la quantité d'informations que les clients voient sur la page |
#### Astuces description
* Gardez la description claire et concise.
* Utilisez un vocabulaire adapté aux clients.
* Évitez les longs paragraphes.
* N'incluez pas d'informations qui peuvent rapidement devenir obsolètes, sauf si vous prévoyez de les maintenir à jour.
* Vérifiez comment la description apparaît sur mobile.
#### Exemples d'utilisation
Vous pouvez utiliser la description pour :
* Une courte présentation de l'établissement
* Le type de cuisine
* Des instructions de commande
* Un message de marque
* Des informations de service utiles
***
### Avis
La section **Notices** vous permet d'ajouter des messages visibles par les clients à votre page de commande.
Les avis peuvent être utilisés pour des mises à jour importantes, des informations de service ou des messages que les clients doivent voir avant de commander.
#### Avis de menu
L'**avis de menu** est affiché en bas de votre menu.
Il est généralement utilisé pour des informations telles que les allergènes, les calories ou les avis sur les frais de service.
| Paramètre | Ce qu'il affecte | Impact côté client |
| --------------- | -------------------------------------- | ------------------------------------------------------------------------------------- |
| Menu notice | Message affiché en bas du menu | Aide les clients à voir des informations importantes liées au menu avant de commander |
| Formatting | Gras, italique, souligné et hyperliens | Vous permet de formater du texte important et d'ajouter des liens utiles |
| Character limit | Longueur maximale de l'avis | Les avis de menu prennent en charge jusqu'à `500` caractères |
#### Message de fermeture
Le **message de fermeture** est affiché lorsque votre magasin est fermé ou en pause.
Cela vous permet de personnaliser le message que les clients voient lorsque la commande n'est pas disponible.
| Paramètre | Ce qu'il affecte | Impact côté client |
| ---------------- | -------------------------------------------------------- | ----------------------------------------------------------------------------------------- |
| Closed message | Message affiché lorsque le magasin est fermé ou en pause | Explique pourquoi la commande n'est pas disponible ou quand les clients devraient revenir |
| Formatting | Gras, italique, souligné et hyperliens | Vous permet de formater le message et d'ajouter des liens utiles |
| Character limit | Longueur maximale du message | Les messages de fermeture prennent en charge jusqu'à `500` caractères |
| Reset to default | Restaure le message de fermeture par défaut | Utile si vous voulez revenir au message storekit standard |
#### Formatage et liens
Les deux types d'avis prennent en charge des options de formatage basiques :
* Gras
* Italique
* Souligné
* Hyperliens
Les hyperliens peuvent être utiles pour renvoyer à des informations supplémentaires, telles qu'un guide des allergènes, des conditions ou une autre page visible par le client.
Assurez-vous que les liens que vous ajoutez sont corrects et adaptés aux clients avant d'enregistrer.
#### Astuces avis
* Gardez les avis courts et clairs.
* Utilisez l'avis de menu pour les informations liées au menu, telles que les allergènes, les calories ou les frais de service.
* Utilisez le message de fermeture pour expliquer pourquoi la commande n'est pas disponible ou quand les clients devraient revenir.
* Supprimez ou mettez à jour les avis temporaires quand ils ne sont plus pertinents.
* Vérifiez que les avis n'entrent pas en conflit avec vos horaires d'ouverture, votre menu ou vos paramètres de service.
* Prévisualisez les avis sur mobile avant d'enregistrer.
Évitez d'ajouter des avis obsolètes, peu clairs ou susceptibles d'entrer en conflit avec d'autres paramètres du magasin.
***
### Statut de commande
La section **Order status** vous permet de personnaliser si une carte est affichée sur la page de statut de commande du client.
Cela peut aider les clients à comprendre les informations liées à l'emplacement ou à la livraison après avoir passé une commande.
#### Visibilité de la carte
La visibilité de la carte contrôle si la carte est affichée ou masquée sur la page de statut de commande.
| Option | Ce qu'elle fait |
| ------- | -------------------------------------------------- |
| Visible | Affiche la carte sur la page de statut de commande |
| Hidden | Masque la carte de la page de statut de commande |
#### Carte
Les paramètres de la carte vous permettent de personnaliser son apparence.
| Paramètre | Ce qu'il contrôle | Impact côté client |
| ---------- | -------------------------------- | ---------------------------------------------------- |
| Map style | Le style visuel de la carte | Change l'apparence de la carte pour les clients |
| Pin marker | Le marqueur affiché sur la carte | Aide à indiquer l'emplacement pertinent sur la carte |
#### Astuces statut de commande
* Utilisez **Visible** si la carte aide les clients à comprendre les informations d'emplacement ou de livraison.
* Utilisez **Hidden** si la carte n'est pas nécessaire pour votre flux de commande.
* Vérifiez la page de statut de commande après enregistrement, si possible.
* Assurez-vous que le marqueur ou l'emplacement affiché sur la carte est exact.
La carte peut n'apparaître que là où elle est prise en charge par la page de statut de commande et la configuration de votre magasin.
***
### Sections personnalisées
La zone **Custom sections** vous permet d'ajouter des blocs de contenu supplémentaires à votre page de commande.
Les sections personnalisées peuvent être utilisées pour mettre en avant des promotions, ajouter du contenu visuel, partager des informations sur l'établissement ou inclure des messages supplémentaires visibles par les clients qui ne rentrent pas dans la description standard ou les avis.
Les sections personnalisées doivent être activées par le support storekit. [Contactez le support storekit](/docs/fr/getting-started/contact-support) pour ajouter cette fonctionnalité à votre compte.
#### Ajouter une section
Vous pouvez choisir parmi plusieurs modèles de section :
| Type de section | Utilisation |
| --------------- | --------------------------------------------------------------------------------------------------- |
| Blank | Ajoute une section vide que vous pouvez personnaliser à partir de zéro |
| Hero | Ajoute une grande section visuelle avec une image de fond et un titre |
| Call to action | Ajoute une section conçue pour encourager les clients à effectuer une action, comme commander |
| Info card | Ajoute un simple bloc d'informations, tel que les horaires d'ouverture ou les détails de service |
| Announcement | Ajoute un bloc de message mis en évidence, tel qu'une promotion ou une mise à jour importante |
| About us | Ajoute une section visuelle pour partager l'histoire de votre établissement ou le message de marque |
***
#### Modifier les sections personnalisées
Après avoir ajouté une section, vous pouvez en modifier le contenu et le design depuis l'éditeur de section personnalisée.
Les contrôles disponibles peuvent inclure :
| Contrôle | Ce qu'il affecte |
| ----------------- | ----------------------------------------------------------------------------------------------------------- |
| Background colour | Définit la couleur de fond de la section |
| Background image | Ajoute ou modifie l'image de la section |
| Image position | Contrôle la position de l'image de fond, par exemple haut, centre ou bas |
| Padding | Ajuste l'espacement à l'intérieur de la section |
| Overlay | Ajoute une superposition de couleur sur l'image |
| Border | Ajoute ou ajuste la bordure de la section |
| Margin | Ajuste l'espacement au-dessus ou en dessous de la section |
| Text formatting | Vous permet de formater le texte à l'aide de gras, italique, souligné, titres, alignement, couleur et liens |
| Text size | Ajuste la taille du texte sélectionné |
| Links | Vous permet d'ajouter des hyperliens au texte de la section |
Les sections personnalisées prennent en charge les hyperliens. Assurez-vous que les liens que vous ajoutez sont corrects et adaptés aux clients avant d'enregistrer.
***
#### Hero
La section **Hero** ajoute une grande bannière visuelle à la page de commande.
C'est utile pour présenter votre établissement, montrer une image de marque forte ou mettre en avant un message clé près du menu.
Utilisations courantes :
* Messages de bienvenue
* Présentations de marque
* Campagnes saisonnières
* Imagerie mise en avant
* Contenu visuel à fort impact
#### Astuces hero
* Utilisez une image paysage de haute qualité.
* Gardez le contenu important centré.
* Utilisez un titre court et clair.
* Vérifiez que le texte reste lisible sur l'image.
* Utilisez une superposition si l'image de fond rend le texte difficile à lire.
* Vérifiez l'aperçu desktop et mobile avant d'enregistrer.
Les images hero peuvent être recadrées différemment selon la taille de l'écran. Évitez de placer du texte important, des logos ou des visages près des bords de l'image.
***
#### Call to action
La section **Call to action** est conçue pour encourager les clients à effectuer une action spécifique.
Elle inclut généralement un message court et un lien ou une invite de type bouton, comme commander maintenant ou consulter un menu.
Utilisations courantes :
* Encourager les clients à commander
* Promouvoir la livraison ou la collecte
* Renvoyer vers une page spécifique
* Mettre en avant une campagne
* Diriger les clients vers un autre service
#### Astuces call to action
* Gardez le message court et direct.
* Rendez l'action claire.
* Utilisez un lien si les clients doivent aller ailleurs.
* Vérifiez que le texte du call-to-action est facile à lire.
* Assurez-vous que la section a une bonne apparence sur mobile.
***
#### Info card
La section **Info card** est utile pour du contenu informatif simple.
Elle peut être utilisée pour afficher des détails dont les clients peuvent avoir besoin avant de commander.
Utilisations courantes :
* Horaires d'ouverture
* Informations de livraison
* Instructions de collecte
* Disponibilité du service
* Notes de localisation
* Coordonnées
#### Astuces info card
* Gardez les informations concises.
* Évitez d'ajouter trop de texte.
* Assurez-vous que les détails correspondent aux paramètres de votre magasin.
* Mettez à jour la carte si les informations changent.
* Vérifiez l'aperçu mobile avant d'enregistrer.
***
#### Announcement
La section **Announcement** ajoute un message mis en évidence à la page de commande.
C'est utile pour des promotions, des mises à jour temporaires ou des messages importants qui doivent ressortir.
Utilisations courantes :
* Offres à durée limitée
* Promotions de livraison gratuite
* Mises à jour de service
* Messages de vacances
* Changements temporaires
* Rappels importants
#### Astuces announcement
* Gardez les annonces courtes.
* Supprimez ou mettez à jour les annonces temporaires quand elles ne sont plus pertinentes.
* Assurez-vous que les détails promotionnels sont exacts.
* Vérifiez que l'annonce n'entre pas en conflit avec les avis, les paramètres du menu ou les paramètres de service.
* Utilisez des couleurs lisibles avec un contraste fort.
Évitez de laisser des annonces temporaires en ligne après qu'elles ne sont plus pertinentes.
***
#### About us
La section **About us** vous permet de partager plus sur votre établissement, votre marque, votre nourriture ou votre histoire.
C'est utile pour ajouter de la personnalité à votre page de commande et aider les clients à comprendre ce qui rend votre établissement unique.
Utilisations courantes :
* Histoire de l'établissement
* Message de marque
* Philosophie culinaire
* Informations sur l'approvisionnement local
* Message communautaire
* Origines du restaurant
#### Astuces about us
* Gardez un ton adapté aux clients.
* Évitez les longs paragraphes.
* Utilisez une image forte qui reflète votre établissement.
* Assurez-vous que le texte reste lisible sur le fond.
* Vérifiez la section sur mobile avant d'enregistrer.
***
#### Astuces pour les sections personnalisées
* Utilisez les sections personnalisées pour soutenir l'expérience de commande, pas pour en distraire.
* Gardez le contenu court et pertinent.
* Évitez d'ajouter trop de sections.
* Utilisez des images de haute qualité.
* Vérifiez le contraste du texte sur les images.
* Assurez-vous que les hyperliens fonctionnent avant d'enregistrer.
* Passez en revue l'intégralité de la page de commande sur mobile avant d'enregistrer.
Trop de sections personnalisées peuvent rendre la page de commande encombrée. Gardez la page centrée sur l'aide aux clients pour parcourir le menu et passer une commande.
***
## Bonnes pratiques
### Commencez avec des presets, puis personnalisez
Pour les couleurs, commencez avec un preset si vous voulez un thème rapide, puis ajustez manuellement les champs de couleur individuels.
Activez **Show contrast warnings** pendant l'édition pour vérifier si les combinaisons de couleurs texte/arrière-plan sont faciles à lire.
### Vérifiez les éléments interactifs
Avant d'enregistrer, vérifiez les actions client importantes telles que :
* Add to basket
* Sélection de modificateur
* Cartes de modificateurs sélectionnés
* View basket
* Checkout
* Page de statut de commande
* Liens des sections personnalisées
### Vérifiez le contenu restreint ou sensible
Si vous utilisez des contrôles d'âge, l'affichage des allergènes, l'affichage du stock faible ou les informations macros, assurez-vous que l'information est exacte avant d'enregistrer.
Portez une attention particulière à :
* Étiquettes d'allergènes
* Niveaux d'inventaire
* Articles soumis à un contrôle d'âge
* Informations nutritionnelles ou macros
* Visibilité des prix dans le panier
### Gardez les sections personnalisées focalisées
Les sections personnalisées doivent soutenir l'expérience de commande.
Utilisez-les pour des informations utiles adressées aux clients telles que :
* Promotions
* Horaires d'ouverture
* Informations de livraison ou de collecte
* Histoire de l'établissement
* Informations sur les allergènes ou le service
* Appels à l'action
Évitez d'ajouter trop de sections, car cela peut rendre le menu plus difficile à parcourir.
### Vérifiez l'aperçu mobile
La plupart des clients commandent depuis des appareils mobiles, alors vérifiez toujours l'aperçu mobile avant d'enregistrer.
Portez une attention particulière à :
* Le recadrage de l'image d'en-tête
* La visibilité du logo
* La mise en page du menu
* Les cartes d'articles du menu
* Les modals d'articles
* La sélection des modificateurs
* La visibilité du panier
* La mise en page du bouton de paiement
* La lisibilité des boutons
* Les avis
* Les sections personnalisées
* La carte de statut de commande, si utilisée
### Utilisez des images claires
Pour de meilleurs résultats :
* Utilisez des images carrées pour les logos et favicons.
* Utilisez des images paysage pour les en-têtes.
* Gardez le contenu d'image important centré.
* Évitez les images chargées en texte.
* Évitez de téléverser des images floues ou de mauvaise qualité.
### Gardez le texte concis
Un texte long peut rendre votre page de commande plus difficile à utiliser, notamment sur mobile.
Essayez de garder les éléments suivants courts et clairs :
* Descriptions du magasin
* Avis
* Sections personnalisées
* Descriptions de produits
### Priorisez la lisibilité
Lors du choix des polices et des couleurs, assurez-vous que les clients peuvent lire facilement :
* Noms de produits
* Descriptions de produits
* Prix
* Avis
* Totaux du panier
* Boutons de paiement
### Gardez le parcours de commande clair
Les changements de design doivent faciliter la commande, pas la compliquer.
Avant d'enregistrer, vérifiez que les clients peuvent facilement :
* Parcourir le menu
* Comprendre les options de produit
* Ajouter des articles au panier
* Consulter leur panier
* Poursuivre le paiement
* Passer une commande
***
## Dépannage
### Une section est verrouillée ou indisponible
Certaines sections Design & Branding ne sont disponibles qu'avec **storekit+**.
Si une section est verrouillée dans votre admin, [contactez le support storekit](/docs/fr/getting-started/contact-support) pour ajouter cette fonctionnalité à votre compte. Un abonnement **storekit+** est requis.
### Mon texte est difficile à lire sur une image
Si le texte est difficile à lire sur une image d'en-tête, une section hero ou une image de section personnalisée, essayez :
* Utiliser une superposition plus foncée ou plus claire
* Changer la couleur du texte
* Choisir une image plus simple
* Éloigner le texte important des zones chargées de l'image
* Vérifier la section sur mobile
### Mon menu semble encombré sur mobile
Si le menu semble trop encombré, vérifiez :
* Colonnes mobile
* Taille des images
* Direction des articles
* Grandes images
* Lignes de description d'article
* Nombre de lignes du nom d'article
* Images de navigation de catégorie
Utiliser moins de colonnes, des images plus petites ou des aperçus de description plus courts peut rendre le menu plus facile à parcourir.
### Mon modal d'article semble trop grand ou difficile à utiliser
Vérifiez :
* Style d'image du modal
* Vue desktop du modal
* Position du contenu
* Style des modificateurs
* Bordure du modal
* Taille de l'image de l'article
* Aperçu mobile
Ouvrez quelques produits avec modificateurs avant d'enregistrer.
### Les options de modificateur sont difficiles à comprendre
Vérifiez le style des modificateurs sélectionné.
Si les options de modificateur sont difficiles à parcourir, essayez une mise en page plus simple ou assurez-vous que les noms et images des modificateurs sont clairs.
### Les informations de stock faible ou d'inventaire semblent erronées
L'affichage du stock faible et de l'inventaire ne doit être utilisé que si les niveaux d'inventaire sont exacts et activement maintenus.
Si les chiffres semblent erronés, vérifiez les paramètres d'inventaire des articles avant de changer le style d'affichage.
### Les informations d'allergènes sont manquantes ou peu claires
L'affichage des allergènes contrôle la façon dont les informations d'allergènes apparaissent, mais les détails d'allergènes eux-mêmes peuvent devoir être gérés dans les paramètres pertinents des articles.
Vérifiez que les informations d'allergènes sont exactes avant de vous fier à l'affichage.
### Le panier n'affiche pas les prix comme prévu
Vérifiez le paramètre **Prices** dans la section Basket.
Les prix du panier peuvent être réglés sur :
* Show all
* Hide basket total
* Hide all
Soyez prudent lorsque vous masquez les prix, car les clients doivent clairement comprendre le coût de leur commande avant le paiement.
### Mon lien de section personnalisée ne fonctionne pas
Vérifiez que l'hyperlien est correct et adapté au client.
Assurez-vous que le lien inclut l'URL complète le cas échéant, puis enregistrez et testez-le sur la page de commande en direct.
### La carte de statut de commande ne s'affiche pas
Vérifiez :
* Que la visibilité de la carte est réglée sur **Visible**
* Que la page de statut de commande prend en charge la carte pour la configuration de votre magasin
* Que le marqueur ou l'emplacement de la carte a été correctement configuré
### Mes modifications apparaissent dans l'aperçu mais pas sur la page de commande en direct
Assurez-vous d'avoir cliqué sur **Save**. L'aperçu se met à jour au fur et à mesure de vos modifications, mais votre page de commande en direct ne sera pas mise à jour tant que les modifications n'auront pas été enregistrées.
Après avoir enregistré, actualisez votre page de commande en direct et vérifiez que vous consultez le bon magasin.
### Mon image semble recadrée
Certaines images, en particulier les images d'en-tête, sont automatiquement recadrées pour s'adapter aux différentes tailles d'écran.
Vérifiez l'aperçu mobile et utilisez une image où le contenu le plus important est centré.
Évitez de placer du texte important, des logos ou des visages près du bord des images d'en-tête, car ils peuvent être recadrés sur les petits écrans.
### Mon logo ou favicon semble déformé
Utilisez une image carrée pour les logos et les favicons.
Les fichiers PNG transparents fonctionnent généralement mieux pour les logos.
### Mes couleurs sont difficiles à lire
Vérifiez le contraste entre votre texte, votre arrière-plan et vos boutons.
Les clients doivent pouvoir lire clairement :
* Les noms de produits
* Les descriptions de produits
* Les prix
* Les avis
* Les totaux du panier
* Les boutons de paiement
### Mes boutons ne ressortent pas
Les couleurs des boutons doivent être clairement visibles par rapport au fond de la page.
Vérifiez les actions client importantes telles que :
* Add to basket
* View basket
* Checkout
* Place order
### La version mobile ne semble pas correcte
Passez à l'aperçu mobile et vérifiez :
* Le recadrage de l'image d'en-tête
* La visibilité du logo
* La navigation par catégorie du menu
* La mise en page des cartes de produit
* La visibilité du panier
* La lisibilité des boutons
* Les avis et sections personnalisées
### Mon avis n'est plus pertinent
Si un avis a été ajouté pour une mise à jour temporaire, pensez à le supprimer ou à le mettre à jour lorsqu'il ne s'applique plus.
Exemples :
* Mises à jour d'ouverture pendant les jours fériés
* Avis de retards de livraison
* Avis de fermeture temporaire
* Avis de collecte uniquement
* Avis de problèmes de cuisine
### Ma page semble trop encombrée
Trop de contenu peut rendre la page de commande plus difficile à utiliser.
Vérifiez si vous pouvez raccourcir ou supprimer :
* Les descriptions longues
* Les avis multiples
* Trop de sections personnalisées
* Les images chargées en texte
* Les informations répétées
***
## Quand contacter le support storekit
Contactez le support storekit si :
* Un paramètre ne s'enregistre pas.
* La page en direct ne se met pas à jour après enregistrement.
* Une section Design & Branding est verrouillée et vous souhaitez l'activer.
* Vous souhaitez ajouter une fonctionnalité qui nécessite **storekit+**.
* Vous ne trouvez pas l'option de design dont vous avez besoin.
* Une image ou une couleur ne s'affiche pas correctement.
* Le texte ou les boutons restent difficiles à lire après édition.
* Votre page de commande semble cassée après modifications.
* Une section personnalisée ne s'affiche pas comme prévu.
* Un hyperlien dans un avis ou une section personnalisée ne fonctionne pas.
* La carte de statut de commande n'apparaît pas comme prévu.
* Vous avez besoin d'aide pour personnaliser un élément de design non disponible dans Design & Branding.
## Related topics
- [Télécharger et imprimer les QR codes de votre magasin storekit](/docs/fr/guides/store-settings/qr-codes.md)
- [Trouver et partager l'URL de votre magasin storekit](/docs/fr/guides/store-settings/store-url.md)
- [Notices de magasin et messages de magasin fermé](/docs/fr/guides/store-settings/store-notices.md)
- [1. Créer votre magasin](/docs/fr/getting-started/launch/create-your-store.md)
- [4. Configurer les méthodes de fulfillment et la planification des commandes](/docs/fr/getting-started/launch/configure-fulfillment.md)