About Sticky Section
In this article, you will learn how to create a sticky section without using custom CSS code.
- 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).
Summary: Sticky sections help keep important content visible as customers scroll through your store. By making specific sections “sticky,” you ensure that they remain fixed in place, providing customers an easy access to critical information without having to scroll back to the top.
Sticky sections are particularly useful for calls to action, or any content you want to keep prominently displayed as users explore your storefront.
You can read the rest of this manual, or watch a tutorial on how to set up the Sticky Section feature in PageFly:
How To Access PageFly Sticky Section
From Page Editor
In Page editor, follow these steps to access the Sticky Section settings:
- 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”
- Step 3: Publish the page from the Publish button on the menu bar, and go to the live page to see the result.
How To Configure For PageFly Sticky Section
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.
Apply elevation (in More settings button): Stack level of a section, one with greater stack level will be in front of a lower one.
Common Cases
1. 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”:
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:
- Step 1: On live page, right click on the sticky section and open Inspect
- Step 2: From the sticky section, check containing sections of this section one by one
- Step 3: Check until you see the code “overflow:hidden;” in the Styles tab of the section
- Step 4: Copy the Class Name of this section. Back to PageFly page editor, open Custom Code Editor
- Step 5: 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
- Step 6: 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.
2. Create A Sticky Product Add To Cart Button
To make an “Add to Cart” button stick to the top of the screen, first add the “Add to Cart” button element to a section on the page. Then, for that same section, turn on the “Sticky Top” setting. This will cause the “Add to Cart” button to remain visible at the top of the viewport as visitors scroll down the page. The video below demonstrates the full process.
Frequently Asked Questions
1. Why am I not seeing “Enable Sticky Top”?
Enable Sticky Top setting only applies to Section elements. To access this setting, click on a section using one of the following areas in the Page Editor:
- Page Outline
- Canvas
- Breadcrumbs
2. Can I make the button have a transparent background while it’s stuck at the top?
Yes, you can! Please drag and drop a button element into a section and make the section both transparent and sticky. You can follow this guide
Previous article
