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.

Les codes pour l’affichage sur une collection ou un produit spécifique

Sur une toute une collection

{% for collection in product.collections %}
{% if collection.handle == 'collection-de-test' %}
Afficher par collection
{% endif %}
{% endfor %}

Sur un produit ou plusieurs (répéter le code au besoin)

{% if product.id == 913225908266 %}
Afficher par produit
{% endif %}

Ce tutoriel existe aussi en vidéo

Bon tuto à tous !

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

Cet article a 7 commentaires

  1. Merci, DGEO the best of the best 😉

  2. Merci ! Mais j’ai 3 codes promo, qu’est ce que je doit modifier pour que le systeme fonctionne pour les 3 codes ?

    1. Hello, a navré cela ne fonctionnera pas avec ce tuto qui est limité à 1 🙂

  3. bonjour comment changer le code promo et le pourcentage ?

    1. Hello, directement dans le code 🙂 et ne pas oublier de les créer au niveau des réductions de Shopify

  4. Bonjour Dgeo Dev, merci pour ton travail en général. Je n’arrive pas à trouver là où je dois coller la partie HTML avec mon thème Prestige car Product-template.liquid est organisé différemment. Peux tu m’aider? Merci

    1. Hello, je ne connais pas le thème, le mieux serait de leur demander ils ont un support fr en plus 🙂

Laisser un commentaire

Fermer le menu

Envie d'apprendre à Coder et Maitriser ton Thème Shopify  ?

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

S'abonner à la chaine