Vos clients aiment faire de bonnes affaires et quoi de mieux que de leur proposer une Offre Spéciale irrésistible. Je vous propose de réaliser ensemble un Encart ou bandeau proposant une Offre que vos client ne pourront pas refuser ;). De plus cela va booster votre chiffre d’affaire étant donné que vous allez forcément vendre plus !

Concrètement ça donne quoi ?

Nous allons mettre ce type de bannière sous le bouton « Ajouter au panier de votre thème Shopify ». L’avantage c’est que le titre est clignotant afin d’attirer l’attention du client. De plus tout sera administrable facilement grâce à une nomenclature de variables en français ;). Vous pouvez également voir le résultat sur le site de démo: https://dgeodev.myshopify.com/products/produit-1

OFFRE SPÉCIALE

-30%
DE RÉDUCTION
+ LIVRAISON OFFERTE

Comment installer le tuto Shopify sur votre thème ?

La partie CSS

Nous allons dans un premier temps installer la partie mise en forme générique de l’encart.

Rendez-vous dans Boutique en ligne – Actions – Modifier le code – Assets – Trouvez votre fichier xxx.scss.liquid, généralement votre theme.scss.liquid, style.scss.liquid ou timber.scss.liquid et ouvrez le fichier. Maintenant vous allez vous mettre tout en bas du fichier et copier/coller le code ci-dessous:

.dg-so-pulse { animation: dg-pulse 3s infinite ease-in; }
@keyframes dg-pulse { 20%, 100% { opacity: 1; } 0% { opacity: 0; } 10% { opacity: 1; } }   
.dg-special-offer { letter-spacing: 1px; font-style:italic; text-align:center; margin:10px 0; padding:3px; border-radius:5px; font-size:27px; width:100%; max-width:100%; }
.dg-so-wrapper { display:flex;  padding:15px 10px; border-radius:0 0 5px 5px; }
.dg-so-wrapper p { margin:5px 0; }
.dg-so-info-value { font-size:57px; line-height: 54px; font-weight: bold; }
.dg-so-info-text { line-height: 24px; position: relative;  text-align:left; padding-left:10px;}
.dg-so-info-text .dg-so-info-plus {  font-size:42px; font-weight: bold; position: relative; top: .35rem; display: inline-block; height: 2rem;}
.dg-so-title { font-size: 32px;  border-radius:5px 5px 0 0; padding:5px 3px; display:block; font-weight: bold; }
@media screen and (max-width: 500px) {
  .dg-so-info-value { font-size:35px; }
  .dg-so-info-text { font-size:18px; }
}

La partie HTML & Javascript

Passons désormais la mise en place des fonctionnalités et de l’affichage de l’offre spéciale sur vos fiches produit shopify.

Rendez-vous dans Boutique en ligne – Actions – Modifier le code – Sections – Trouvez un fichier product-template.liquid et ouvrez le fichier. Si vous n’en avez pas essayez de regarder dans Templates – product.liquid. A ce stade vous allez devoir trouver l’emplacement de votre choix. Généralement juste après le bouton « Ajouter au panier ». Pour ce faire vous allez taper sur Ctrl + F ou CMD + F pour trouver l’occurence suivante: {% endform %}. Sur speedfly ou turbo vous le trouverez dans Snipppets – product-form-1.liquid ou product-form.liquid. Maintenant il ne vous reste plus qu’à  copier/coller le code ci-dessous:

<div class="dg-special-offer">
  <strong class="dg-so-title dg-so-pulse">OFFRE SPÉCIALE</strong>
  <div class="dg-so-wrapper">
    <div class="dg-so-info-value">-30%</div>
    <div class="dg-so-info-text"><span class="dg-so-info-text-1"> DE RÉDUCTION </span><br />
      <span class="dg-so-info-plus">+</span><span class="dg-so-info-text-2">  LIVRAISON OFFERTE</span></div> 
  </div>
</div>

<script>
  /* personnalisation des textes et couleurs */
  let titleOffre = "OFFRE SPÉCIALE !";
  let reductionOffre = "-30%";
  let texte1Offre = "DE RÉDUCTION";
  let texte2Offre = " LIVRAISON OFFERTE";

  let couleurFond = "#333333";
  let couleurTexte = "#FFFFFF";
  let couleurFondTitre = "#FF8900";
  let couleurTitre = "#FFFFFF";
  let couleurReduction = "#c5e80c";
  let couleurPlus = "#FF8900";

  function insertDom(elem,text) {
    document.querySelector(elem).textContent = text;
  }
  insertDom(".dg-so-title",titleOffre);
  insertDom(".dg-so-info-value",reductionOffre);
  insertDom(".dg-so-info-text-1",texte1Offre);
  insertDom(".dg-so-info-text-2",texte2Offre);

document.querySelector(".dg-so-wrapper").style.backgroundColor = couleurFond;
document.querySelector(".dg-special-offer").style.color = couleurTexte;
document.querySelector(".dg-so-title").style.color = couleurTitre;          
document.querySelector(".dg-special-offer").style.backgroundColor = couleurFondTitre;
document.querySelector(".dg-so-info-value ").style.color = couleurReduction;
document.querySelector(".dg-so-info-plus").style.color = couleurPlus;

</script>

Comment modifier les textes et les couleurs ?

Vous avez envie de personnaliser un peu cette offre avec votre propre texte et changer les couleurs afin qu’elles soient en osmose avec votre charte graphique ? et bien c’est possible car j’ai tout prévu :p. En effet j’ai préparé spécialement une partie pour vous avec des variables en Français pour que cela soit plus intuitif pour vous ! C’est donc cette partie ou vous allez pouvoir faire vos modifications:

Pas besoin de vous faire un long discours car cela reste assez parlant ;). Notez que pour changer les couleurs vous devrez trouver les codes hexadécimaux ! je vous invite à taper sur Google « hexadecimal color generator ».

Attention: Vous devez bien garder les guillemets avant et après chaque portion de code avec à la fin de chaque ligne le ;

Je vous rappelle que tout est fait en code et cela vous évite donc de créer et charger une image pour rien = gain de performance 😉

Ce tutoriel existe aussi en vidéo

Bon tuto à toutes et tous !

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

Cet article a 27 commentaires

  1. Encore un super tuto de ta part 🙂 Merci bien 😉

    1. Hello et merci :), déjà fait ? lol il sort officiellement que lundi en vidéo 😀 tu as des alertes ? 😀

      1. hey oui déjà fait et installé sur plusieurs produits différents sur mes 2 shops 🙂 non j’ai eu besoin d’un code d’un autre tuto et je suis tombé dessus donc installé direct ^^

  2. Hey Merci encore pour ce tuto! Cependant j’ai un problème, j’ai le thème fastlane (ta concurrence désolé ahah) et l’offre spéciale n’a pas la même mise en page et s’affiche avec le texte dans la même taille de police ? Aurais-tu une solution ? Merci

    1. Oui j’ai une solution, passer sur Speedfly 😀

  3. Hello vraiment un tuto super sympa ! Par contre j’ai l’impression que mon thème ne prend pas en charge le CSS car j’ai toutes les polices de la mêmes taille et toutes les phrases sont alignés à gauche …. Est ce que tu sais ce qui bloque ?
    Cdlt,

    1. Hello, oui c’est un soucis css… au pire mets le css dans le product-template.liquid en l’englobant d’une balise style <style> ... le code css ... </style>

  4. Salut, super tuto encore une fois, j’ai le thême Narrative et je ne trouve pas le endform dans les deux fichiers. Comment faire ? Merci d’avance

    1. Merci, essaie de trouver un </form> 😉

  5. Salut, merci pour le tuto ! Mais comment changer le % de réduction selon le produit ? Merci d’avance

      1. Salut,

        Merci pour le contenu très intéressant.
        Ca m´interesse de le mettre en place avec Speedfly, mais j´aimerai que la réduction s´adapte en fonction du produit.
        Tu pourrais expliquer comment faire stp ?
        Merci á toi

        1. Hello, c’est possible grace aux champs personnalisés de la gestion avancée des produits. En cas de soucis tu peux demander directement au support 😉 speedecom.freshdesk.com

  6. Bonjour, Merci comme d’hab. Utile et efficace. J’ai ds les assets addon.min.css et theme.min.css seulement ou je pourrais mettre le code stp. Merci

    1. Hello, je pense que c’est dans le theme.min.css 🙂

  7. salut, merci pour le tuto top comme dhab je voulais savoir si c’etait possible de le mettre sur la page d’accueil ?

    1. Hello et merci, oui en le mettant dans le bon fichier, généralement sections – featured-product.liquid

  8. Hello, peut-on mettre ce genre d’encart directement dans la partie HTML d’une description de produit ou page ? si oui, quel code faut-il utiliser? merci à toi!!

    1. Hello, oui c’est possible en ne mettant que la partie HTML 🙂

  9. Bonjour j’ai le thème turbo je trouve pas cette onglet la {% endform %} pourtant j’ai fait toute les sections merci

    1. Hello, navré je ne connais pas vraiment Turbo mais le form doit surement se trouver ailleurs. A ce niveau le mieux est de demander au support du thème de vous aider. Bonne chance 🙂

  10. Hello, j’aimerais savoir si il est possible de mettre ce gif sur seulement un produit ? Ce dernier apparaît sur tout mes produits et je le trouve trop cool pour le retirer complétement ma boutique.. (j’utilise shopify)

    1. Hello, oui c’est possible en suivant le principe de cette vidéo 🙂 https://youtu.be/lNd52uce4D0 se baser sur une condition de l’identifiant du produit.

  11. Merci pour ce tuto , jai reussi a le mettre en place mais le problème est quil saffiche sur toutes les pages produits de ma boutique et je souhaite faire une offre sur un seul produit, comment faire en sorte qu’il n’apparaisse pas sur les autres ? Merci d’avance

  12. Merci j’ai réussi, par contre jai plusieurs produits sur ma page, et je souhaite l’afficher sur 2 3 produits, quand je suit la manip il s affiche que sur un seul produit, comment faire pour que je puisse le mettre sous 2 3 produits spécifiques? merci.

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