Grid size settings

The grid size settings are essential for configuring the overall look and feel of your shop by managing how content is displayed in a grid format. These settings are applied globally but can be customized at the section or block level to ensure a responsive and visually appealing layout on both desktop and mobile devices.

The default grid size setting allows you to choose between three or four columns for larger screens, impacting the presentation and accessibility of content. For mobile devices, the default grid size - mobile setting offers one or two-column options, ensuring content is easily viewable and navigable on smaller screens. Additionally, the enable grid size interface setting allows users to interact with and adjust the grid size settings directly, enhancing the user experience by providing more control over content display.

Usage examples include adjusting the grid size to four columns for more content on larger screens, opting for a one-column layout on mobile for a cleaner presentation, and enabling the grid size interface for dynamic layout adjustments. These settings provide a flexible foundation for creating a visually appealing and user-friendly shop layout.

Overview #

The grid size settings are a core part of the theme's configuration, designed to control the overall look and feel of the shop by managing how content is displayed in a grid format. These settings are applied globally across the site but can be overridden at the section or block level. They ensure that the layout is responsive and visually appealing on both desktop and mobile devices.

Key components and functionality #

Default grid size

This setting allows you to choose the default grid size for displaying content on larger screens. It provides options to configure how many columns are used in the grid layout, which can impact the overall presentation and accessibility of content.

  • Options:
    1. Three columns
    2. Four columns
  • Default: Three columns

Default grid size - Mobile

This setting is specifically tailored for mobile devices, determining how content is displayed in a grid format on smaller screens. It allows for adjustments that ensure content is easily viewable and navigable on mobile devices.

  • Options:
    1. One column
    2. Two columns
  • Default: Two columns

Enable grid size interface

This setting provides an option to enable or disable the grid size interface, allowing users to interact with and adjust the grid size settings directly. This can enhance the user experience by offering more control over how content is displayed.

  • Default: Enabled

Usage examples #

  1. Adjusting grid size for desktop:

    • You might consider setting the grid size to four columns to display more content side by side on larger screens. This can be useful for showcasing a wide range of products or images in a compact space.
  2. Optimizing mobile display:

    • For a cleaner and more focused presentation on mobile devices, you might consider a one-column layout. This ensures that each piece of content is given ample space and is easy to view on smaller screens.
  3. Interactive grid size adjustment:

    • By enabling the grid size interface, users can dynamically adjust the grid layout according to their preferences, enhancing the browsing experience by allowing more personalized control over content display.