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. 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 🙂

  5. 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. Bonjour, comment faire stp les traits s’éparer autour du code comme sur le tuto

    1. C’est inclus dans le css 🙂

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

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

  8. 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. 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. 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. 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. 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. Hello, ctrl + V ou alors clic droit coller 🙂

Laisser un commentaire

Fermer le menu
×
×

Panier