Nous allons voir dans ce tutoriel comment avoir le même bouton Ajouter au panier que sur Amazon

Pourquoi copier le style de ce bouton ?

Les internautes connaissent tous Amazon et sont habitués aux codes couleurs présent sur ce site.

Les clients se sentiront plus en confiance et seront plus enclin à passer à l’achat !

Cette couleur est d’ailleurs courante sur les boutiques d’e-commerce car elle convertit très bien.

Vous pouvez voir le résultat sur le site de démo: https://dgeodev.myshopify.com/products/produit-1

Comment l’installer ?

Rendez-vous dans: Online store -> Actions -> Edit CSS/HTML -> Assets -> theme.scss ou selon votre thème (style.scss, timber.scss…)

Rendez vous tout en bas du fichier et copier/coller le code ci-dessous:

#AddToCartForm .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 {
color: #111 !important;
background: #f0c14b !important;
background: linear-gradient( #ffe6a8, #e2b43f) !important;
border-color: #a88734 #9c7e31 #846a29 !important;
border-radius:4px !important;
}
#AddToCartForm .btn:hover, #addToCart:hover, #AddToCart--product-template:hover, .product__add-to-cart-button:hover, .product-form__cart-submit:hover, #addToCart-product-template:hover, .action_button add_to_cart:hover, .template-product .cont-content #addToCart:hover, .template-product #tab-1 #addToCartBis:hover, .template-product #addToCartBis:hover, .template-index .index-section--featured-product #addToCart:hover, .template-index .index-section--featured-product #addToCartBis:hover {
color: #111 !important;
background: #f0c14b !important;
background: linear-gradient( #ffe6a8, #e2b43f) !important;
border-color: #a88734 #9c7e31 #846a29 !important;
border-radius:4px !important;
opacity:0.9;
}

Vous avez maintenant un bouton Ajouter au Panier ou Acheter Maintenant selon vos choix de traduction façon Amazon !

Merci de me laisser une petite note 😉
[Note moyenne de: 5 sur 4 votes]

🤗 Vous souhaitez m'encourager à continuer mes Tutos ?

Cliquez sur le bouton ci-dessous pour me laisser un petit pourboire 😉

Payer un coup à Dgeo Dev

Cet article a 7 commentaires

  1. Bonjour le super développeur web!

    Le bouton « Ajouter au panier » rend vraiment bien maintenant, par contre juste en-dessous j’ai un 2ème bouton « Acheter maintenant » qui gâche un peu le rendu et aussi un 3ème « Passer à la caisse » sur la page d’après.

    Comment effacer le 2ème et appliquer le code sur le 3ème?

    Merci d’avance!
    Nurhan

    1. Hello, la ca reste du cas spécifique selon le thème et donc une intervention technique 🙁
      Bonne soirée

  2. Hello Dgeo !

    Savez vous comment faire pour simplement ajouter le petit chariot dans un bouton ajouter au panier « classique » ?

    Merci d’avance !

    Thib

    1. Hello, ca dépend bcp du thème utilisé mais c’est pas simple à mettre en place

  3. Bonjour moi j’utilise le Thème Début et le code prend en compte le bouton « Ajout au panier » et « Acheter maintenant ».IL y aurait pas une astuce pour juste un seul bouton.

  4. Top !
    Vu que certains propriété se répètent, il était possible de faire ça :

    #AddToCartForm .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,
    #AddToCartForm .btn:hover, #addToCart:hover, #AddToCart–product-template:hover, .product__add-to-cart-button:hover, .product-form__cart-submit:hover, #addToCart-product-template:hover, .action_button add_to_cart:hover, .template-product .cont-content #addToCart:hover, .template-product #tab-1 #addToCartBis:hover, .template-product #addToCartBis:hover, .template-index .index-section–featured-product #addToCart:hover, .template-index .index-section–featured-product #addToCartBis:hover {
    color: #111 !important;
    background: #f0c14b !important;
    background: linear-gradient( #ffe6a8, #e2b43f) !important;
    border-color: #a88734 #9c7e31 #846a29 !important;
    border-radius:4px !important;
    }

    #AddToCartForm .btn:hover, #addToCart:hover, #AddToCart–product-template:hover, .product__add-to-cart-button:hover, .product-form__cart-submit:hover, #addToCart-product-template:hover, .action_button add_to_cart:hover, .template-product .cont-content #addToCart:hover, .template-product #tab-1 #addToCartBis:hover, .template-product #addToCartBis:hover, .template-index .index-section–featured-product #addToCart:hover, .template-index .index-section–featured-product #addToCartBis:hover {
    opacity:0.9;
    }

  5. Top, contenu très utile. merci merci

Laisser un commentaire

Fermer le menu
×
×

Panier

Envie de Protéger le contenu de ton site ?

Speedecom te propose l'Application Shopify Speed Defender !
Elle va te permettre de protéger ton site des copieurs et protéger tes contenus, tes médias et même empêcher les raccourcis claviers et l'affichage du code source ;) !

N'hésite pas à la tester elle est Gratuite pendant 3 jours

Tester Speed Defender

Envie de Booster ton taux de conversion ?

Speedecom a créé une nouvelle Application Shopify qui devrait te plaire !
Elle va te permettre de créer des Bundles en direct checkout !
N'hésite pas à la tester elle est Gratuite pendant 7 jours

Tester Speed Bundle

Besoin d'un developpeur ?

Si tu as un besoin particulier sur ta boutique,
n'hésite pas à me contacter et à regarder mes prestations !

Consulter mes prestations