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
Étape 2: Accédez à l’onglet Général > Faites défiler jusqu’à Activer le haut collant > Sélectionnez Oui.
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.
Configuration
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 collante |  |
| 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 basse |  |
La section collante des cas courants ne fonctionne pas
La section n’est pas collante
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
- À partir de la section collante, vérifiez les sections contenant cette section une par une
- Vérifiez jusqu’à ce que vous voyiez le code “overflow:hidden;” dans l’onglet Styles de la 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
- 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!
Previous article