Si vous souhaitez apprendre à ajouter un contour à vos boutons Shopify pour améliorer l'apparence et le taux de conversion de votre boutique, ce guide étape par étape est fait pour vous. Dans ce guide, nous vous expliquons comment ajouter des bordures ou des contours aux boutons de votre boutique Shopify.
Avant d'ajouter un contour à votre bouton Shopify, comprenez l'importance des boutons dans le commerce électronique.
Contactez-nous pour toute aide Shopify
Importance de la conception des boutons dans le commerce électronique
Une mauvaise conception de bouton peut diminuer le taux de conversion de votre site de commerce électronique car elle impacte directement l'expérience utilisateur. Vous devez concevoir vos boutons correctement pour les raisons principales suivantes :
1. Points importants du parcours d'achat de l'utilisateur
Les boutons sont les points principaux du parcours d'achat de l'utilisateur pour un site web de commerce électronique. Ils guident les utilisateurs à entreprendre des actions spécifiques comme "Ajouter au panier", "Acheter maintenant" ou "Télécharger maintenant".
2. Améliore la visibilité
Une conception, une couleur et un placement appropriés du bouton sur une page améliorent la visibilité, facilitant la recherche et l'action. Cela augmentera le taux de conversion de votre boutique.
3. Bâtit la confiance
La conception cohérente des boutons et la palette de couleurs renforcent la confiance des clients et améliorent la valeur de la marque.
4. Crée une hiérarchie visuelle
Créez une hiérarchie visuelle appropriée pour indiquer l'importance de l'action ; par exemple, les boutons d'appel à l'action principaux devraient être plus proéminents que les boutons d'action secondaires.
5. Augmente les taux de conversion
Un bouton bien conçu et bien placé peut stimuler les taux de conversion ; il facilite la recherche et l'exécution des actions souhaitées en convertissant les clients potentiels et les acheteurs.
Qu'est-ce que le contour (bordure) sur les boutons ?
Un contour est une bordure de conception ; il s'agit fondamentalement d'un cadre qui entoure les boutons ou toute autre forme. Dans Shopify, vous pouvez modifier la couleur, l'épaisseur, le style ou l'opacité du contour. Vous pouvez utiliser les contours pour :
1. Définit la forme du bouton
Vous pouvez modifier la forme du contour (rectangulaire, circulaire ou arrondie) en fonction de votre image de marque.
2. Crée un contraste visuel
Le contour crée un contraste visuel entre le bouton et l'arrière-plan. Par exemple, si vous allumez un bouton de couleur sur un fond blanc, un contour crée un contraste visuel.
3. Améliore la cliquabilité
Un contour bien conçu améliore la cliquabilité du bouton.
4. Ajoute de la profondeur et de la dimension
Le contour donne au bouton un effet 3D qui ressemble à un élément réel ou physique.
5. Soutient l'image de marque et le style
Vous pouvez personnaliser les boutons pour qu'ils correspondent à l'image de marque et à l'esthétique de votre boutique Shopify.
6. Améliore l'accessibilité
Lorsque vous ajoutez des contours aux boutons, les visiteurs peuvent les voir même dans des conditions de faible luminosité.
Différents styles de contour que vous pouvez ajouter aux boutons
Il existe différents styles de contour que vous pouvez ajouter au bouton de votre boutique Shopify. Nous mentionnons ici quelques-uns des styles de contour et leurs cas d'utilisation.
#1 Contour plein -
Un contour plein est une ligne continue et ininterrompue autour du bouton. Il est idéal pour les boutons d'appel à l'action principaux tels que "Acheter maintenant", "Soumettre" ou "Télécharger".
#2 Contour en tirets ou points -
Convient aux actions secondaires comme "En savoir plus" ou "Fonctionnalités optionnelles".
#3 Double contour -
Ce type de contour est souvent utilisé sur les sites web de marques de luxe ou premium où une apparence plus raffinée est souhaitée.
#4 Contour dégradé -
Idéal pour les boutiques de commerce électronique modernes, pour des actions comme "S'inscrire" ou "Démarrer".
#5 Contour intérieur -
Ce type de contour est utilisé avec des boutons d'appel à l'action tels que "Démarrer" ou "Procéder".
#6 Contour de forme -
Couramment utilisé pour les boutons secondaires ou tertiaires comme "Annuler" ou "Plus d'infos".
#7 Contour néon ou lumineux -
Ce style de contour est idéal pour les boutons accrocheurs sur les sites web de divertissement ou de jeux, tels que "Jouer maintenant" ou "Rejoindre le club".
#8 Contour en relief/gravé -
Ce style de contour est utilisé pour imiter des éléments du monde réel comme les panneaux de commande et les tableaux de bord.
#9 Contour flou -
Ce style de contour convient aux boutons d'arrière-plan ou lorsque l'accent est mis sur le texte ou l'icône à l'intérieur du bouton plutôt que sur le bouton lui-même.
#10 Contour texturé -
Le contour texturé est souvent utilisé dans des designs de niche, comme les sites web liés à l'artisanat, les interfaces à thème rustique ou les marques de luxe haut de gamme.
Si vous avez lu jusqu'ici, vous avez appris l'importance de la conception des boutons, les types de styles de contour et leurs cas d'utilisation. Passons maintenant directement au guide étape par étape.
Comment ajouter un contour à vos boutons Shopify ?
L'ajout d'un contour (ou bordure) aux boutons dans Shopify peut être effectué en personnalisant le CSS de votre thème Shopify. Voici un guide étape par étape :
-
Accédez à votre administration Shopify
- Connectez-vous à votre tableau de bord d'administration Shopify.
-
Naviguez vers les Thèmes
- Allez dans Boutique en ligne > Thèmes.
-
Modifier le code
- Dans la section "Thème actuel", cliquez sur Actions > Modifier le code.
-
Trouver le fichier CSS
- Localisez le fichier CSS de votre thème, généralement nommé `theme.css`, `styles.css`, ou similaire, trouvé sous Actifs.
-
Ajouter du CSS pour le contour du bouton
- Ajoutez le code CSS suivant en bas du fichier pour ajouter un contour à tous les boutons :
css
.btn {
border: 2px solid #000; /* Changez #000 pour la couleur de votre choix */
padding: 10px 20px; /* Ajustez le rembourrage si nécessaire */
border-radius: 5px; /* Ajustez le rayon de la bordure pour les coins arrondis si désiré */
}
- Si vous souhaitez cibler des boutons spécifiques, vous devrez peut-être utiliser des sélecteurs plus spécifiques comme `.btn-primary`, `.btn-secondary`, ou des noms de classes personnalisés associés au bouton.
-
Enregistrez vos modifications
- Une fois que vous avez ajouté le code, cliquez sur Enregistrer.
-
Prévisualisez et testez
- Prévisualisez votre boutique pour voir les changements. Assurez-vous que le contour apparaît correctement sur tous les boutons.
-
Ajustez si nécessaire
- Vous devrez peut-être ajuster le CSS si le contour ne semble pas comme prévu. Modifiez l'épaisseur de la bordure, la couleur ou le remplissage pour obtenir l'apparence souhaitée.
Cette méthode vous permet d'ajouter un contour à vos boutons dans l'ensemble de votre boutique Shopify. Si vous ne souhaitez ajouter un contour qu'à des boutons spécifiques, vous pouvez modifier le sélecteur CSS en conséquence.
Plus de guides pour personnaliser les boutons de votre boutique Shopify
- Comment rendre les boutons d'achat plus carrés sur Shopify ?
- Quels sont les avantages d'ajouter un bouton Acheter maintenant à un site web de commerce électronique ?
Derniers mots
Après avoir lu ce guide complet, vous pouvez non seulement ajouter des contours aux boutons de votre boutique Shopify, mais aussi les personnaliser pour leur donner une apparence esthétique en fonction du design de votre boutique. Si vous rencontrez toujours des problèmes, vous pouvez nous contacter pour obtenir de l'aide en matière de conception et de développement de boutiques Shopify. Nous avons une équipe de développeurs experts Shopify qui sont experts dans la personnalisation et le développement de boutiques selon vos exigences.