Tuto Rajouter 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

★ LA LIVRAISON EST OFFERTE ★

1. Se rendre sur l’admin et cliquer sur « Online store »

2. Cliquer sur Action -> Edit HTML et CSS

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> 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:31px;line-height:45px;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>


 

Vous souhaitez me remercier et m’encourager à continuer mes tutos?

Alors n’hésitez pas à me faire un petit don même minime car c’est l’intention qui compte 😉

Je veux faire un don

18 commentaires sur “Tuto Rajouter un bandeau clignotant informatif pour la livraison gratuite sur shopify

  1. Vicente

    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

      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 😉

  2. Patrick

    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

      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 !

  3. Nad

    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 🙂

  4. Francine

    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.

  5. Jacquin

    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 ?

  6. Kach

    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

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

*
*