Créer un système de Copier/Coller d’un code promo sur Shopify

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 « Ressources (Assets) » et trouvez un fichier de type: base.css, theme.css, style.css ou autre fichier .css que votre thème utilise. 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  « Modèles (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 Extraits (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 « Ressources (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 6 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 19 commentaires

  1. fabien

    3 Mai 2020 Répondre

    Merci, DGEO the best of the best 😉

  2. Lucas

    30 Sep 2020 Répondre

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

    1. Dgeo Dev

      1 Oct 2020 Répondre

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

  3. Pierre

    26 Nov 2020 Répondre

    bonjour comment changer le code promo et le pourcentage ?

    1. Dgeo Dev

      26 Nov 2020 Répondre

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

  4. Rmz

    27 Nov 2020 Répondre

    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. Dgeo Dev

      27 Nov 2020 Répondre

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

  5. AMINE OUZZANE

    17 Déc 2020 Répondre

    Bonjour Dgeo, comme toujours merci infiniment pour tes tutos, stp j’ai une question : là où je dois coller le code, je l’ai sur la page final où le client va entrer ses cordonnés et c un peut tard, je ne l’ai pas au panier avant Chekck out, comment je peux ajouter cette case sur la page du panier, parce que sinon le client va pensé qu’il n’y a pas où coller le code, j’ai theme debut. Merci encore une fois

  6. AMINE OUZZANE

    17 Déc 2020 Répondre

    Bonjour, comment faire stp les traits s’éparer autour du code comme sur le tuto

    1. Dgeo Dev

      18 Déc 2020 Répondre

      C’est inclus dans le css 🙂

  7. soso

    11 Déc 2022 Répondre

    Bonjour, y a t-il un soucis avec le code ? Le code ne s’affiche plus correctement …

    1. Dgeo Dev

      13 Déc 2022 Répondre

      Hello, effectivement un bug temporaire c’est corrigé ! les codes s’afficheront désormais correctement 🙂

  8. Flobat

    16 Fév 2024 Répondre

    Bonjour bonjour, est-ce qu’en 2024 c’est possible d’intégrer un metafield relié au code afin de changer le code promo directement depuis une interface de fiche produit, plutôt que de devoir réécrire pour chaque produit, un code promo qui lui est unique (Car oui j’ai un code promo unique pour chaque produit) ?

    1. Dgeo Dev

      19 Fév 2024 Répondre

      Hello, oui effectivement c’est une très bonne idée 🙂 dans ce cas il faudra créer un metafield et remplacer le PROMO30 dans la value de l’input 😉 tu me dira si ca fonctionne je suis curieux ! Merci pour la contribution !

      1. Flobat

        14 Mar 2024 Répondre

        C’est terrible, les éléments de CSS semble ne plus fonctionner et ça affiche le code sans aucun branding ! Sais-tu comment régler ce problème c’est très important !

        1. Dgeo Dev

          14 Mar 2024 Répondre

          Hello, étrange je pense que c’est un mauvais copier / coller ou mauvais code dans le css ou alors un fichier du thème qui a sauté…
          Au besoin je peux intervenir si oui me contacter ici : dgeodev@gmail.com

  9. Mark M.

    24 Mai 2024 Répondre

    LE TUTO SEMBLE INCOMPLET !
    Bonjour Diego, le titre du tuto, « Créer un système de Copier/Coller ».
    Pour copier, c’est ok, j’ai installé le code et ça fonctionne. Mais après, pour coller, je fais comment ?
    J’ai bien tenté des choses, mais ça ne fonctionne pas. Si vous avez la solution à proposer, je vous en serrez bien reconnaissant.

    1. Dgeo Dev

      1 Juin 2024 Répondre

      Hello, ctrl + V ou alors clic droit coller 🙂

Laisser un commentaire

Fermer le menu
×
×

Panier