How to make a column sticky?

Author: An Do 141 views

Making columns sticky will help your page more user-friendly and intuitive interface. For example, it can be used to keep navigation menus, headers, or footers visible on the screen as the user scrolls through the content, making it easier to access important information without having to scroll back up to the top of the page. It can also be used to create more engaging and interactive designs, such as parallax scrolling effects or sticky call-to-action buttons.

The column you want to make sticky have to be shorter than another one in the same section

In this document, we will make product content (on the right which is shorter) sticky along with a product image

All you need to do is use this code and paste it into the CSS code option of the column.

& {position: sticky; top: 0; height: fit-content;}

Leave a Comment

Start a free trial and enjoy 3 months of Shopify for $1/month on select plans.