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 Assets et trouvez votre fichier theme.scss.liquid ou style.scss.liquid ou timber.scss.liquid 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 { 
  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 😉

Voila bon tuto à toutes et tous !

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

Cet article a 2 commentaires

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

Laisser un commentaire

Fermer le menu

Envie d'apprendre à Coder et Maitriser ton Thème Shopify  ?

Alors abonne-toi à la chaine et active la cloche pour ne pas louper l'arrivée des prochaines vidéos !

S'abonner à la chaine