Sticky Behavior

How to Adjust Sticky Behavior in AppSections Groups

The "Sticky Behavior" setting in AppSections Groups allows you to control how child blocks behave when the page is scrolled. This setting provides flexibility in making elements sticky, meaning they stay visible at a specific position as the user scrolls through the page. Here is how you can adjust the sticky behavior:

Sticky Behavior

Purpose: This setting allows you to define how child blocks within a group behave when the page is scrolled.

Usage: Select from four options to set the desired sticky behavior.

Sticky Behavior Options

1. None: Sticky behavior is not active; blocks scroll normally with the page.

2. Top: Blocks stick to the top of the screen when the page is scrolled down.

3. Bottom: Blocks stick to the bottom of the screen when the page is scrolled up.

4. All: Blocks stick to the top of the screen when scrolling down and to the bottom of the screen when scrolling up.

Explanation of Sticky Behavior in a Flex Environment

1. None:

   • Behavior: Child blocks do not exhibit any sticky behavior and scroll normally with the rest of the page content.

   • Use Case: Useful when no special sticky behavior is needed for the elements within the group.

2. Top:

   • Behavior: Child blocks stick to the top of the screen as the user scrolls down the page.

   • Use Case: Useful for keeping important navigation menus, headers, or call-to-action buttons visible at the top of the screen.

3. Bottom:

   • Behavior: Child blocks stick to the bottom of the screen as the user scrolls up the page.

   • Use Case: Useful for keeping important footers, additional navigation options, or persistent call-to-action buttons visible at the bottom of the screen.

4. All:

   • Behavior: Child blocks stick to the top of the screen when scrolling down and to the bottom of the screen when scrolling up.

   • Use Case: Useful for elements that need to remain visible regardless of the scroll direction, providing continuous visibility for critical information or controls.

Steps to Adjust Sticky Behavior

1. Select the Group:

   • Open your Shopify theme editor.

   • Navigate to the specific group where you want to adjust the sticky behavior.

2. Locate the Sticky Behavior Setting:

   • In the settings for the group, find the Sticky Behavior option.

3. Select Sticky Behavior Option:

   • Choose one of the four options based on your design preferences:

     • None: No sticky behavior.

     • Top: Sticky at the top of the screen when scrolling down.

     • Bottom: Sticky at the bottom of the screen when scrolling up.

     • All: Sticky at the top when scrolling down and at the bottom when scrolling up.

Ensuring the Right Sticky Behavior Application

1. Preview Changes:

   • After selecting a sticky behavior option, preview your store to see how the changes look.

   • Check the group to ensure the sticky setting is applied correctly and enhances the layout.

2. Check Consistency:

   • Ensure that the sticky behavior setting aligns with your brand’s aesthetic and provides a cohesive look across both desktop and mobile devices.

3. Test Across Devices:

   • Verify the sticky behavior setting on different devices to ensure it looks good and maintains functionality on all screen sizes.

Summary

By using the "Sticky Behavior" setting in AppSections, you can control how child blocks within groups behave when the page is scrolled in your Shopify store. This flexibility allows you to enhance the visibility and accessibility of important elements, ensuring a dynamic and engaging user experience across all devices. Adjusting the sticky behavior helps create a more user-friendly and interactive design.

If you have any questions or need further assistance, please contact our customer support team.