Vous utilisez Shopfiy pour votre boutique de musique? Comment rendre plus visible votre bouton "Ajouter au panier" et ce sans avoir à installer une nouvelle app? Suivez ce tutoriel et vous pourrez customiser ce bouton comme bon vous semble

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 produits, et ils ont bien raison cela fait partie des optimisations de base que toute boutique Shopify de musique devrait avoir.

Pour Shopify de nombreuses extensions existent pour faire cela, mais comme vous le savez, plus vous ajoutez d'extensions, plus votre site devient lent, et plus Google vous pénalise dans les résultats de recherche via son TrustRank. 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". Vous pouvez voir le résultat sur cette boutique en ligne.

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>
  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 concernant l'optimisation de sites web e-commerce.