Grid size settings

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.