Make a sticky section

Important: This feature is only available on the Pro plan

Note

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

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 (or element – it can be anything) that you want to make sticky.

This will be the sticky section

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

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 {…}

Insert code into Custom code editor

And here is the result on Live page
Live page result

Was this helpful?

Start your free 14-day trial
of PageFly

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