Download AppSectionsWebsite

Horizontal Alignment

How to Adjust Horizontal Alignment in AppSections

The "Horizontal Alignment" setting in AppSections allows you to control the horizontal positioning of blocks and groups within their containers. This setting provides flexibility in customizing the layout by adjusting the position of elements from -100 (left) to 100 (right). 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 horizontal alignment works:

Horizontal Alignment

Purpose: This setting allows you to position elements horizontally within their container or section. Usage: Use the range selector to set the desired horizontal alignment from -100 (left) to 100 (right).

Horizontal Alignment Range

  • -100: Aligns the element to the left.

  • 0: Centers the element horizontally.

  • 100: Aligns the element to the right.

Behavior for Groups

Position Options: Static and Relative

  1. Static:

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

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

    • Usage: Useful for internal alignment within a group.

  2. Relative:

    • Effect: The horizontal 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 horizontal alignment affects the element within its own padding.

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

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

  2. Relative:

    • Effect: The horizontal 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 Horizontal Alignment

  1. Select the Block/Group:

    • Open your Shopify theme editor.

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

  2. Locate the Horizontal Alignment Setting:

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

  3. Adjust Horizontal Alignment:

    • Use the range selector to set the horizontal alignment between -100 (left) and 100 (right).

Ensuring the Right Horizontal Alignment Application

  1. Preview Changes:

    • After adjusting the horizontal 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 horizontal 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 horizontal alignment setting on different devices to ensure it looks good and maintains functionality on all screen sizes.

Summary

By using the "Horizontal Alignment" setting in AppSections, you can control the horizontal 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