Nous allons voir dans ce tutoriel Comment faire des arrondis sur les boutons d’actions comme le Ajouter au panier sur Shopify. Certains sites brandés utilisent des formes arrondies pour donner du style à leur identité graphique ! C’est effectivement une bonne idée et ça peut rendre vraiment sympa ! bien sur certaines niches s’y prêtent plus que d’autres.
Site de démo : https://dgeodev.myshopify.com/
Ce code est-il compatible sur tous les thèmes Shopify ?
Le code que je propose ci-dessous est un code générique pour que vos boutons ajouter au panier soient arrondis. Par contre si après le copiez/collez vos boutons ne changent pas alors il faudra donner le nom de votre thème en commentaire afin que je le rende compatible avec ce tutoriel Shopify 😉
Comment mettre en place un bouton arrondi ?
Et bien c’est très simple ! pas de long discours cette fois ci on va juste copier/coller le code ci-dessous dans votre fichier CSS !
Rendez-vous dans Boutique en ligne – Actions – Modifier le code – Ouvrez le dossier Ressources (Assets) et trouvez votre fichier base.css, theme.css, style.css ou autre fichier .css que votre thème utilise bref un fichier xxx.scss.liquid 😉 A ce stade mettez vous tout en bas du fichier et copiez/collez le code suivant:
Il ne vous reste plus qu’a varier l’intensité de l’arrondi en modifiant la valeur 25px ! essayez 5px, 35px etc… bref testez ce qui vous plait le plus ;). De plus il est également possible de styliser le bouton ajouter au panier comme amazon !
Cela de fonctionne pas ? regardez la section « Ce code est-il compatible sur tous les thèmes ? ».
Est-il possible de le mettre sur d’autres boutons ?
Certains thèmes proposent des boutons d’actions différents que le simple ajouter au panier. Alors comment mettre des arrondis sur ces boutons ?
Dans un premier temps vous ne pourrez pas le faire sur les boutons de direct checkout que propose Shopify car ces boutons sont appelés par shopify et non par le thème, ce qui rend difficile sa prise en charge. En réalité cela serait possible mais trop compliqué à faire et à expliquer sur un simple tuto 🙂
Dans un second temps vous avez les boutons en savoir plus souvent présent sur votre page d’accueil. Ceux-ci sont parfaitement modifiables. En effet il vous suffit de repérer la classe de votre bouton et de l’ajouter à la liste des classes du code ! Si vous ne savez pas comment faire je vous invite à visionner ma formation « Maitrise ton thème Shopify » et vous saurez comment faire 😉
Ce tutoriel existe aussi en vidéo
Voila bon tuto à toutes et tous !
Salim
12 Oct 2020Salut et merci pour tes tutos ! 🙂 Est ce possible de modifier l’arrondie des boutons avec le theme Debutify ? Car en appliquant ton tuto il semble que la page crash complètement aha. Merci encore.
Dgeo Dev
12 Oct 2020Hello et merci pour le message 🙂 navré je ne connais pas ce thème mais après l’avoir regardé il suffit de rajouter la classe .btn dans la liste des classes 🙂 si vous ne vous y connaissais pas en class css je vous invite à regarder cette vidéo: https://youtu.be/MItTZYhn_iE
Matéo
26 Oct 2020Bonjour, il n’est pas compatible avec Fastlane…
Dgeo Dev
26 Oct 2020Hello, faudra identifier l’identifiant du bouton de Fastlane pour le rajouter dans le code 🙂 au besoin une tuto pour comprendre le css: https://youtu.be/MItTZYhn_iE
Marc-Ansley SAINVIL
17 Nov 2020Bonjour,
Comment faire pour arrondire le bouton ACHETER MAINTENANT ?
Dgeo Dev
19 Nov 2020Bonjour, c’est délicat mais avec ce tuto et de bases css c’est possible 😉 https://dgeodev.com/comment-arrondir-bouton-shopify/
Kévin
3 Jan 2021Bonjour,
J’ai essayer le code sur le thème narative, seulement le bouton s’arrondit mais il reste un carré autour de celui-ci !
Dgeo Dev
3 Jan 2021Hello, Narative est assez spécial y a un filtre par dessus le btn, essayez de code css :
.btn:after { display:none; }
nono
26 Jan 2021bonjour merci pour tout t’es tuto !! par contre sur debut je ne trouve pas le xxx.scss c’est normal ?
Dgeo Dev
27 Jan 2021C’est theme.scss.liquid
Éloïse
1 Mar 2022Ça ne fonctionne pas 🙁
Dgeo Dev
2 Mar 2022Hello, cela dépend du thème 🙂 quel est le votre ?
Marax
21 Avr 2022avec le thème. motion stpppppp
Marax
21 Avr 2022bonjour cela ne fonctionne pas pour le thème motion et prestige
Dgeo Dev
22 Avr 2022Hello, j’ai mis à jour le tuto avec la prise en compte de Prestige et Motion 😉 tu peux mettre le nouveau code et cela devrait fonctionner.
Amine
13 Oct 2022Bonjour, je vous suis depuis 3 ans, j’avais le thème « Début » je n’avais aucun problème, tous vos tutoriels fonctionnaient parfaitement, maintenant que j’ai le thème « Dawn » Rien ne veut plus fonctionner, pouvez-vous s’il vous plaît faire les mises à jour pour le nouveau thème ? s’il vous plaît !
Dgeo Dev
14 Oct 2022Hello, merci pour la fidélité c’est gentil 🙂 Oui bons nombres de tutos ont été adaptés et fonctionnent sur Dawn mais pas tous – c’est en cours mais c’est long car j’en ai 112 :p bonne journée
Gabriel
6 Août 2023Hello, incroyable ce code mais j’ai un soucis avec le thème Sense il me reste un cadre blanc autour du bouton .. comment y remédier ? merci pour tous !
Gabrielle
19 Oct 2023Salut, ça ne fonctionne pas avec mon thème : Motion 10.1.0
Dgeo Dev
6 Nov 2023Hello aurais tu l’url de la demo de ce thème que je puise l’analyser et le rendre compatible avec mon tuto svp ?