Ajouter un bouton « Retourner en haut » sur les longues pages

Si certaines de vos pages sont longues et nécessitent de défiler longtemps, vous pouvez ajouter un bouton Retourner en haut à votre thème.

Exemple de retour en haut

Créer un extrait de retour en haut

  1. Dans le répertoire Snippets (Extraits), cliquez sur Ajouter un nouveau snippet (Ajouter un nouvel extrait).

  2. Nommez votre extrait back-to-the-top, puis cliquez sur Créer l'extrait. Votre fichier d’extrait s’ouvre alors dans l’éditeur de code.

  3. Collez le code suivant dans le fichier back-to-the-top que vous venez de créer :

    ```html {% comment %} Réduisez la valeur ci-dessous si vous souhaitez que le bouton de retour en haut apparaisse plus haut sur la page. Cette valeur est exprimée en pixels. {% endcomment %} {% assign vertical_offset_for_trigger = 300 %}

    {% comment %} Décalage vertical depuis le bas du navigateur pour la position du bouton. {% endcomment %} {% assign position_from_bottom = '6em' %}

    Retourner en haut {{ '//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css' | stylesheet_tag }}```

    1. Cliquez sur Save (Enregistrer).

    Inclure votre extrait

    1. Dans le dossier Mise en page, ouvrez le fichier theme.liquid.

    2. Faites défiler jusqu’en bas du fichier. Juste au-dessus de la balise de fermeture </body>, collez le code suivant :

    {% render 'back-to-the-top' %}

    Votre code doit ressembler à ceci :

    Extrait de retour haut inclus
    ]

    1. Cliquez sur Save (Enregistrer).

    Configurer le bouton de retour en haut (facultatif)

    Pour personnaliser le bouton de retour en haut, cliquez ici et examinez les premières lignes de votre extrait.

    • Pour modifier la position de votre bouton par rapport au bas du navigateur, modifiez la valeur position_from_bottom :
    {% assign position_from_bottom = '4em' %}
    • Pour modifier la distance de défilement qu’un client doit parcourir avant que le bouton n'apparaisse, modifiez la valeur vertical_offset_for_trigger :
    {% assign vertical_offset_for_trigger = 300 %}

    Boutique de démonstration

    Visitez la boutique de démonstration pour voir un exemple de cette personnalisation.

Prêt(e) à commencer à vendre avec Shopify ?

Essayez gratuitement