Bonjour à toi et bienvenue sur le blog de Full Stack entrepreneur !

Je me présente rapidement, je suis Thomas le fondateur de Full Stack Entrepreneur. En quelques mots je suis développeur web spécialisé dans Shopify.

Ma mission est de te permettre de personnaliser à l'infini ta boutique Shopify en passant par le code depuis ton back-office.

Je te vois venir, tu n'as que très peu de bases (voir aucune) en développement web. Pas de souci, mon but est de te simplifier au maximum la chose dans mes articles ou vidéo sur Youtube.

Après si tu veux aller plus loin j'ai créé une mini formation totalement gratuitement qui te permettra de bien maîtriser le code sur ta boutique Shopify. Clique sur le bouton juste en dessous pour la rejoindre :

Découvrir nos produits et services d'optimisation de boutiques Shopify

Comment utiliser les Keyframes pour animer ton bouton panier?

Dans cet article je vais t'expliquer comment utiliser les Keyframes en CSS pour pouvoir animer ton Bouton ajout panier sur Shopify.

Les keyframes en CSS est une animation que tu vas pouvoir mettre directement sur ton bouton ajout panier.

Je vais donc commencer par t'expliquer comment ça fonctionne assez simplement.

  • La première étape est de donner un nom à son Keyframe : 
@keyframes toto {
              }

Dans cet exemple on donne le nom "toto" à notre keyframe.

  • Ensuite on vient lier le nom de notre keyframe ci dessous à un élément <div>
div {
              animation : toto;
              }

Ici on vient lier le keyframe toto à notre div

Attend, tu as lu attentivement ce début d'article mais tu n'y comprends rien ? Si c'est le cas je te recommande vraiment de t'inscrire à ma mini formation gratuite :

Découvrir nos produits et services d'optimisation de boutiques Shopify

C'est une mini formation qui va t'apprendre les bases HTML et CSS pour ensuite pouvoir modifier facilement le code de ta boutique Shopify.

  • Maintenant, indique l'animation que tu souhaites intégrer à ton bouton dans ton Keyframe
@keyframes toto {
              from {top : 0px;}
              to {top : 200px;}
              }

Ici par exemple tu indiques à ton Keyframe de provoquer l'animation d'aller du point A au point B

Le point A étant à 0px de ta page, le point B étant à 200px.

Tu peux mettre toutes les animations que tu souhaites dans ton Keyframe :

  • Rebondir
  • Tourner
  • Grossir / Rétrécir
  • Trembler
  • Ect ect ...
On peut donner vie à notre boutique Shopify grâce aux Keyframes

Comment animer le bouton Add To Cart de ta boutique Shopify ?

Nous ce qui nous interesse c'est de venir animer notre bouton Add To Cart de ta boutique Shopify.

J'ai écrit un article qui t'explique en détail comment trouver la classe d'un élément de ton site sur Shopify : Comment supprimer la mention commerce electronique propulsé par Shopify

Comment trouver la classe de mon bouton add to cart ?

Donc ce que tu vas devoir faire dans un premier temps c'est trouver la .class de ton élément bouton de ton site Shopify.

Tout d'abord il faut que tu te rendes sur Google Chrome qui va te permettre d'utiliser l'inspecteur d'élément via un clique droit sur ta page.

Une fois Chrome ouvert, rend toi sur une page produit de ton site.

Fait un clique droit sur le bouton Add To Cart.

Ensuite un petit menu déroulant va apparaître, tu vas devoir cliquer sur 'inspecter élément'

Tu auras accès au code de ta page produit. L'objectif ici sera de venir trouver le nom de la classe de la div de ton élément bouton Add To Cart.

(Oui je sais je parle chinois si tu n'as jamais codé, c'est pour cela que je me répète un peu mais fonce sur ma formation gratuit pour avoir toutes les bases HTML et CSS pour pouvoir suivre ce genre de tuto super facilement)

Découvrir nos produits et services d'optimisation de boutiques Shopify

Si tu maîtrises déjà le CSS HTML et que tu n'es pas perdu alors on continu !

Comment trouver la section de mon bouton add to cart ?

Une fois que tu as identifié la classe de ton bouton tu dois trouver sa section. Pour cela toujours dans ton inspecteur remonte jusqu'à trouver la section de ton panier.

Dans 90% des cas cette section s'appellera : featured-product

Une fois que tu as trouvé la section de ton bouton, rend toi sur le Back Office de ton site Shopify.

J'ai également fait un article sur le sujet : Comment modifier le code sur mon site Shopify ?

Donc une fois que tu es dans ton back office tu dois te rendre dans tes sections.

Pour cela tu dois aller dans boutique en ligne / thème.

Une fois cela fait, tu peux faire un CTRL F et marquer le nom de la classe de ton bouton.

Si tu as trouvé la class avec ton CTRL F, c'est que tu es dans la bonne section.

Ensuite tu n'as plus qu'à mettre du CSS tout en haut de ta section.

Tu n'as plus qu'à copier coller les lignes de code en dessous en choisissant ton animation parmi :

  • Bounce
  • Scaller
  • Rotater
  • Shake

Fais bien attention à remplacer .btn--add-to-cart par la classe de ton bouton

Animer son bouton Add To Cart peut augmenter le taux de conversion

Comment faire rebondir mon bouton ajouter panier sur Shopify ?

Copie colle directement ce code en haut de ta section featured-product pour avoir un effet rebond sur ton bouton add to cart

{% style %}

              /* ATC */

              .btn--add-to-cart {
                animation: {{ section.settings.cta-animation }} 0.5s;
                animation-direction: alternate;
                animation-iteration-count: infinite;
              }
              @keyframes bouncer { 
                0% { transform: translateY(0); }
                100% { transform: translateY(-10px); }
              }
              {% endstyle %}

              {% schema %}

              {
              "type": "select",
              "id": "cta-animation",
              "options": [
                  { "value": "bouncer", "label": "Sauté"},
              ],
              "label": "Animation du CTA",
              "default": "rotater"
              }

              {% endschema %}

Comment faire grossir mon bouton ajout panier sur Shopify ?

Copie colle directement ce code en haut de ta section featured-product pour avoir un effet grossissement sur ton bouton add to cart

{% style %}

              /* ATC */

              .btn--add-to-cart {
                animation: {{ section.settings.cta-animation }} 0.5s;
                animation-direction: alternate;
                animation-iteration-count: infinite;
              }
              @keyframes scaler { 
                0% { transform: scale(1); }
                100% { transform: scale(1.03); }
              }
              {% endstyle %}

              {% schema %}

              {
              "type": "select",
              "id": "cta-animation",
              "options": [
                  { "value": "scaler", "label": "Zoomé"},

              ],
              "label": "Animation du CTA",
              "default": "rotater"
              }

              {% endschema %}

Comment faire tourner mon bouton ajout panier sur Shopify ?

Copie colle directement ce code en haut de ta section featured-product pour avoir un effet rotation sur ton bouton add to cart

{% style %}

              /* ATC */

              .btn--add-to-cart {
                animation: {{ section.settings.cta-animation }} 0.5s;
                animation-direction: alternate;
                animation-iteration-count: infinite;
              }
              @keyframes rotater { 
                0% { transform: rotate(-2deg); }
                100% { transform: rotate(2deg); }
              }
              {% endstyle %}

              {% schema %}

              {
              "type": "select",
              "id": "cta-animation",
              "options": [
                  { "value": "rotater", "label": "Décalé"},
              ],
              "label": "Animation du CTA",
              "default": "rotater"
              }

              {% endschema %}

Comment faire secouer mon bouton ajout panier sur Shopify ?

Copie colle directement ce code en haut de ta section featured-product pour avoir un effet secousse sur ton bouton add to cart

{% style %}

              /* ATC */

              .btn--add-to-cart {
                animation: {{ section.settings.cta-animation }} 0.5s;
                animation-direction: alternate;
                animation-iteration-count: infinite;
              }
              @keyframes shake {
                10%, 90% {
                  transform: translate3d(-1px, 0, 0);
                }
                20%, 80% {
                  transform: translate3d(2px, 0, 0);
                }
                30%, 50%, 70% {
                  transform: translate3d(-4px, 0, 0);
                }
                40%, 60% {
                  transform: translate3d(4px, 0, 0);
                }
              }
              {% endstyle %}

              {% schema %}

              {
              "type": "select",
              "id": "cta-animation",
              "options": [
                  { "value": "shake", "label": "Shake"},
              ],
              "label": "Animation du CTA",
              "default": "rotater"
              }

              {% endschema %}

Tutoriel vidéo

Dans cette vidéo je te montre pas à pas comment animer le bouton add to cart de ton panier.

En résumé

Pour résumé, pour venir animer le bouton add to cart de ta boutique Shopify tu vas devoir venir utiliser les Keyframes.

Les keyframes te permettront de créer toutes sortes d'animations sur tous les éléments de ta boutique.

Venir animer son bouton add to cart peut te permettre d'augmenter ton taux de conversion.

Cependant fait bien attention à ne pas abuser des animations sur ton site, d'une part pour ne pas trop ralentir le temps de chargement de ce dernier, mais aussi car trop d'animation peut donner un côté amateur à ce dernier.

Sur le web, une règle existe en terme de design : less is more !

Si tu as des questions, tu peux les poser directement en commentaire, je tacherai d'y répondre le plus rapidement possible !

C'était Thomas !

A bientôt :)

Informations