Sticky Position

How to Adjust Sticky Position in AppSections Groups

The "Sticky Position" setting in AppSections Groups allows you to control the distance between the child blocks and the edge of the screen when sticky behavior is active. This setting provides additional customization by fine-tuning the sticky position based on the selected sticky behavior. Here is how you can adjust the sticky position:

Sticky Position

Purpose: This setting allows you to define the distance between child blocks and the edge of the screen when sticky behavior is active.

Usage: Use the range selector to set the desired sticky position from 0 to 100px.

Explanation of Sticky Position in a Flex Environment

1. Sticky Behavior Options:

   • None: Sticky behavior is not active, and the sticky position setting has no effect.

   • Top: Child blocks will stick to the top of the screen at a distance specified by the sticky position when the page is scrolled down.

   • Bottom: Child blocks will stick to the bottom of the screen at a distance specified by the sticky position when the page is scrolled up.

   • All: Child blocks will stick to the top of the screen at a distance specified by the sticky position when scrolling down and to the bottom of the screen at a distance specified by the sticky position when scrolling up.

Steps to Adjust Sticky Position

1. Select the Group:

   • Open your Shopify theme editor.

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

2. Locate the Sticky Position Setting:

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

3. Adjust Sticky Position:

   • Use the range selector to set the sticky position between 0 and 100px:

     • 0px: The child block will stick directly at the edge of the screen.

     • 100px: The child block will stick 100px away from the edge of the screen.

Ensuring the Right Sticky Position Application

1. Preview Changes:

   • After adjusting the sticky position, preview your store to see how the changes look.

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

2. Check Consistency:

   • Ensure that the sticky position 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 position setting on different devices to ensure it looks good and maintains functionality on all screen sizes.

Summary

By using the "Sticky Position" setting in AppSections, you can control the distance between child blocks and the edge of the screen when sticky behavior is active 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 position helps create a more user-friendly and interactive design.

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