Make a sticky section


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

This feature only applies for a section. In case you need to make a button sticky, please contact our Support team. (this documentation doesn’t apply to make a button sticky).

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

Firstly, you can watch this video about How to make a Sticky Section in PageFly:

How to make a sticky section

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

sticky pagefly

Step 2: Go to General tab > Scroll down to Enable Sticky Top > Select “Yes

Note: This feature only works on the live page and might not work due to theme conflict.

Now, choose the Publish button on the menu bar and go to the live page to see the result.


When you turn the Enable Sticky Top feature on, there are two advanced settings to adjust.

Top Offset: to adjust the spacing between the top edge of the viewport and the sticky sectionmake a sticky section
Z-index (in More settings button): Stack level of a section, one with greater stack level will be in front of a lower onemake a sticky section

Common cases sticky section doesn’t workClick to copy

The section is not stickyClick to copy

Although you followed all the steps above, the sticky section still doesn’t work. You don’t know why?

I set this section sticky but it doesn’t work on live view:

The reason is that there is a containing section of this section including a code from the theme that is “overflow:hidden;”. This code overrides the sticky code and makes the sticky section not work. To fix it, please follow these steps:

  • On live page, right click on the sticky section and open Inspect

sticky section

  • From the sticky section, check containing sections of this section one by one

sticky section

  • Check until you see the code “overflow:hidden;” in the Styles tab of the section

sticky section

  • Copy the Class Name of this section. Back to PageFly page editor, open Custom Code Editor and add this code:

.classname {overflow: visible !important;}

In this case, Class Name of section is “pagefly-container” so the code you need to add is:

sticky section

  • Publish the page and check the Live View

If you have followed the above solutions, the sticky section still doesn’t work, please reach out to us via 24/7 in-app Live Chat so that we can help you directly.

If you have further questions, please join our community. This community is exclusive for PageFly merchants only with our experts and merchants from all around the world!


Thank you for your feedback!

Navigate this category

Could not find the answer
to your question?

Chat with us
PageFly Languagues

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

I got it!