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

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

4 commentaires sur “Tuto Comment Faire un Bouton Amazon sur Shopify

  1. Nurhan

    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

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

*
*