Faire une section collante

Remark

This feature may not work on some Shopify themes depending on how the theme developer creates the theme.

This feature only applies to one section. If you need to make a button sticky, please contact our support team. (this documentation does not apply to making a button sticky).

In this article, you will learn how to create a sticky section with custom CSS code.

How to make a sticky section

Step 1: Click on the section you want to make sticky

Make a sticky section

Étape 2: Accédez à l’onglet Général > Faites défiler jusqu’à Activer le haut collant > Sélectionnez Oui.

Make a sticky section

Remarque: Cette fonctionnalité ne fonctionne que sur la page en direct et peut ne pas fonctionner en raison d’un conflit de thème.Maintenant, choisissez le bouton Publier dans la barre de menu et accédez à la page en direct pour voir le résultat.

Make a sticky section

ConfigurationClick to copy

Lorsque vous activez la fonction Activer le haut collant, vous devez régler deux paramètres avancés.

Décalage supérieur: pour ajuster l’espacement entre le bord supérieur de la fenêtre d’affichage et la section collanteMake a sticky section
Z-index (dans le bouton Plus de paramètres): Niveau de pile d’une section, une avec un niveau de pile plus élevé sera devant une plus basseMake a sticky section

La section collante des cas courants ne fonctionne pasClick to copy

La section n’est pas collanteClick to copy

Bien que vous ayez suivi toutes les étapes ci-dessus, la section collante ne fonctionne toujours pas. Vous ne savez pas pourquoi ?

J’ai mis cette section collante mais cela ne fonctionne pas sur la vue en direct:

La raison en est qu’il existe une section conteneur de cette section comprenant un code du thème qui est “overflow:hidden;“. Ce code remplace le code collant et empêche la section collante de fonctionner. Pour résoudre ce problème, veuillez suivre ces étapes :

  • Sur la page en direct, faites un clic droit sur la section collante et ouvrez Inspecter

sticky-section

  • À partir de la section collante, vérifiez les sections contenant cette section une par une

sticky-section

  • Vérifiez jusqu’à ce que vous voyiez le code “overflow:hidden;” dans l’onglet Styles de la section

sticky-section

  • Copiez le nom de classe de cette section. Retournez à l’éditeur de page PageFly, ouvrez l’éditeur de code personnalisé et ajoutez ce code:

.classname {overflow: visible !important;}

Dans ce cas, le nom de classe de la section est “pagefly-container” donc le code que vous devez ajouter est: https://pastebin.com/raw/YkX4J7z6

Make a sticky section

  • Publiez la page et vérifiez la Vue en direct

If you have followed the solutions above, the sticky section still does not work, please contact us through the Live Chat app 24/7 so that we can assist you directly.

If you have any other questions, feel free to join our community. This community is exclusive to PageFly merchants only with our experts and merchants around the world!

JOIN PAGEFLY COMMUNITY

Feedback
Thank you for your feedback!

Could not find the answer
to your question?

Chat with us
PageFly Languagues

PageFly Help Center is now available in Chinese & French. Please check the flags on the page header.

I got it!
Explore how you can use PageFly to win this Christmas and Year-end sales Check now