Nous allons voir dans ce tutoriel comment créer une zone proposant un code promo avec un bouton pour copier/coller sur une fiche shopify. Cela permet de faire gagner du temps à l’internaute et lui proposer une meilleure expérience utilisateur.

Pourquoi mettre en place ce système ?

Cela permet au client en un coup d’oeil de voir clairement qu’un code promo est disponible sur ce produit. De plus le bouton copier permet en un clic de sauvegarder le code de réduction et de pouvoir faire un Coller directement au niveau du checkout ! Vous pouvez voir le résultat sur le site de démonstration.

système copier coller code promo shopify

Comment le mettre en place ?

Rendez-vous dans un 1er temps dans les fichiers de votre thème dans: « Boutique en ligne -> Actions -> Modifier le code ».

Partie CSS

La mise en forme, les couleurs, la taille etc…

Cliquez sur le dossier « Assets » et trouvez un fichier de type: « style.scss.liquid, theme.scss.liquid, timber.scss.liquid » ou un xxxx.scss.liquid. Ensuite ouvrez le et mettez vous tout en bas du fichier et collez le code suivant:

.cont-copy { max-width: 100%; width:100%; padding: 10px 0; }
.cont-copy-inner { overflow: hidden; clear: both; }
#tocopy {
  box-shadow:none;
  padding: 10px;
  text-align: center;
  border:2px dashed red;
  font-size:21px;
  height:45px;
  line-height: 45px;
  float: left;
  width: 80%;
}
#copy-1 {
  width: 20%;
  background:none;
  border-radius: none;
  box-shadow:none;
  padding: 10px;
  text-align: center;            
  font-size:14px;
  height:45px;
  line-height: 15px;
  float: left;
}
#copy-1:hover { cursor: pointer;}
.copy-text {margin-top:5px; text-align: center; font-size: 13px; font-style: italic; }

Partie HTML

Le placement de la zone ou vous souhaitez voir apparaitre cette zone.

Cliquez sur le dossier « Sections » et trouvez un fichier nommé « Product-template.liquid » ou dans  « Templates » le product.liquid selon votre thème… A ce stade essayez de trouver l’endroit idéal, généralement juste avant le bouton « Ajouter au panier ». Faite un Ctrl + F ou cmd + F pour trouver la balise <button… et collez le code ci-dessous juste avant.

PS: si vous n’avez pas de balise button essayez de trouver dans le dossier Snippets – un fichier avec un mot form comme product-form.liquid ou autres…

<div class="cont-copy">
  <div class="cont-copy-inner">
    <input type="text" readonly value="PROMO30" id="tocopy"> 
    <button id="copy-1" type="button" onclick="toCopy('tocopy');">Copier</button>
  </div>
<p class="copy-text">Code de réduction à utiliser avant le paiement.</p>
</div>

Partie Javascript

Cette partie va permettre de créer le fonctionnement du système et gérer les animations.

Cliquez sur le dossier « Assets » et trouvez un fichier de type: « app.js.liquid, theme.js.liquid, timber.js.liquid » ou un xxxx.js.liquid. Ouvrez le et mettez vous tout en bas du fichier et collez le code suivant:

function toCopy(id) {        
  const textCopy = document.getElementById(id); 
  textCopy.select();
  textCopy.setSelectionRange(0, 99999); /*For mobile devices*/           
  document.execCommand('copy');    
  const btnText = document.querySelector('#copy-1');        
  btnText.textContent = '✔ Copié'; 
  setTimeout(() => {
    btnText.textContent = 'Copier';   
  }, 3000);                              
}

Bonus

Si vous souhaitez afficher plusieurs codes de réductions selon le produit ou limiter les codes par produits je vous invite à suivre le tuto pour personnaliser sa fiche produit sur Shopify.

Bon tuto à tous !

Merci de me laisser une petite note 😉
[Note moyenne de: 5 sur 2 votes]

🤗 Vous souhaitez m'encourager à continuer mes Tutos ?

Cliquez sur le bouton ci-dessous pour me laisser un petit pourboire 😉

Payer un coup à Dgeo Dev

Laisser un commentaire

Fermer le menu

formation seo gratuite shopify

Une formation Gratuite SEO sur Shopify ça te tente ?

Alors abonne-toi à la chaine et active la cloche pour ne pas louper l'arrivée des prochains modules !

Commencer la formation