Create a Sticky Section with PageFly

Note
  • 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:

1. Steps to Create a Sticky Section

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

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

Make a sticky section

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.

Make a sticky section

2. Configuration

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 section

Make a sticky section

Apply elevation (in More settings button): Stack level of a section, one with greater stack level will be in front of a lower one.

Make a sticky section

3. Common Cases: When it doesn’t work

The section is not sticky

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”:

Make a sticky section

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

Make a sticky section

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.

Thank you for your feedback!

Could not find the answer
to your question?

Chat with us