Comment créer un encart Offre Spéciale sur Shopify

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 – Ressources (Assets) – Trouvez votre fichier base.css, theme.css, style.css ou autre fichier .css que votre thème utilise 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 Modèles (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 Extraits (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: 4.9 sur 10 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 47 commentaires

  1. Max Harder'Z

    15 Mai 2020 Répondre

    Encore un super tuto de ta part 🙂 Merci bien 😉

    1. Dgeo Dev

      15 Mai 2020 Répondre

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

      1. Max Harder'Z

        16 Mai 2020 Répondre

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

        10 Fév 2021 Répondre

        Salut j’ai essai d’installé le code comme tu la indiques dans tes vidéo et ces sent succès pour moi j utilise le thème début

        1. Dgeo Dev

          11 Fév 2021 Répondre

          Etrange car le tuto est fait sur le thème Debut. A voir si il manque pas quelque chose 🙂

  2. Tom

    18 Mai 2020 Répondre

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

      18 Mai 2020 Répondre

      Oui j’ai une solution, passer sur Speedfly 😀

  3. Julien

    18 Mai 2020 Répondre

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

      18 Mai 2020 Répondre

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

    19 Mai 2020 Répondre

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

      19 Mai 2020 Répondre

      Merci, essaie de trouver un </form> 😉

  5. Catarina Centenico

    20 Mai 2020 Répondre

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

      1. JMB

        10 Août 2020 Répondre

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

          11 Août 2020 Répondre

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

    30 Mai 2020 Répondre

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

      30 Mai 2020 Répondre

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

  7. mtp

    30 Mai 2020 Répondre

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

    1. Dgeo Dev

      1 Juin 2020 Répondre

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

  8. Joel

    3 Juin 2020 Répondre

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

      3 Juin 2020 Répondre

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

  9. Patrick

    14 Sep 2020 Répondre

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

    1. Dgeo Dev

      15 Sep 2020 Répondre

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

    18 Oct 2020 Répondre

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

      19 Oct 2020 Répondre

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

    24 Oct 2020 Répondre

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

    13 Nov 2020 Répondre

    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.

  13. youss

    7 Déc 2020 Répondre

    Bonjour, alors déjà merci pour ce tuto je chercher ca depuis un moment, j’ai juste une question sur téléphone c’est assez gros et j’aimerais savoir si c’est possible de réduire un peu le tout ?

  14. Laetitia

    17 Déc 2020 Répondre

    Bonjour et merci à nouveau car avec vos tutos j’arrive toujours à créer des chouettes trucs! Une question bête cependant quand mon offre est finie j’ai juste à supprimer le code?
    Merci encore

    1. Dgeo Dev

      17 Déc 2020 Répondre

      Bonjour et merci pour le message, oui il suffit de supprimer les codes ajoutés 🙂

  15. Curtis BOQUET

    18 Déc 2020 Répondre

    salut !
    merci pour toutes ces astuces 🙂
    mais j’ai une question a te poser !
    quel est le code pour pouvoir faire ta bande noir en tète du site comme sut ton site de démo stp ? celui qui défile avec le  » satisfait ou remboursée  » ,  » support réactif  » …
    merci
    curtis

    1. Dgeo Dev

      18 Déc 2020 Répondre

      Hello, c’est dans la liste des tutos 😉 rechercher flash bar info

  16. berny

    23 Jan 2021 Répondre

    Bonjour,

    Merci pour ce tutto très précieux pour moi, merci beaucoup!
    J’ai réussi à le faire sans soucis mais ça ne s’affiche que sur la page du produit et pas sur ma page d’accueil ou se trouve mon monoproduit. Pouvez-vous me dire comment le mettre aussi sur mon manoproduit page d’acceuil?

    1. Dgeo Dev

      23 Jan 2021 Répondre

      Hello et merci pour le message 🙂 dans ce cas il faut faire le tuto sur le fichier sections – featured-product.liquid, si ce fichier n’existe pas il suffit de demander au support de votre thème quel est le fichier du produit mis en avant de la page d’accueil.

      1. Berny

        23 Jan 2021 Répondre

        Super merci et derniere petite chose c est possible d enlever le + ?

        1. Dgeo Dev

          23 Jan 2021 Répondre

          Oui c’est dans la partie du code html 😉

  17. Elhoussaine

    28 Jan 2021 Répondre

    Merci pour ce GIF qui fait la différence niveau MARKETING par rapport à la concurrence. Ca donne une touche de dynamisme au site et le rend encore plus vivant.
    Vous êtes les meilleurs.

    1. Dgeo Dev

      28 Jan 2021 Répondre

      De rien et merci pour le com 😉 le mieux c’est que ce n’est pas un gif mais un code qui simule un gif ce qui est bien mieux pour les performances 😉

  18. Fred

    17 Mai 2021 Répondre

    Bonjour,

    Top la vidéo, merci.
    J’ai un problème sur ma page produit je l’ai bien mais pas sur mon produit vedette en page d’accueil. Comment je peux faire?
    Merci

    1. Dgeo Dev

      17 Mai 2021 Répondre

      Hello, il faut faire la même procédure mais sur le fichier généralement appelé featured-product.liquid dans le dossier section

  19. Alan

    19 Sep 2021 Répondre

    Salut, le premier code ne marche pas, en le copiant-collant. Sur les autres tutos ça ne posait pas de soucis pourtant. Possible d’y remédier ?

    1. Dgeo Dev

      21 Sep 2021 Répondre

      Hello, surement une incompatibilité avec ton thème. Essaie de voir avec leur support 🙂

  20. Cyrille Letang

    15 Déc 2021 Répondre

    Bonjour Dgeo, j’ai bien suivi ton tuto, mais le problème le GIF ne clignote pas, aurais tu une idée ?

  21. Cyrille Letang

    15 Déc 2021 Répondre

    C’est bon problème réglé

    1. Dgeo Dev

      15 Déc 2021 Répondre

      Hello, super bravo ! 🙂

Laisser un commentaire

Fermer le menu
×
×

Panier