Tuto 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

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>

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

23 commentaires sur “Tuto créer une flèche de retour en haut de site sur shopify

  1. ghali

    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 .

  2. Mariam

    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

  3. Arturo

    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

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

        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 😀

  4. Miche

    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

  5. Barbeurou's

    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 ?

Laisser un commentaire

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

*
*