Make a sticky section

Note

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

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

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

Step 1: Give a unique ID to the section

Choose the Section that you want to make sticky.

This will be the sticky section

Navigate to the General tab > Attributes section > give a unique ID to the element. In this case, we called it “sticky-01”.

Unique ID to be associated with when using custom CSS code

Step 2: Add custom CSS code

Open the Custom Code Editor > copy and paste the code below into the Custom CSS section > Update.

Important: Make sure that you got the correct ID of the element after the “#” sign. It should be #ID {…}

Please click here to see the code

https://pastebin.com/raw/J5qQNjpH

Insert code into Custom code editor

After inserting the code as the image, click on the Save change button to save what you’ve just made.

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

You can check the video tutorial below

Was this helpful?

Try out all PageFly features with Free plan

.myshopify.com
Don’t have Shopify store yet? Create store
×

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

I got it!
Languages