Relative Behavior

How to Adjust Children Alignment in AppSections

The "Children Alignment" setting in AppSections allows you to control the alignment behavior of child elements within groups, specifically how these elements are positioned relative to their parent group. This setting provides flexibility in customizing the layout and visual organization of your elements. Here is how you can adjust the children alignment using the relative behavior options:

Relative Behavior

Purpose: This setting allows you to define how child elements are positioned relative to their parent group.

Usage: Select from three options to set the desired relative behavior.

Relative Behavior Options

1. Group Zones: Child elements are confined within their own column and row zones set in the parent group. The zones disappear when outside these boundaries.

2. Group Relative Hidden: Child elements are positioned relative to the closest parent group, and disappear when outside the parent group.

3. Group Relative External: Child elements are positioned relative to the closest parent group, and do not disappear when outside the parent group.

Steps to Adjust Children Alignment

1. Select the Group:

   • Open your Shopify theme editor.

   • Navigate to the specific group where you want to adjust the children alignment.

2. Locate the Relative Behavior Setting:

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

3. Select Relative Behavior Option:

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

     • Group Zones: Ensures child elements stay within their designated zones.

     • Group Relative Hidden: Allows child elements to be hidden when they move outside the closest parent group.

     • Group Relative External: Allows child elements to remain visible even when they move outside the closest parent group.

Ensuring the Right Relative Behavior Application

1. Preview Changes:

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

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

2. Check Consistency:

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

Summary

By using the "Relative Behavior" setting in AppSections, you can control how child elements are positioned relative to their parent group in your Shopify store. This flexibility allows you to enhance the visual organization and layout of your elements, ensuring a dynamic and engaging user experience across all devices. Adjusting the relative behavior helps create a more structured and visually appealing design.

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