Distribute

How to Adjust Distribution in AppSections Groups

The "Distribute" setting in AppSections Groups allows you to control the distribution of child blocks within a group using flexbox properties. This setting provides flexibility in organizing the layout of blocks inside a group by defining how space is distributed among the child elements. Here is how you can adjust the distribution:

Distribute

Purpose: This setting allows you to define the distribution of child blocks within a group using flexbox properties.

Usage: Select from six options to set the desired distribution.

Distribution Options

1. Center: Centers the child blocks along the main axis.

2. Start: Aligns the child blocks at the start of the main axis.

3. End: Aligns the child blocks at the end of the main axis.

4. Space Between: Distributes the child blocks with equal space between them.

5. Space Around: Distributes the child blocks with equal space around them.

6. Space Evenly: Distributes the child blocks with equal space between and around them.

Explanation of Distribution in a Flex Environment

1. Center:

   • Behavior: Child blocks are centered along the main axis (either horizontally or vertically, depending on the flex direction).

   • Use Case: Useful for centering elements within a group, such as a navigation bar or a row of images.

2. Start:

   • Behavior: Child blocks are aligned at the start of the main axis.

   • Use Case: Useful for aligning elements to the start of the group, such as a left-aligned menu or a list.

3. End:

   • Behavior: Child blocks are aligned at the end of the main axis.

   • Use Case: Useful for aligning elements to the end of the group, such as a right-aligned menu or a list.

4. Space Between:

   • Behavior: Child blocks are distributed with equal space between them, but no space at the start or end.

   • Use Case: Useful for evenly distributing elements with no extra space at the edges, such as buttons in a toolbar.

5. Space Around:

   • Behavior: Child blocks are distributed with equal space around them, resulting in half-sized spaces on the outer edges.

   • Use Case: Useful for creating evenly spaced elements with some space at the edges, such as icons in a footer.

6. Space Evenly:

   • Behavior: Child blocks are distributed with equal space between and around them.

   • Use Case: Useful for creating evenly spaced elements with equal space at the edges and between the elements, such as a grid of images.

Steps to Adjust Distribution

1. Select the Group:

   • Open your Shopify theme editor.

   • Navigate to the specific group where you want to adjust the distribution.

2. Locate the Distribute Setting:

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

3. Select Distribution Option:

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

     • Center: Centers the child blocks.

     • Start: Aligns the child blocks at the start.

     • End: Aligns the child blocks at the end.

     • Space Between: Distributes the child blocks with equal space between them.

     • Space Around: Distributes the child blocks with equal space around them.

     • Space Evenly: Distributes the child blocks with equal space between and around them.

Ensuring the Right Distribution Application

1. Preview Changes:

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

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

2. Check Consistency:

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

3. Test Across Devices:

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

Summary

By using the "Distribute" setting in AppSections, you can control the distribution 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 distribution helps create a more structured and visually appealing design.

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