Comment créer une flèche de retour en haut de site sur shopify ?

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.

Ce système est très apprécié des internautes. En effet ils ont l’habitude d’utiliser cette petite flèche pour revenir rapidement en haut du site.

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.

A quoi va ressembler cette flèche ?

Vous pouvez voir ci-dessous ce que cela va donner. La petite flèche en bas à droite:

fleche-scroll

1. Rendez vous sur votre administration et cliquez sur « Boutique en ligne »

2. Cliquez sur le bouton Actions puis Modifier code

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

4. Trouvez le fichier base.css, theme.css, style.css ou autre fichier .css que votre thème utilise et cliquez dessus

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

Partie CSS

#toTop {
 position:fixed;
 bottom:15px;
 right:15px;
 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

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

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

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

9. Trouvez le dossier Mise en page (Layout) et cliquez dessus, il va se dérouler afin d’afficher les fichiers qu’il contient

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

11. Rendez vous tout en bas et copier/coller le code ci-dessous avant la fermeture du </body>.

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

N’oubliez pas de faire une sauvegarde de votre thème avant toute modification dans vos fichiers.

Ce tutoriel existe aussi en vidéo

Bon tuto à tous 🙂

Inclus dans Speedfly
Merci de me laisser une petite note 😉
[Note moyenne de: 4.9 sur 11 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 55 commentaires

  1. ghali

    17 Oct 2017 Répondre

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

      18 Oct 2017 Répondre

      Bonsoir Ghali,

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

      1. phylou

        10 Jan 2018 Répondre

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

        1. dgeo22

          14 Jan 2018 Répondre

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

        10 Jan 2018 Répondre

        Qu’appels tu avant la fermeture du theme ?

        1. dgeo22

          14 Jan 2018 Répondre

          Fermeture du /body pardon 😉

  2. Mariam

    21 Oct 2017 Répondre

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

      21 Oct 2017 Répondre

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

    19 Nov 2017 Répondre

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

  4. Arturo

    1 Déc 2017 Répondre

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

      1 Déc 2017 Répondre

      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. Nicolas PECARD

        5 Mai 2019 Répondre

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

          5 Mai 2019 Répondre

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

  5. stéphane fernandes

    15 Jan 2018 Répondre

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

    18 Jan 2018 Répondre

    salut au top tous ces tutos!!!

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

    1. sken

      18 Jan 2018 Répondre

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

      1. dgeo22

        20 Jan 2018 Répondre

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

    28 Fév 2018 Répondre

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

  8. Guy Linier

    15 Mar 2018 Répondre

    Cool ! ça marche nickel, merci !!

  9. Miche

    28 Avr 2018 Répondre

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

    31 Juil 2018 Répondre

    Ça marche !
    Merci beaucoup à toi.

  11. nicolas

    15 Sep 2018 Répondre

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

      18 Sep 2018 Répondre

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

  12. Barbeurou's

    24 Nov 2018 Répondre

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

      24 Nov 2018 Répondre

      Hello, tu peux tenter jusqu’à 9999 😉

  13. Kassandra

    5 Jan 2019 Répondre

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

    1. Dgeo Dev

      29 Jan 2019 Répondre

      Bonsoir, super merci pour le com 😉

  14. jejm77

    20 Jan 2019 Répondre

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

    1. Dgeo Dev

      29 Jan 2019 Répondre

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

  15. Scar

    11 Mar 2019 Répondre

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

    1. Dgeo Dev

      13 Mar 2019 Répondre

      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. Henrique Trigueiro Peneda

    21 Mar 2019 Répondre

    Parfait !

  17. Laurent

    2 Avr 2019 Répondre

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

      7 Avr 2019 Répondre

      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

  18. Anton

    4 Déc 2019 Répondre

    Super Tuto comme d’habitude.
    Mon Venture commence à ressembler à quelquechose grâce à vous.
    Merci.

    1. Dgeo Dev

      6 Déc 2019 Répondre

      Hello, merci ça fait plaisir 😉 bonne continuation à vous !

  19. Gmo

    17 Déc 2019 Répondre

    Bonjour Dgeo,

    Je souhaite inserer un lien ancrée sur la même page afin d’effectuer un scroll automatique lorsqu’on active un CTA. Es-tu en capacité de m’apporter la solution ?

    En te remerciant d’avance

      1. Gmo

        9 Jan 2020 Répondre

        Merci DGEO très utile cette vidéo.
        Cependant ce système de lien m’envoie directement à la zone et ne scroll pas. Alors que c’est l’effet voulu.
        Te reste-t-il une astuce en stock ?
        En te remerciant d’avance

        1. Dgeo Dev

          9 Jan 2020 Répondre

          Hello, surement un problème JS, le thème n’est peut être pas compatible ou mauvais copier/coller

      2. Gmo

        9 Jan 2020 Répondre

        Bonjour DGEO,

        Merci pour ton retour, ça m’est très utile, cependant je souhaitais avoir l’effet du scrolling lors de l’action du CTA et pas un déplacement instantané.
        Aurait tu une astuce supplémentaire.
        En te remerciant d’avance.

        1. Dgeo Dev

          9 Jan 2020 Répondre

          Même réponse qu’un peu plus haut 🙂

      3. Gmo

        7 Fév 2020 Répondre

        Bonjour DGEO,
        Je reviens encore vers toi, j’ai trouvé cet article : https://www.blackbeltcommerce.com/how-to-add-a-smooth-scroll-effect-on-shopify/ qui explique comment configurer pour avoir un auto scrolling lent lors d’un clique sur un CTA. Cependant ce n’est pas expliqué de la même manière que tes tutos. Comme tu es un expert, peut tu y jeter un oeil pour me donner le codage à effectuer.

        Cordialement

        1. Dgeo Dev

          10 Fév 2020 Répondre

          Hello, merci pour l’idée de tutoriel 🙂 je le mets dans la liste des doléances 😉 Bonne journée

  21. Tonton Lx

    30 Avr 2020 Répondre

    Salut Salut le codeur fou !!
    Merci pour tes précieux conseils !!
    Sur mon thème cette flèche fonctionne parfaitement sur mes fiches produits (apparition au bout de quelques scroll et retour en haut de page nickel quand je clique dessus) par contre sur ma page d’accueil la flèche est présente immédiatement et pas de retour en haut de page au clique ???
    Une astuce peut-être ??
    Merci d’avance !!

    1. Dgeo Dev

      30 Avr 2020 Répondre

      Hello, décidément ton thème est spécial… quel est son nom ?

  22. Tonton Lx

    3 Mai 2020 Répondre

    Salut Salut,

    Je suis sur Brooklyn !! 😉

  23. Peter

    19 Mai 2020 Répondre

    Hi,
    parfait comme le reste…
    Merci.

  24. Romain

    6 Juin 2020 Répondre

    Salut,
    Comment on fait pour Fastlane, j’arrive jamais tes tutos sur fastlane car c’est pas du tout les memes dossiers. Merci

    1. Dgeo Dev

      6 Juin 2020 Répondre

      Hello, effectivement c’est assez pénible car Fastlane et Turbo sont assez à particuliers niveau nomenclature des fichiers 🙁 le mieux est de passer sur Speedfly 😀 sinon demander au support de fastlane les bons chemins

  25. ICARD Anaïs

    21 Fév 2021 Répondre

    Bonjour ! Merci beaucoup pour tes tutos simples qui sont toujours d’une grande aide ! D’habitude je m’en sors toujours mais là ça ne fonctionne pas ! Comme beaucoup d’autres j’ai la flèche mais quand je clique rien ne se produit. Je suis sous le thème Narrative. Quand j’ai testé de vérifier dans Layout et theme.liquid en tapant .js mon dernier dossier n’est pas theme.js mais custom .js, du coup j’ai aussi essayé la dedans mais toujours rien ! J’ai fait comme tu as dit en retirant le script src=https://code.jquery.com/jquery-1.12.4.min.js mais rien non plus ! Je sais plus quoi faire, si tu as une astuce 🙂 Merci beaucoup

    1. Dgeo Dev

      23 Fév 2021 Répondre

      Hello, aucune idée comme ca à l’aveugle, il faudrait demander au support de votre thème car vous avez droit à 60mn d’intervention gratuite vu que c’est un thème développé par shopify 😉

  26. Raphaël

    16 Juin 2021 Répondre

    Super, merci beaucoup. Votre site est vraiment génial pour tous ces petits « hack UI ». Juste une question ? Est-il possible de déclencher l’affichage de la flèche un peu plus bas sur la page et non dès le premier pixel scrollé ?

    1. Dgeo Dev

      16 Juin 2021 Répondre

      Hello, oui faut trouver les valeurs 0 des scrollTop() = ou != et remplacer par 100 par exemple ou +

Laisser un commentaire

Fermer le menu
×
×

Panier