Download AppSectionsWebsite

Vertical Alignment

How to Adjust Vertical Alignment in AppSections

The "Vertical Alignment" setting in AppSections allows you to control the vertical positioning of blocks and groups within their containers. This setting provides flexibility in customizing the layout by adjusting the position of elements from -100 (bottom) to 100 (top). The behavior of this setting varies based on whether the element is a group or a block and the selected position type (Static, Relative, Absolute). Here is a detailed explanation of how the vertical alignment works:

Vertical Alignment

Purpose: This setting allows you to position elements vertically within their container or section. Usage: Use the range selector to set the desired vertical alignment from -100 (bottom) to 100 (top).

Vertical Alignment Range

  • -100: Aligns the element to the bottom.

  • 0: Centers the element vertically.

  • 100: Aligns the element to the top.

Behavior for Groups

Position Options: Static and Relative

  1. Static:

    • Effect: The vertical alignment affects only the elements within the group.

    • Padding: Adjusts the positions of elements inside the group based on the vertical padding set previously.

    • Usage: Useful for internal alignment within a group.

  2. Relative:

    • Effect: The vertical alignment affects the entire group within the section.

    • Reference Zone: Moves the group within its own zone relative to the section.

    • Usage: Useful for positioning the group itself within the broader section layout.

Behavior for Blocks

Position Options: Static, Relative, Absolute

  1. Static:

    • Effect: The vertical alignment affects the element within its own padding.

    • Padding: Adjusts the position within its set vertical padding.

    • Usage: Useful for internal alignment within the block’s own space.

  2. Relative:

    • Effect: The vertical alignment affects the entire block within the section.

    • Reference Zone: Moves the block within its own zone relative to the section.

    • Usage: Useful for positioning the block itself within the broader section layout.

  3. Absolute:

    • Effect: The base position of the block is removed.

    • Reference Zones:

      • 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.

    • Usage: Useful for precise positioning of the block, independent of the normal flow, within the section or group.

Steps to Adjust Vertical Alignment

  1. Select the Block/Group:

    • Open your Shopify theme editor.

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

  2. Locate the Vertical Alignment Setting:

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

  3. Adjust Vertical Alignment:

    • Use the range selector to set the vertical alignment between -100 (bottom) and 100 (top).

Ensuring the Right Vertical Alignment Application

  1. Preview Changes:

    • After adjusting the vertical alignment, preview your store to see how the changes look.

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

  2. Check Consistency:

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

  3. Test Across Devices:

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

Summary

By using the "Vertical Alignment" setting in AppSections, you can control the vertical positioning 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. Adjusting the alignment helps create better internal spacing and improves the overall design consistency.

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

Last updated