How to make a sticky section without code in PageFly
Last updated
Was this helpful?
English 🇺🇸
Last updated
Was this helpful?
In this article, you will learn how to create a without using custom CSS code.
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).
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:
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.
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.
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;}
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.
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.
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?
In this case, Class Name of section is "pagefly-container" so the is
Yes, you can! Please drag and drop a button element into a section and make the section both transparent and sticky. You can follow
