Comment Arrondir les Boutons sur Shopify

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:

form .btn, #addToCart, #AddToCart--product-template, .product__add-to-cart-button, .product-form__cart-submit, #addToCart-product-template, .action_button, .add_to_cart, .template-product .cont-content #addToCart, .template-product #tab-1 #addToCartBis, .template-product #addToCartBis, .template-index .index-section--featured-product #addToCart, .template-index .index-section--featured-product #addToCartBis, .template-product .cont-content #addToCartProduct, .rounded, .add-to-cart, .ProductForm__AddToCart, .product-form__submit { 
  border-radius:25px !important;
}

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 !

Inclus dans Speedfly
Merci de me laisser une petite note 😉
[Note moyenne de: 5 sur 9 votes]

Besoin d'aide ?

Vous avez un problème pour faire fonctionner ce tutoriel ou vous avez un besoin spécifique ?
Nous pouvons le faire pour vous ! pour ce faire merci de prendre contact avec notre équipe.

En savoir plus

🤗 Vous souhaitez me remercier pour mes Tutos ?

Cliquez sur le bouton ci-dessous pour m'encourager à continuer 😉

Payer un Café à Dgeo Dev

Besoin de déléguer votre SAV ?

Si vous avez besoin d'une personne pour gérer votre SAV j'ai la perle rare 😉 contactez moi en MP ou cliquez sur le bouton ci-dessous:

Je veux déléguer mon SAV

🤗 Vous souhaitez me remercier pour mes Tutos ?

Cliquez sur le bouton ci-dessous pour m'encourager à continuer 😉

Payer un Café à Dgeo Dev

Cet article a 20 commentaires

  1. Salim

    12 Oct 2020 Répondre

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

    1. Dgeo Dev

      12 Oct 2020 Répondre

      Hello 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

  2. Matéo

    26 Oct 2020 Répondre

    Bonjour, il n’est pas compatible avec Fastlane…

    1. Dgeo Dev

      26 Oct 2020 Répondre

      Hello, 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

  3. Marc-Ansley SAINVIL

    17 Nov 2020 Répondre

    Bonjour,

    Comment faire pour arrondire le bouton ACHETER MAINTENANT ?

  4. Kévin

    3 Jan 2021 Répondre

    Bonjour,
    J’ai essayer le code sur le thème narative, seulement le bouton s’arrondit mais il reste un carré autour de celui-ci !

    1. Dgeo Dev

      3 Jan 2021 Répondre

      Hello, Narative est assez spécial y a un filtre par dessus le btn, essayez de code css : .btn:after { display:none; }

  5. nono

    26 Jan 2021 Répondre

    bonjour merci pour tout t’es tuto !! par contre sur debut je ne trouve pas le xxx.scss c’est normal ?

    1. Dgeo Dev

      27 Jan 2021 Répondre

      C’est theme.scss.liquid

  6. Éloïse

    1 Mar 2022 Répondre

    Ça ne fonctionne pas 🙁

    1. Dgeo Dev

      2 Mar 2022 Répondre

      Hello, cela dépend du thème 🙂 quel est le votre ?

  7. Marax

    21 Avr 2022 Répondre

    avec le thème. motion stpppppp

  8. Marax

    21 Avr 2022 Répondre

    bonjour cela ne fonctionne pas pour le thème motion et prestige

    1. Dgeo Dev

      22 Avr 2022 Répondre

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

  9. Amine

    13 Oct 2022 Répondre

    Bonjour, 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 !

    1. Dgeo Dev

      14 Oct 2022 Répondre

      Hello, 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

  10. Gabriel

    6 Août 2023 Répondre

    Hello, 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 !

  11. Gabrielle

    19 Oct 2023 Répondre

    Salut, ça ne fonctionne pas avec mon thème : Motion 10.1.0

    1. Dgeo Dev

      6 Nov 2023 Répondre

      Hello aurais tu l’url de la demo de ce thème que je puise l’analyser et le rendre compatible avec mon tuto svp ?

Laisser un commentaire

Fermer le menu
×
×

Panier