Faire une section collante

Remarque

Cette fonctionnalité peut ne pas fonctionner sur certains thèmes Shopify selon la façon dont le développeur du thème crée le thème.

Cette fonctionnalité ne s’applique qu’à une section. Si vous avez besoin de rendre un bouton collant, veuillez contacter notre équipe d’assistance. (cette documentation ne s’applique pas pour rendre un bouton collant).

Dans cet article, vous apprendrez à créer une section collante avec le code CSS personnalisé.

Comment faire une section collanteClick to copy

Étape 1: Cliquez sur la section que vous souhaitez rendre collante

Faire une section collante

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

Faire une section collante

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.

Faire une section collante

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 collanteFaire une 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 basseFaire une section collante

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

Faire une section collante

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

Si vous avez suivi les solutions ci-dessus, la section collante ne fonctionne toujours pas, veuillez nous contacter via l’application Live Chat 24/7 afin que nous puissions vous aider directement.

Si vous avez d’autres questions, n’hésitez pas à rejoindre notre communauté. Cette communauté est exclusive aux marchands PageFly uniquement avec nos experts et marchands du monde entier!

JOIN PAGEFLY COMMUNITY

Thank you for your feedback!

Could not find the answer to your question?

No worries, contact Our LiveChat Support 24/7

Contact PageFly LiveChat
PageFly Languagues

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

I got it!