Keeping elements fixed on the screen while scrolling

To keep important actions (e.g., "Order" or "Help") always accessible to users during all stages of website interaction, you can pin an element to a selected screen area, ensuring its visibility while scrolling.

In this article, you'll learn how to pin the following elements:
Button
Icon

1. Adding a Fixed Button

First, hover over the block and click the "plus" where you want to place the element:



In the new window, select the Button element to add to the block:



Note: the Two Buttons element cannot be pinned.

Click the added element and click on the "gear" icon to access button settings:



To pin the button, enable the corresponding toggle in its settings:



Tip: You can unpin it by clicking on the same toggle.

Note: This feature is unavailable for collection blocks, Flex blocks, and some others.

After enabling this feature, you can adjust the floating button’s position on the screen both horizontally ① and vertically ② after selecting one of the preset button positions ③.



Note: Display may vary on published sites depending on screen size, browser scaling, and system scaling settings.

Enable scroll-triggered display to make the floating button appear after a specific scroll percentage:



Don't forget to publish your site to apply changes.

2. Adding a Fixed Icon

First, hover over the block and click the "plus" where you want to place the element:



In the new window, select the Icon element to add to the block:



Tip: Learn more about icon customization in this article.

Note: Social Icons, Small Icon list, Icon List, Icon List + Description, and Follow Us elements cannot be pinned.

Click the added element and click on the "gear" icon to access its settings:



To pin the icon, enable the corresponding toggle in its settings:



Tip: You can unpin it by clicking on the same toggle.

Note: This feature is unavailable for collection blocks, Flex blocks, and some others.

After enabling this feature, you can adjust the pinned icon's position on the screen both horizontally ① and vertically ② after selecting one of the preset button positions ③.



Note: Display may vary on published sites depending on screen size, browser zoom, and system scaling settings.

Enable scroll-triggered display to make the fixed icon appear after a specific scroll percentage:



Tip: Set the "Scroll to Block" action for the icon and select your page's first block to use it as a scroll to top button.

Remember to publish your site to apply changes.

Updated on: 03/31/2025