Réussi
Formulaire de connexion
Personnalisez la zone de connexion client avec du texte, des couleurs, des arrière-plans et des réglages de mise en page à l’image de votre marque.
- Documentation Shopify sur les sections et les blocs
- Documentation Company XYZ sur les paramètres d’arrière-plan de section
- Documentation Company XYZ sur les paramètres d’espacement de section
- Documentation Company XYZ sur les paramètres de séparateurs
- Documentation Company XYZ sur les paramètres de largeur de mise en page
Utilisez cette section pour contrôler la zone principale de connexion que les clients utilisent pour accéder à leur compte. Elle vous aide à affiner le message et la présentation de la page tout en gardant l’expérience de connexion claire et simple à utiliser.
Paramètres de base
Section intitulée « Paramètres de base »Les paramètres de base vous permettent de personnaliser le titre, le sous-titre et l’icône facultative affichée avec le formulaire de connexion. Pour une vue d’ensemble plus large de la configuration, consultez documentation Shopify sur les sections et les blocs. C’est le meilleur endroit pour ajouter un court message de bienvenue, préciser que la page est destinée aux clients existants ou harmoniser le ton avec le reste de votre boutique.
Si vous laissez le titre ou le sous-titre vide, la section peut utiliser à la place le contenu par défaut du thème. C’est utile lorsque vous souhaitez une configuration propre rapidement, mais un texte personnalisé crée généralement une expérience de compte plus soignée.
Paramètres de couleur
Section intitulée « Paramètres de couleur »Ces paramètres remplacent les couleurs générales de votre thème pour cette section uniquement. Utilisez-les lorsque la zone de connexion a besoin d’un contraste plus marqué, d’un ton plus doux ou d’un meilleur alignement avec un arrière-plan personnalisé.
Vous pouvez ajuster séparément l’icône, le texte principal et le sous-titre pour créer une hiérarchie visuelle claire. Si vous ajoutez une image, un dégradé ou une vidéo d’arrière-plan, vérifiez la section sur ordinateur et sur mobile pour vous assurer que le texte reste facile à lire. Des choix de couleurs explicites, des dégradés et des remplacements de média donnent à cette zone une impression plus autonome, tandis que des valeurs vides ou transparentes conservent généralement le style de secours du thème.
Les arrière-plans décoratifs ne doivent jamais nuire à la lisibilité. Si la zone de connexion devient plus difficile à parcourir, simplifiez l’arrière-plan ou augmentez la force de l’overlay et le contraste du texte.
Paramètres standard de section
Section intitulée « Paramètres standard de section »Paramètres d’arrière-plan de section
Section intitulée « Paramètres d’arrière-plan de section »Utilisez Paramètres d’arrière-plan de section pour ajouter une couleur, un dégradé, une image ou une vidéo derrière la section de connexion. Dans cette section, les arrière-plans fonctionnent mieux lorsqu’ils soutiennent votre marque sans détourner l’attention du formulaire.
La couleur et l’opacité de l’overlay aident à préserver la lisibilité sur les images et la vidéo. Les médias d’arrière-plan spécifiques au mobile sont particulièrement utiles lorsque l’image de bureau est recadrée de façon peu harmonieuse ou paraît trop lourde sur les petits écrans ; vérifiez donc les deux formats d’affichage si vous utilisez des médias différents pour chacun.
Paramètres d’espacement
Section intitulée « Paramètres d’espacement »Utilisez Paramètres d’espacement pour contrôler l’espace au-dessus et au-dessous du contenu de connexion. C’est utile lorsque la page paraît trop serrée ou lorsque vous souhaitez que la zone de connexion s’intègre plus confortablement dans la mise en page globale de la page.
L’espacement sur ordinateur et sur mobile peut être ajusté séparément, afin de conserver l’équilibre de la section sur toutes les tailles d’écran. Un espacement mobile plus serré aide souvent à faire apparaître le formulaire plus rapidement sans donner à la page un aspect encombré.
Paramètres de séparateur
Section intitulée « Paramètres de séparateur »Utilisez Paramètres de séparateur pour ajouter une ligne en haut ou en bas de la section. Sur une page de connexion, les séparateurs sont surtout utiles lorsque vous souhaitez une frontière plus nette entre cette section et le contenu environnant.
Un séparateur discret suffit généralement ici. Si vous laissez la couleur du séparateur transparente, la section revient au comportement général de la couleur de bordure.
Paramètres de largeur
Section intitulée « Paramètres de largeur »Utilisez Paramètres de largeur pour contrôler la largeur du contenu et l’extension globale de la section. Pour la plupart des pages de connexion, une largeur de contenu plus étroite permet au formulaire de rester centré sur l’essentiel et plus facile à parcourir.
La largeur de section compte surtout lorsque vous utilisez aussi un traitement d’arrière-plan. Si vous testez des mises en page pleine largeur ou full-bleed, prévisualisez-les aussi sur la boutique en ligne, car le cadrage de l’éditeur peut donner aux changements de largeur un rendu différent de celui de la page réelle.
Notes d’utilisation
Section intitulée « Notes d’utilisation »- Gardez un message bref. Utilisez un titre direct et un texte d’accompagnement concis pour que les clients puissent se connecter rapidement.
- Protégez le contraste. Lorsque vous utilisez des images, des dégradés ou une vidéo, ajustez les overlays et les couleurs du texte jusqu’à ce que la section reste facile à lire d’un coup d’œil.
- Vérifiez les deux formats d’affichage. Les contrôles pour ordinateur et mobile peuvent modifier la mise en page, l’alignement, la visibilité et le recadrage ; examinez donc le formulaire de connexion sur les deux tailles d’écran avant de publier.
- Privilégiez des largeurs ciblées. Une zone de contenu plus étroite convient généralement mieux aux pages de connexion que des mises en page larges, car elle maintient l’attention sur le formulaire.
- Ajustez l’espacement mobile. Réduisez l’espacement mobile si le formulaire se trouve trop bas sur les petits écrans.
- Utilisez des états clairs. Gardez les messages de succès et d’erreur faciles à lire afin que les clients puissent se rétablir rapidement lorsque le formulaire est vide, soumis ou affiche un retour de validation.