Skip to main content
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 :

Avant de commencer

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 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.

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.

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.

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

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

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.

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.

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.

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.

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.
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.

Style d’image du modal

Vue desktop du modal

Position du contenu

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.

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é.
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.
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.

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.
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. 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. 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.

Personnaliser les images des articles

L’option Customise vous permet d’affiner la taille des images du panier.

Prix

L’affichage des prix contrôle la façon dont la tarification apparaît 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.

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 pour ajouter cette fonctionnalité à votre compte. Un abonnement storekit+ est requis.

Ce que vous pouvez personnaliser

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.

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.

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.

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.

Carte

Les paramètres de la carte vous permettent de personnaliser son apparence.

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 pour ajouter cette fonctionnalité à votre compte.

Ajouter une section

Vous pouvez choisir parmi plusieurs modèles de section :

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 :
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 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.