Page de connexion

Ce que vous apprendrez

  • Comment activer et personnaliser le modèle de page de connexion pour les comptes clients hérités

  • Comment modifier l'apparence du formulaire de connexion à l'aide des paramètres du thème

  • Comment ajuster le texte, les styles de bouton, la disposition et les liens

🧩 Aperçu

Cette page de connexion fait partie de système de compte client hérité et est entièrement personnalisable via l'éditeur de thème. Elle prend en charge les blocs de mise en page personnalisés, les images latérales et les champs de saisie stylisés — offrant un contrôle visuel complet de l'expérience de connexion client.

⚠️ Cette page de connexion s'applique uniquement lorsque Comptes clients hérités sont activés sous Paramètres > Comptes clients.

🎨 Structure de la page

La page de connexion est composée des sections suivantes :

  • Logo & Horloge (Optionnel)

  • Formulaire de connexion (Fonctionnalité principale)

  • Lecteur de musique (Optionnel)

  • Pied de page (Optionnel)

✏️ Personnalisation du formulaire de connexion

Accédez à Éditeur de thème → Modèles → customer/login.liquid Cliquez sur la Formulaire de connexion bloc pour commencer la personnalisation.

🔳 Image latérale de connexion

  • Choisir une image – Téléchargez ou sélectionnez une image de marque

  • Position de l'image latérale – Choisir gauche ou droite

  • Courber l'image latérale – Ajoute des coins arrondis

  • Supprimer l'image latérale – Basculer pour masquer complètement

🧾 Contenu de l'en-tête de connexion

  • Texte de l'en-tête – Titre du bloc de connexion (par ex. « Se connecter » ou « Bon retour »)

  • Texte du sous-titre – Brève description ou message personnalisé

Vous pouvez aussi personnaliser les couleurs du texte de l'en-tête et du sous-en-tête.

🔐 Champs de saisie

Chaque champ du formulaire dispose de ses propres paramètres de conception :

Champ e‑mail

  • Couleur du libellé

  • Couleur de la bordure

  • Couleur du texte

Champ mot de passe

  • Couleur du libellé

  • Couleur de la bordure

  • Couleur du texte

🔘 Bouton de connexion

Personnaliser :

  • Texte du bouton (par ex. « Entrer » ou « Se connecter »)

  • Couleur du texte

  • Couleur d’arrière-plan

Utilisez un contraste prononcé pour préserver l'accessibilité.

❗ Style des erreurs

Définissez le Couleur du texte d'information d'erreur de connexion pour correspondre au style d'alerte de votre marque (généralement rouge).

🔗 Liens supplémentaires

Vous pouvez mettre à jour le texte et la couleur pour :

  • Lien d'inscription

  • Lien Mot de passe oublié

  • Lien Retour au magasin

Ils apparaissent sous ou autour du formulaire de connexion.

🎨 Divers

  • Champs et boutons arrondis – Activez pour des coins arrondis sur les champs et le bouton de connexion.

✅ C'est terminé !

Votre page de connexion personnalisée est maintenant entièrement stylisée et en ligne à : votreboutique.com/account/login

💡 Astuce : Associez ceci aux documents « Page d'inscription » et « Page de compte » pour construire entièrement le parcours client.

Une fois les comptes hérités activés, utilisez les pages de documentation de cette section pour styliser chaque partie de l'expérience client.

PrécédentComment configurer des comptes clientSuivantPage d'inscription

Mis à jour