Direction

How to Adjust Direction in AppSections Groups

The "Direction" setting in AppSections Groups allows you to control the flexbox direction of child blocks within a group. This setting provides flexibility in organizing the layout of blocks inside a group, determining the flow and alignment of the child elements. Here is how you can adjust the direction in a flex environment:

Direction

Purpose: This setting allows you to define the direction in which child blocks are arranged within a group using flexbox. Usage: Select from four options to set the desired flex direction.

Direction Options

1. Row: Arranges child blocks in a horizontal row, from left to right.

2. Row Reverse: Arranges child blocks in a horizontal row, but in reverse order, from right to left.

3. Column: Arranges child blocks in a vertical column, from top to bottom.

4. Column Reverse: Arranges child blocks in a vertical column, but in reverse order, from bottom to top.

Explanation of Direction in a Group

1. Row:

   • Behavior: Child blocks are laid out in a horizontal line, starting from the left and moving to the right.

   • Use Case: Useful for creating horizontal menus, rows of images, or any layout that requires a side-by-side arrangement of elements.

2. Row Reverse:

   • Behavior: Child blocks are laid out in a horizontal line, starting from the right and moving to the left.

   • Use Case: Useful for creating horizontal layouts where the order needs to be reversed, such as right-to-left reading languages or special design requirements.

3. Column:

   • Behavior: Child blocks are laid out in a vertical line, starting from the top and moving to the bottom.

   • Use Case: Useful for creating vertical menus, lists, or any layout that requires a top-to-bottom arrangement of elements.

4. Column Reverse:

   • Behavior: Child blocks are laid out in a vertical line, starting from the bottom and moving to the top.

   • Use Case: Useful for creating vertical layouts where the order needs to be reversed, such as special design requirements or bottom-up arrangements.

Steps to Adjust Direction

1. Select the Group:

   • Open your Shopify theme editor.

   • Navigate to the specific group where you want to adjust the flex direction.

2. Locate the Direction Setting:

   • In the settings for the group, find the Direction option.

3. Select Flex Direction Option:

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

     • Row: Arranges child blocks from left to right.

     • Row Reverse: Arranges child blocks from right to left.

     • Column: Arranges child blocks from top to bottom.

     • Column Reverse: Arranges child blocks from bottom to top.

Ensuring the Right Direction Application

1. Preview Changes:

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

   • Check the group to ensure the flex direction setting is applied correctly and enhances the layout.

2. Check Consistency:

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

3. Test Across Devices:

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

Summary

By using the "Direction" setting in AppSections, you can control the flexbox arrangement of child blocks within groups 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 flex direction helps create a more structured and visually appealing design.

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