Position

How to Adjust Position in AppSections

The "Position" setting in AppSections allows you to control the positioning behavior of blocks and groups. This setting provides flexibility in customizing the layout by defining how elements are positioned relative to their containers or parent groups. Here is how you can adjust the position:

Position

Purpose: This setting allows you to choose the positioning behavior of blocks and groups.

Usage: Select from three options to set the desired position: Static, Relative, or Absolute.

Position Options

1. Static:

   • Groups: The positioning through the subsequent vertical and horizontal alignment settings affects only the elements within the group. It adjusts their positions based on the previously set vertical and horizontal padding.

   • Blocks: The positioning through the subsequent vertical and horizontal alignment settings affects only the element within its own padding, based on the previously set vertical and horizontal padding.

2. Relative:

   • Groups: The positioning through the subsequent vertical and horizontal alignment settings affects the entire group, moving it within the section with the blocks inside adjusting within their own zone.

   • Blocks: The positioning through the subsequent vertical and horizontal alignment settings affects the entire block, moving it within the section based on its own zone reference.

3. Absolute (Blocks Only):

   • The block’s base position is removed. The positioning through the subsequent vertical and horizontal alignment settings affects the entire block, moving it within the section based on its own zone reference.

   • Relative Behavior Settings of the Parent:

     • Group Zones: The block’s zones disappear when outside its column and row zone set in the parent group.

     • Group Relative Hidden: The block’s zones disappear when outside the closest parent group.

     • Group Relative External: The block’s zones do not disappear when outside the closest parent group.

Steps to Adjust Position

1. Select the Block/Group:

   • Open your Shopify theme editor.

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

2. Locate the Position Setting:

   • In the settings for the block or group, find the Position option.

3. Select Position Option:

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

     • Static: Adjusts positions within the set padding.

     • Relative: Moves the entire element within its own zone or section.

     • Absolute (Blocks Only): Moves the element with absolute positioning based on the parent group’s relative behavior settings.

Ensuring the Right Position Application

1. Preview Changes:

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

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

2. Check Consistency:

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

Summary

By using the "Position" setting in AppSections, you can control the positioning behavior of your blocks and groups in your Shopify store. This flexibility allows you to enhance the visual appeal and alignment of your layout, ensuring a dynamic and engaging user experience across all devices.

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