Rendre visible le bouton "Ajouter au panier" dans Shopify sans App

Published: Fri 14 September 2018 by L.Drolez In Software

tags: shopify francais css marketing

De nombreux spécialistes de la vente en ligne nous conseillent de mettre en valeur ce tant aimé bouton "Ajouter au panier" sur nos pages produit.

Pour Shopify de nombreuses extensions existent pour faire cela, mais comme vous le savez, plus vous ajoutez d'extensions, plus votre site est lent, et plus Google vous pénalise dans les résultats de recherche. Pour chaque seconde que votre site met en plus à se charger, vous perdez 10% de visiteurs, de clients potentiels et de conversions. Sans compter que certaines extensions sont payantes. Aussi Snapchat for Business, rejettera vos pubs si votre site met plus de 6 secondes a se charger. A ce propos je vous conseille d'utiliser Google Pagespeed pour vérifier que les App ne ralentissent pas trop votre boutique.

Alors nous allons voir comment mettre en valeur ce bouton, facilement, en ajoutant un peu de code HTML dans nos templates, et avoir cet effet "lueur".

bouton ajouter au panier

Pour cela nous allons éditer le template "product-template.liquid" (si vous utilisez le thème Debut) et ajouter le texte suivant dans le bas du template avant la ligne "{% schema %}".

<script type='text/javascript'>
  window.onload = function () {
      $('head').append('<style>.pulse-primary {animation: pulse-primary 3s infinite;} \
      @-webkit-keyframes pulse-primary { \
        0% { -webkit-box-shadow: 0px 0px 16px 5px rgba(0, 170, 255, .8); color: rgba(255, 255, 255, 1); } \
        85% { -webkit-box-shadow: 0px 0px 16px 5px rgba(0, 170, 255, 0);} \
        100% { -webkit-box-shadow: 0px 0px 16px 5px rgba(0, 170, 255, .8); color: rgba(255, 255, 255, 1); } }\
      @keyframes pulse-primary { \
        0% { -moz-box-shadow: 0px 0px 16px 5px rgba(0, 170, 255, .8); box-shadow: 0px 0px 16px 5px rgba(0, 170, 255, .8); color: rgba(255, 255, 255, 1); }\
        85% { -moz-box-shadow: 0px 0px 16px 5px rgba(0, 170, 255, 0); box-shadow: 0px 0px 16px 5px rgba(0, 170, 255, 0); }\
        100% { -moz-box-shadow: 0px 0px 16px 5px rgba(0, 170, 255, .8); box-shadow: 0px 0px 16px 5px rgba(0, 170, 255, .8); color: rgba(255, 255, 255, 1); }}</style>');
      $('#AddToCart-product-template').addClass('pulse-primary');
   }
</script>

Vous pouvez bien sûr modifier la vitesse et la couleur de la lueur comme vous voulez.

  • La vitesse de clignotement de 3 secondes est définie par la partie "pulse-primary 3s",
  • et les couleurs de l'animation par les valeurs après "rgba(".

Pour plus d'informations regardez du coté des animations CSS, par exemple pour avoir des effets de rotation ou de zoom sur le bouton.

Au final, on obtient un résultat similaire à une App, et cela sans ralentir et alourdir encore plus notre Shopify ;)

N'hésitez pas à me contacter pour toute question (ici)[/web/].

LD. --

Comments !