Nous allons dans ce tuto apprendre à créer une flèche de retour en haut du site afin de revenir rapidement au début en un seul clic

ATTENTION: Ce code n’est compatible qu’avec les thèmes du store officiel (incompatibilité sur certains thèmes comme rétina)

Cette flèche sera positionnée en bas à droite et ne sera visiblement uniquement lorsque vous commencerez à scroller, elle disparaîtra lorsque vous reviendrez tout en haut

Exemple de ce que ca va donner

fleche-scroll

Rendez vous sur votre administration et cliquez sur « online store »

Cliquez sur le bouton Action puis Edit HTML / CSS

Trouvez le dossier Assets et cliquez dessus, il va se dérouler afin d’afficher les fichiers qu’il contient

Trouvez le fichier theme.scss.liquid ou style.scss.liquid ou timber.scss.liquid selon le thème et cliquez dessus

Rendez vous tout en bas et copier/coller le code ci-dessous

Partie CSS

#toTop {
 position:fixed;
 bottom:5px;
 right:5px;
 cursor:pointer;
 background: rgba(000,000,000,0.7);
 width:50px;
 font-size:25px;
 line-height:45px;
 color:#fff;
 text-align:center;
 border-radius:50px;
 height:50px;
}

Partie JS

Trouvez le dossier Assets et cliquez dessus, il va se dérouler afin d’afficher les fichiers qu’il contient

Trouvez le fichier theme.js.liquid ou style.js.liquid ou timber.js.liquid selon le thème et cliquez dessus

Rendez vous tout en bas et copier/coller le code ci-dessous

$(function(){$.fn.scrollToTop=function(){$(this).hide().removeAttr("href");if($(window).scrollTop()!="0"){$(this).fadeIn("slow")}var scrollDiv=$(this);$(window).scroll(function(){if($(window).scrollTop()=="0"){$(scrollDiv).fadeOut("slow")}else{$(scrollDiv).fadeIn("slow")}});$(this).click(function(){$("html, body").animate({scrollTop:0},"slow")})}}); 
$(function(){
 $("#toTop").scrollToTop();
});

Partie HTML

Trouvez le dossier Layout et cliquez dessus, il va se dérouler afin d’afficher les fichiers qu’il contient

Trouvez le fichier theme.liquid ou layout.liquid selon le thème et cliquez dessus

Rendez vous tout en bas et copier/coller le code ci-dessous avant la le

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script
 src="//code.jquery.com/jquery-2.2.4.min.js"
 integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
 crossorigin="anonymous"></script>
<div id="toTop"><i class="fa fa-arrow-up"></i></div>
Merci de me laisser une petite note 😉
[Note moyenne: 1 sur 5]

🤗 Vous souhaitez m'encourager à continuer mes Tutos ?

Cliquez sur le bouton ci-dessous pour me laisser un petit pourboire 😉

Payer un coup à Dgeo Dev

Cet article a 34 commentaires

  1. bonsoir je n ai pas su mettre le 3e Dossier

    dans PARTIE HTML
    voila la fin de Shopify de mon site dans ‘ theme.liquid ‘
    ————–
    ‘ moneyFormat: moneyFormat,
    disableAjaxCart: false,
    enableQtySelectors: true
    });
    });

    {% endif %}

    **********************
    => est ce ici qu’ on le glisse ! merci .

    1. Bonsoir Ghali,

      Il faut le mettre juste avant la fermeture de ton thème. bonne soirée

      1. bonjour
        ça ne fonctionne pas ;j’ai bien la flèche mais quand je clique dessus ça ne réagit pas.

        1. Salut essaye d’enlever la portion de code qui commence par …script src=https://code.jquery.com/jquery-1.12.4.min.js…
          Et reteste, bonne soirée

      2. Qu’appels tu avant la fermeture du theme ?

        1. Fermeture du /body pardon 😉

  2. Hello,

    J’ai essayé plusieurs tuto (flèche de retour, agrandir ajout au panier…) mais je n’ai pas vu de changement?

    Est-ce que ces tutos sont applicables au modèle brooklyn de shopify?

    Merci de ton retour

    Sinon les tutos sont top, super bien explicite 😉

    Mariam

    1. Salut Mariam, je ne suis pas un grand utilisateur du thème brooklyn. si tu as besoin je peux t’aider en privé pour tester tout ca ! ce qui permettrait d’améliorer en plus le tuto !
      Fait moi une demande messenger ici: https://www.facebook.com/dgeodev bonne soirée

  3. La classe, merci.!!
    J’ai même pu changer ma couleur, au top…Keep going…!!! 😉

  4. Salut, je suis sur le thème Turbo et je ne trouve pas les sections dont tu parles y aurait il un équivalent ?
    Merci d’avance 🙂

    Et un grand merci pour ce magnifique site et ces petits tutos très clairs

    1. Salut et merci pour ton commentaire 🙂 Oula turbo c’est un gros merdier au niveau du système de fichier, suis pas fan mais essaye de trouver une zone product-description.liquid ou assimilé. bon courage ce thème est pas simple 😉

      1. Salut Dgeo
        Vraiment merci beau travail de vulgarisation !!
        C’est super pratique tes tutos et tout de suite compréhensible !
        Je suis sur le thème TURBO aussi et je ne trouve pas les assets en .js dont tu parles :
        moij’ai app.js.liquid, instantclick.min.js, jquery.cart.min.js, jquery.currencies.min.js, jquery.min.js,..
        …..pour le reste c bon.
        Merci d’avance pour ton temps
        Nicolas

        1. Hello, merci pour le message 😉 c’est donc app.js 🙂

  5. Bonsoir,

    Je clique sur la flèche mais rien ne se passe. Il ne me ramène pas en haut de la page. Comment faire?

    Merci Dgeo!

  6. salut au top tous ces tutos!!!

    par contre ca marche pour vous sur mobile?
    peut etre une manip supplémentaire à faire?

    1. ok j’ai compris sur mobile il faut décaler la page sur la gauche pour voir le bouton… va savoir pourquoi

      1. Merci pour les commentaires, la flèche se colle en bas et sur la droite par rapport à son conteneur, si décalage il y a c’est que le thème merdouille un peu 😀

  7. Parfait avec le thème Début!!! Merci beaucoup!!!

  8. Cool ! ça marche nickel, merci !!

  9. Bonjour,

    J’utilise le thème minimal pour créer un monoproduit.

    J’ai suivit les instructions… sauf que je n’ai pas theme.js.liquid mais theme.js
    J’ai placé tous les codes en bas des pages codes (à tort ou à raison).
    Et… no flèche lorsque j’ouvre la page en visualisation.

    Qu’en penses-tu ?
    Quelle serait la soluce ? merci

    Amicalement,

    Michel

  10. Ça marche !
    Merci beaucoup à toi.

  11. Salut,

    Tu devrais rajouter un
    z-index=10000;
    par exemple dans ta partie CSS, sinon, y a certaines pages ou la flèche n’est pas au premier plan.
    Nicolas

    1. Hello, oui bonne idée merci 🙂 Bonne soirée

  12. Le bouton est au second plan comment le mettre au premier plan ?
    J’essaye depuis 2jours avec z-index=10000; mais j’y arrive pas du tout … ^^^
    Comment faire please ?

    1. Hello, tu peux tenter jusqu’à 9999 😉

  13. Merci, je viens de suivre les étapes et ça fonctionne super bien 😀 c’était super bien expliqué 😉

    1. Bonsoir, super merci pour le com 😉

  14. top merci, super tuto !! Possible de grossir un peu la flêche?

    1. Bonsoir, merci oui en changeant la valeur font-size:25px; mettre 35px par exemple.

  15. Bonjour à tous tutos génial! Est il possible de placer la flèche à gauche ou même au milieu ?

    1. Merci 😉
      Oui il suffit de modifier dans la partie CSS les éléments suivants:
      bottom:5px;
      right:5px;

      remplacer right par left et le bottom par in 45% au lieu du 5px par exemple

  16. Parfait !

  17. Bonjour et merci pour ces précieuses informations !

    Par contre j’aimerai enlever les étoiles de loox review car certaines restent malgré la désinstallation de l’applications

    Encore merci

    1. Hello, même après avoir supprimé l’app les codes restent. Il faut donc les retrouver et les supprimer. Au pire demande à l’app en question ils sont la pour ca et ils ont l’habitude :p

Laisser un commentaire

Fermer le menu
×
×

Panier

Tu aimes mes Tutos & mes Articles ?

Alors n'hésites pas à m'encourager à continuer ce Blog !


Je donne 1e à Dgeo Dev

Envie de Booster ton taux de conversion ?

J'ai créé une nouvelle Application Shopify qui devrait te plaire !
Elle va te permettre de créer des Bundles en direct checkout !
N'hésite pas à la tester elle est Gratuite pendant 7 jours

En savoir plus