Column settings

Overview #

The settings outlined here define core theme configurations that control the overall look and feel of an online shop. These settings are applied globally across the site but can be overridden at the section or block level. They primarily focus on the layout and structure of the shop, ensuring a consistent and customizable user experience across different devices.

Key components and functionality #

Column settings

Column settings allow you to define the number of columns displayed on different devices, ensuring optimal layout and readability. This flexibility is crucial for adapting the shop's appearance to various screen sizes, enhancing user experience.

Desktop column count

This setting controls the number of columns displayed on desktop devices. You can choose between 1 and 8 columns, with the default set to 4. Adjusting this setting can help in organizing content effectively on larger screens.

Tablet column count

For tablet devices, this setting determines the number of columns. The range is from 0 to 8, with a default of 0. If set to 0, the tablet will use the desktop column setting. This flexibility allows for a seamless transition between desktop and tablet views.

Mobile column count

This setting specifies the number of columns for mobile devices, ranging from 1 to 4, with a default of 1. It ensures that content remains accessible and easy to navigate on smaller screens. Users might consider different settings for mobile to accommodate unique layout needs, such as varying padding or aspect ratios.

Usage examples #

1. Desktop Layout Optimization: You might consider setting the desktop column count to 6 or 8 if your shop has a lot of content that needs to be displayed simultaneously. This allows more items to be visible at once, reducing the need for scrolling.

2. Tablet Adaptability: By setting the tablet column count to 3, you can ensure that your shop's layout remains organized and visually appealing on medium-sized screens, providing a better user experience than simply mirroring the desktop layout.

3. Mobile Accessibility: Keeping the mobile column count at 1 or 2 ensures that content is easy to read and interact with on smaller screens, preventing overcrowding and enhancing usability.

These settings are crucial for maintaining a responsive design that adapts to various screen sizes, ensuring a consistent and user-friendly experience across all devices.