Comment créer un bandeau clignotant informatif pour la livraison gratuite sur shopify ?

Nous allons voir dans ce tuto Comment créer un bandeau clignotant informatif pour la livraison gratuite sur shopify

Vous voulez un bouton kitch pour bien faire comprendre à vos client que la livraison est gratuite ?

C’est le code qu’il vous faut :p

Pour être franc, ce code a été fait sur un délire pour un client ! et puis plusieurs personnes ont trouvé ça sympa… Par conséquent j’en ai fais un tuto.

Bon cela ne convient pas à toutes les niches donc à vous de voir si vous souhaitez l’utiliser ou pas 😉

Voila à quoi cela va ressembler:

★ LA LIVRAISON EST OFFERTE ★

Passons à la partie tutoriel

1. Se rendre sur l’admin et cliquer sur « Boutique en ligne »

2. Cliquer sur Actions -> Modifier code

3. Trouvez le dossier « Sections» et cliquez dessus cela va dérouler les fichiers qui le compose

4. Cliquer sur le fichier product-template.liquid

5. Copier/Coller juste avant {{ product.description }} ou après la fermeture du /form> ou {% endform %} juste avant le code ci-dessous et cliquez sur le bouton « Save »

<style>#shakeup, #shakeup2 {margin:15px auto; text-align:center; background:#ff6600;color:#fff;font-size:21px;line-height:25px;padding:10px 15px;width:100%;border:none;text-decoration: blink;}.blink { animation: blink-animation 1.5s steps(1, start) infinite; -webkit-animation: blink-animation 1.5s steps(10, start) infinite;}@keyframes blink-animation { to { visibility: hidden; }}@-webkit-keyframes blink-animation { to { visibility: hidden; }}</style>
<div id="shakeup2"><span class="blink">★ LA LIVRAISON EST OFFERTE ★</span></div>

Bon tuto à tous !

Merci de me laisser une petite note 😉
[Note moyenne de: 5 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 31 commentaires

  1. EDDY

    13 Août 2017 Répondre

    Bravo, travail tres pro, ça vas aider beaucoup de gens. merci

    1. dgeo22

      13 Août 2017 Répondre

      Merci Eddy 🙂

  2. WALDBERG

    26 Sep 2017 Répondre

    Genial ! super utile et facile a installer ! merci mille fois

    1. dgeo22

      26 Sep 2017 Répondre

      Merci ravi que ca serve ! Bonne journée

  3. Vicente

    5 Oct 2017 Répondre

    Bonjour,

    Merci infiniment pour tout vos tutos qui me sont très utile !

    Cependant je souhaite réagir concernant cette fonctionnalité, je suis tombé sur cette article :

    https://developer.mozilla.org/fr/docs/Web/HTML/Element/blink

    Je cite :

    Cette fonctionnalité est obsolète, bien qu’encore supportée par des navigateurs, son utilisation est découragée pour tout nouveau projet, évitez de l’utiliser.

    L’article date du 20 septembre 2017.

    Quel est votre avis ?

    Bien cordialement,

    Vicente

    1. dgeo22

      5 Oct 2017 Répondre

      De rien ravi que ca vous soit utile 🙂 en faite se tuto a été créé sur un délire et un besoin d’un client d’ou son côté old school 🙂 et en effet elle est déprimé (dépassée) mais ca n’empeche pas son fonctionnement, car dans le e commerce on trouve souvent des choses ringardes qui attire l’oeil donc passe outre les recommandation de mozilla 😉

  4. Patrick

    21 Oct 2017 Répondre

    Merci pour tous tes tutos. Ton travail est énorme et formidable. Étant au RSA je ne peux malheureusement pas faire de don pour le moment mais je te promets de le faire très prochainement pour encourager ton investissement à nous aider. Merci infiniment. Patrick

    1. dgeo22

      21 Oct 2017 Répondre

      Merci Patrick et ravi que ca te serve ! c’est le but 😉 pas de soucis pour le don ce n’est pas obligatoire ! je comprends ta situation, bonne réussite à toi !

  5. Nad

    20 Nov 2017 Répondre

    Hey ! tout d’abord merci pour tes tutos , c’est vraiment génial , les etapes sont minutieusement expliqué , merci infiniement !

    Je voulais savoir si la banière serait possible d’etre de couleur bleue foncée ou grise plutot que orange?

    Encore merci 🙂

  6. Francine

    25 Nov 2017 Répondre

    Bonjour,

    Ton Tuto est super, mais j’ai un soucis, car pour attirer des clients sur mon site j’ai mis des produits gratuits avec des frais de livraison, comment faire pour que ton script n’apparaisse pas dans le code des produits offerts. Depuis que j’ai démarré mon site je n’ai pas eu un seul client. J’aimerais acheté ton rhème Speedfly mais pour le moment je n’ai pas les sous pour. Il m’intéresse beaucoup. Merci d’avance pour tes conseils.

    1. dgeo22

      30 Nov 2017 Répondre

      Bonjour Francine, c’est possible mais il faut s’y connaitre en HTML et CSS, en gros il fait récupérer l’id de votre fiche produit dans la balise body

      1. Mehdi Bk

        14 Sep 2019 Répondre

        bonjour quand jai recup l’id j’en fais quoi svp ?

          1. OK m

            1 Juin 2020

            Salut Je la vidéo de ce tuto merci

  7. Jacquin

    27 Déc 2017 Répondre

    Super mais il paraît qu’à chaque MAJ de thème – tout au moins le mien Fastlane -ce qui est très fréquent les modifs sont effacées donc à refaire.
    Qu’e penses tu ?

    1. dgeo22

      27 Déc 2017 Répondre

      Merci pour le com, dans fastlane tu as dans customize -> fiche produit un champ custom script ou tu peux copier/coller ce code 😉
      Bonne soirée

  8. Kach

    21 Fév 2018 Répondre

    Hello,
    super tuto.

    Malheureusement pour moi ce code entre en conflit avec celui ci:
    TUTO COMMENT CRÉER UN SYSTÈME D’ONGLETS SUR SHOPIFY : DESCRIPTION, LIVRAISON & RETOUR, QUESTIONS

    En gros des que je le mets il modifie le format du texte écrit dans les tabs.. je ne trouve pas le lien entre les deux bouts de code qui pourrait générer çà.

    Si tu sais aider :p
    Merci

    1. dgeo22

      24 Fév 2018 Répondre

      Hello, merci
      Hum je ne vois pas trop comme ca, peut etre supprimer l’appel en trop du query.js

  9. HUET

    23 Juin 2018 Répondre

    Bonsoir,

    c’est possible d’avoir un rendu?

    Cdt

  10. antho

    18 Juin 2019 Répondre

    hello parfait pour pc mais pas homogène et centrer sur telephone portable. tu as un réglage particulier a préconiser pour que cela soit plus jolie ? sinon excellent travail que tu propose merci infiniment

  11. Rodolphe Bourgeois

    6 Fév 2020 Répondre

    Merci Dgeo Dev, j’ai copié ton bout de code que j’ai collé tel quel dans mon header.liquid sans rien d’autre et cela me fais un très joli header dynamique ! J’adore

    1. Dgeo Dev

      10 Fév 2020 Répondre

      Hello, c’est possible en rajoutant ceci dans la balise: controlsList= »nodownload » … exemple: <..video src="..." controlsList="nodownload"..><../video..>

  12. Cédric

    15 Mar 2020 Répondre

    Bonjour,

    je n’arrive pas installer le bandeau clignotant. Pouvez-vous me renseigner svp ? j’utilise speedfly.
    Cordialement.

    1. Dgeo Dev

      19 Mar 2020 Répondre

      Hello, dans ce cas vous pouvez contacter le support directement ici 🙂 speedecom.freshdesk.com

  13. JLL

    13 Oct 2020 Répondre

    Super utile! Merci!

  14. Cyprien_Ecom

    27 Nov 2020 Répondre

    Bonjour!
    Le code n’a pas marché pour moi sur le theme Debut.
    Pourquoi?

  15. Florian

    28 Mar 2021 Répondre

    Bonsoir merci pour ton aide j’aimerais s’avoir comment mettre « Livraison offerte » tout à gauche du texte sans le cadre ?

    1. Dgeo Dev

      29 Mar 2021 Répondre

      Hello, il faut jouer avec le css… essayer de supprimer cette partie et adapter: margin:15px auto; text-align:center; background:#ff6600;color:#fff;

  16. dylan

    9 Juil 2023 Répondre

    Salut merci pour ton super travail, j’aimerais modifier la couleur de la banniére pour du noire mais je n’arrive pas a modifier la couleur via le code, si quelqu’un a une idée.

    1. Dgeo Dev

      27 Août 2023 Répondre

      Hello, il faut modifier le background et mettre :#000;

Laisser un commentaire

Fermer le menu
×
×

Panier