Comment Créer une Icône Cadeau avec Code Promo sur Shopify

Nous allons voir dans ce tutoriel comment créer une icône cadeau flottante sur votre boutique. Au clic sur celle-ci une mini information sera affichée proposant un code promo !

Comment mettre cela en place ?

Partie HTML

Rendez-vous dans boutique en ligne – Actions – Modifier le code – Ouvrir le dossier Layout et le fichier theme.liquid et mettez-vous tout en bas du fichier.

A ce stade vous allez devoir repérer la fermeture de la balise </body> ! juste avant celle-ci copiez/collez le code suivant:

<div class="dg-gift">
  <svg id="dg-gift-btn" viewBox="-17 0 483 483.02631" xmlns="http://www.w3.org/2000/svg"><path d="m194.492188 109.507812c2.523437 0 4.902343-1.191406 6.410156-3.214843 1.511718-2.023438 1.980468-4.636719 1.261718-7.058594-5.734374-19.582031-15.644531-37.6875-29.054687-53.0625-10.804687-11.496094-26.886719-16.417969-42.273437-12.9375-2.125.8125-3.800782 2.492187-4.613282 4.617187-.441406 1.195313-.769531 2.429688-.976562 3.6875-.246094 1.492188-.378906 3-.402344 4.511719v.128907c.097656 12.757812 5.238281 24.960937 14.304688 33.941406 15.375 13.398437 33.46875 23.304687 53.039062 29.035156.75.222656 1.523438.34375 2.304688.351562zm-44-40.714843c-3.175782-3.179688-5.667969-6.980469-7.328126-11.160157v-.078124c-.351562-.886719-.65625-1.777344-.917968-2.632813-.136719-.464844-.234375-.902344-.351563-1.359375-.121093-.457031-.226562-.800781-.304687-1.199219-.082032-.402343-.097656-.5625-.152344-.847656-.234375-1.195313-.398438-2.402344-.488281-3.617187 7.890625.597656 15.300781 4.003906 20.894531 9.601562 7.953125 8.992188 14.363281 19.238281 18.96875 30.328125-11.101562-4.621094-21.363281-11.054687-30.359375-19.035156zm0 0"/><path d="m440.011719 115.027344h-123.488281c5.339843-3.648438 10.355468-7.753906 14.984374-12.265625 28.617188-28.703125 29.554688-72.222657 11.273438-90.503907s-61.785156-17.359374-90.519531 11.289063c-11.75 12.789063-21.296875 27.4375-28.25 43.351563-6.953125-15.925782-16.507813-30.582032-28.269531-43.375-28.703126-28.617188-72.21875-29.554688-90.503907-11.273438-18.289062 18.28125-17.34375 61.800781 11.277344 90.511719 4.632813 4.511719 9.648437 8.617187 14.984375 12.265625h-123.488281c-4.417969 0-8.0000002 3.582031-8.0000002 8v80c0 4.417968 3.5820312 8 8.0000002 8h16v232c.027343 22.078125 17.921875 39.972656 40 40h320c22.082031-.027344 39.976562-17.921875 40-40v-232h16c4.417969 0 8-3.582032 8-8v-80c0-4.417969-3.582031-8-8-8zm-176.429688-80.175782c22.992188-22.921874 56.527344-22.65625 67.894531-11.289062 11.367188 11.367188 11.640626 44.886719-11.28125 67.886719-10.496093 9.703125-22.480468 17.660156-35.496093 23.578125h-47.804688c0-.167969 0-.351563 0-.519532 0-1.824218-.136719-3.671874-.3125-5.53125-.066406-.613281-.136719-1.222656-.207031-1.847656-.183594-1.535156-.410156-3.066406-.683594-4.589844-.085937-.535156-.175781-1.074218-.269531-1.601562-.382813-1.992188-.800781-3.953125-1.28125-5.847656-.0625-.273438-.136719-.511719-.199219-.800782-.425781-1.65625-.863281-3.199218-1.3125-4.796874-.0625-.21875-.121094-.457032-.183594-.675782 6.554688-19.9375 17.15625-38.3125 31.136719-53.964844zm-7.570312 160.175782h-64v-64h64zm-128.175781-103.570313c-22.925782-23-22.65625-56.519531-11.285157-67.894531 11.367188-11.375 44.886719-11.640625 67.871094 11.265625 14.554687 16.304687 25.464844 35.53125 32 56.390625.902344 2.808594 1.597656 5.503906 2.253906 8.121094.183594.75.335938 1.476562.496094 2.214844.433594 1.953124.78125 3.816406 1.042969 5.601562.085937.605469.199218 1.230469.269531 1.820312.253906 1.996094.390625 4.007813.410156 6.019532h-57.570312c-13.007813-5.90625-24.988281-13.851563-35.488281-23.539063zm-111.824219 39.570313h160v64h-160zm24 312v-232h152v256h-128c-13.253907 0-24-10.746094-24-24zm168 24v-256h32v256zm200-24c0 13.253906-10.742188 24-24 24h-128v-256h152zm24-248h-160v-64h160zm0 0"/><path d="m253.507812 109.53125c.769532 0 1.535157-.109375 2.273438-.328125 19.59375-5.726563 37.707031-15.652344 53.078125-29.089844 11.382813-10.886719 16.289063-26.902343 12.960937-42.296875-.804687-2.117187-2.480468-3.789062-4.597656-4.597656-15.394531-3.328125-31.410156 1.578125-42.296875 12.960938-13.433593 15.371093-23.359375 33.484374-29.089843 53.078124-.714844 2.421876-.25 5.039063 1.261718 7.058594 1.511719 2.023438 3.886719 3.214844 6.410156 3.214844zm32.730469-52.039062c5.601563-5.59375 13.019531-8.996094 20.910157-9.601563-.597657 7.894531-4.003907 15.316406-9.597657 20.917969-9 8.007812-19.277343 14.453125-30.402343 19.074218 4.625-11.125 11.078124-21.394531 19.089843-30.390624zm0 0"/></svg>
  <div class="dg-gift-texts">
    <span id="dg-gift-code" class="dg-gift-code"></span><br />     
    <span id="dg-gift-text" class="dg-gift-text"></span>
  </div>
</div>

Partie CSS

Rendez-vous cette fois dans le dossier Assets et ouvrez le fichier theme.scss.liquid, theme.scss ou un fichier .scss ou .scss.liquid. Rendez-vous tout en bas du fichier et copiez/collez le code ci-dessous:

.dg-gift {  
  display:flex;
  align-items:center;
  position:fixed;
  bottom:20%;
  text-align:center;
  right:10px; 
  padding:10px;
  justify-content:center;
  width:50px;
  height:50px;
  line-height:inherit;
  background:#E31B23;
  color:#FFF;
  border-radius:100%;
  overflow:hidden;
  box-shadow:0 0 7px rgba(255,255,255,0.7);
  cursor:pointer;
}

.dg-gift svg {
  fill:#FFF; 
  
}
.dg-gift .dg-gift-texts { 
  display:none;
}
.dg-gift-text {
  font-size:12px;
  font-style:italic;
}
.dg-gift.dg-gift-open {
  width:auto;
  border-radius:0;
  right:0;
}
.dg-gift.dg-gift-open .dg-gift-texts { 
  display:inline-block;
}
.dg-gift-open svg {
 display:none; 
}

.dg-gift-shake {
  animation: giftShake 0.82s cubic-bezier(.36,.07,.19,.97) both;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  perspective: 1000px;
}

@media screen and(min-width:768px) {
  .dg-gift {  
    width:60px;
    height:60px;
    padding:10px;
  }
}

@keyframes giftShake{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)}}

Partie Javascript

Maintenant et toujours dans le dossier Assets on va chercher un fichier .js ou .js.liquid, généralement theme ou app… Encore une fois copiez/collez le code suivant:

if(document.querySelector(".dg-gift")) { 
  
  /* textes à modifier - attention aux apostrophes ! */
  const texte1Cadeau = `Code Promo : "CODE30"`;
  const texte2Cadeau = `Valable sur toute la boutique !`;
  
  const dgGift= document.querySelector(".dg-gift");
  const dgGiftBtn = document.querySelector("#dg-gift-btn");
  const dgGiftCode = document.querySelector("#dg-gift-code");
  const dgGiftText = document.querySelector("#dg-gift-text");
  dgGiftCode.innerHTML = texte1Cadeau; 
  dgGiftText.innerHTML = texte2Cadeau; 

  const dgGiftTimer = setInterval(dgGiftEffect, 3000);
  dgGift.addEventListener('click', function() {
    dgGift.classList.toggle('dg-gift-open');    
  });
    
  function dgGiftEffect() {
    dgGift.classList.toggle ("dg-gift-shake");    
  }   
}

Besoin de personnaliser un peu plus ?

Dans ce cas je vous invite à visionner la vidéo ci-dessous 😉

Bon tuto à toutes et tous !

Merci de me laisser une petite note 😉
[Note moyenne de: 5 sur 4 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 14 commentaires

  1. Rodolphe N'guessan

    19 Avr 2021 Répondre

    Bonjour,

    J’ai inséré le code mais il n’y a aucune réaction quand la souris passe sur l’icone de cadeau.

    1. Dgeo Dev

      20 Avr 2021 Répondre

      Hello, il doit y avoir une incompatibilité avec le thème ou un code défectueux.

  2. LESPI

    21 Mai 2021 Répondre

    Salut, j’ai mit le petit cadeau mais sur téléphone il n’est pas visible et parait en arriere plan ! Merci de m’aider (sinon merci pour le tuto)

    1. Dgeo Dev

      21 Mai 2021 Répondre

      Hello, il faut rajouter dans le .dg-gift { z-index:9999; }

  3. LESPI

    7 Juin 2021 Répondre

    alors merci pour la réponse ! Néanmoins quel dg-digt please? merci d’avance ! 🙂

    1. Dgeo Dev

      8 Juin 2021 Répondre

      Le 1er 🙂 .dg-gift {

  4. Quentin

    30 Juil 2021 Répondre

    Salut 😉 Possibilité d’ajouté un delay d’affichage ? j’ai essayé avec

    $(document).ready(function() { setTimeout(function () { $(« .dg-gift »).show() }, 9000); });

    mais rien ne se passe

    1. Dgeo Dev

      31 Juil 2021 Répondre

      Hello, dans ce cas il faut la masquer en css avant 🙂 mais sinon le code est bon bravo 😉
      .dg-gift { display:none; }

  5. domi

    15 Nov 2021 Répondre

    Bonsoir, le cadeau pas, il se cache derrière quand je clique sur le panier mais sinon il est invisible que faire svp?

    1. Dgeo Dev

      17 Nov 2021 Répondre

      Hello, trouver cursor:pointer; et rajouter le z index comme ca cursor:pointer; z-index:10000;

  6. Gilles

    18 Nov 2021 Répondre

    Bonsoir, merci pour cette astuce de code, mais j’avais une question, voilà je souhaite dire à mes visiteurs qui arrivent sur ma boutique « Partagez la page et obtenez votre code promo » en gros est ce possible de créer un code dans lequel on offre un code promo en échange du partage de la page d’un des produits de ma boutique. bien sûr c’est un code promo par commande.

    Merci d’avance

    1. Dgeo Dev

      19 Nov 2021 Répondre

      Hello, hum c’est délicat car impossible de vérifier si ils ont partagé ou non mais simplement le fait qu’ils ont cliqué sur le lien… Il faudrait leur proposer d’envoyer une preuve de partage dans un formulaire ou autre.

  7. lakraa

    29 Nov 2021 Répondre

    bonjour cest possible de rajouter une croix sur le cadeau pour donner la possibilité de le supprimer

    1. Dgeo Dev

      29 Nov 2021 Répondre

      Hello, non sauf développement sur mesure à nous demander ici 🙂 speedecom.freshdesk.com

Laisser un commentaire

Fermer le menu