Comment Faire un Bouton Amazon sur Shopify ?

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 -> Ressources (Assets) -> base.css, theme.css, style.css ou autre fichier .css que votre thème utilise

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, .template-product .cont-content #addToCartProduct { 
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, .template-product .cont-content #addToCartProduct: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;
}

Pour Speedfly –  sur le bouton Acheter maintenant

.shopify-payment-button__button--unbranded {
color: #111 !important;
background: #f0c14b !important;
background: linear-gradient( #ffe6a8, #e2b43f) !important;
border-color: #a88734 #9c7e31 #846a29 !important;
border-radius:4px !important;
}
.shopify-payment-button__button--unbranded: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;
}

Pour Speedfly – sur le bouton des pages collections

.grid-uniform #addToCart, .grid-uniform #addToCartBis, .grid-uniform #addToCart2, .grid-uniform .addToCart {
color: #111 !important;
background: #f0c14b !important;
background: linear-gradient( #ffe6a8, #e2b43f) !important;
border-color: #a88734 #9c7e31 #846a29 !important;
border-radius:4px !important;
}
.grid-uniform #addToCart:hover, .grid-uniform #addToCartBis:hover, .grid-uniform #addToCart2:hover, .grid-uniform .addToCart: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 !

Ce tutoriel existe aussi en vidéo

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 29 commentaires

  1. Nurhan

    28 Déc 2018 Répondre

    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. Dgeo Dev

      31 Déc 2018 Répondre

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

  2. Thib

    12 Fév 2019 Répondre

    Hello Dgeo !

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

    Merci d’avance !

    Thib

    1. Dgeo Dev

      20 Fév 2019 Répondre

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

  3. fasquel

    31 Mai 2019 Répondre

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

    2 Oct 2019 Répondre

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

    13 Déc 2019 Répondre

    Top, contenu très utile. merci merci

  6. Mar Arellano

    19 Fév 2020 Répondre

    Bonjour vous allez bien,
    Je voudrais afficher « Il y a actuellement 112 visiteurs sur cette page » ce petit compteur sur toutes les pages produits.
    Merçi déjà pour votre aide 🙂

    1. Dgeo Dev

      21 Fév 2020 Répondre

      Hello 🙂 ce tuto n’existe plus car il n’est pas légal d’afficher un compteur fake 🙂

  7. Mar Arellano

    21 Fév 2020 Répondre

    Ok, j’utilise un thème SpeedFly,dans lequel cette option est intégré,euuh! Je dois pas l’utiliser ???

    1. Dgeo Dev

      26 Fév 2020 Répondre

      Hello, non il n’est pas dispo dans le thème mais le hack fonctionne 🙂

  8. Mar Arellano

    9 Mar 2020 Répondre

    Ok,merci Mr

  9. Mar Arellano

    13 Mar 2020 Répondre

    Dans la page produit,Je veux personnalisé des textes, comment Pouvez vous m’aider svp
    Thème SpeedFly

    1. Dgeo Dev

      13 Mar 2020 Répondre

      Oui c’est possible mais il faudra plutôt contacter le support speed Ecom qui vous répondra pour tout ce qi touche Speedfly 😉 speedecom.freshdesk.com

  10. Mar Arellano

    13 Mar 2020 Répondre

    J’ai la traduction mais je ne trouve pas de moyen pour le personnaliser

    1. Dgeo Dev

      13 Mar 2020 Répondre

      Hello, c’est dans actions – modifier la langue et rechercher le terme souhaité

  11. SANCHES

    4 Avr 2020 Répondre

    Bonjour,
    Merci pour vos tutos sinon depuis peu de jours le bouton « acheter avec paypal » est de retour en version mobile avec le navigateur chrome comment faire pour le supprimer ?

    1. Dgeo Dev

      6 Avr 2020 Répondre

      Hello, merci pour le message, c’est parce que vous avez votre paypal de connecté 😉 ce bouton s’adapte aux moyens de paiement connectés de l’internaute.

  12. Mike

    4 Mai 2020 Répondre

    Salut, merci pour ces bons tutos GRATUITS ! J’utilise Speedfly est-il possible d’obtenir cette variante de bouton dans les pages collections également et pas que sur les pages produits ? Merci d’avance 😉

    1. Dgeo Dev

      5 Mai 2020 Répondre

      Hello, oui 🙂 fais ta demande au support ici 😉 speedecom.freshdesk.com

  13. Alex

    12 Juin 2020 Répondre

    Hello Dgeo. D’abbord merci infiniment pour tous ces tutos. Je suis sur Debut et la plupart fonctionnent bien.
    Ici j’ai ajouté le bouton ajouter au panier dans les produits en featured collection sur la page d’accueil mais le bouton ne change pas de couleur.
    Je n’ai pas vu la balise  » btn addToCart add-cart-secondary  » , je pense que c’est ça mais je ne sais pas où et comment l’ajouter.
    Merci Beaucoup. Ciao

  14. vaco

    30 Août 2020 Répondre

    Hello, merci pour ce tuto. Comment faire pour afficher ce bouton d’ajout au panier sur la page panier ?

    1. Dgeo Dev

      31 Août 2020 Répondre

      Hello, il faut bidouiller un peu avec le CSS mais vu que tous les thèmes sont différents faudra demander au support du thème en question 🙂

  15. Hidaya

    21 Oct 2020 Répondre

    bonjour,
    Merci pour ce tuto.
    Comment puis je l’appliquer sur le bouton « procéder au paiement » sur la page panier vue que j’ai le thème Brooklyn.
    Merci pour ton aide

    1. Dgeo Dev

      23 Oct 2020 Répondre

      Hello, il faut s’y connaitre un peu en css pour le faire au besoin voici une petite vidéo qui pourrait vous aider à le faire : https://youtu.be/MItTZYhn_iE

  16. HAdrien

    3 Fév 2021 Répondre

    Hey Dgeo merci pour ton tuto, j’ai suivi ton tuto puis mis un vert qui me correspondait, par contre je n’arrive pas à changer la couleur du texte qui reste noire, saurais-tu comment faire ?

    1. Dgeo Dev

      4 Fév 2021 Répondre

      Bonjour, il faut modifier le color:#… et mettre color:#FFFFFF;

  17. Pablo

    10 Nov 2021 Répondre

    Salut Dgeo, ces sections n’existent pas dans le thème dawn, une idée de ou je peux placer cela,?

    1. Dgeo Dev

      11 Nov 2021 Répondre

      Helllo, oui dans main-product.liquid

Laisser un commentaire

Fermer le menu
×
×

Panier