Layout settings

The layout settings are essential for defining the overall look and feel of your shop, applied globally but customizable at the section or block level. These settings ensure effective content display on both desktop and mobile devices, providing a cohesive and responsive design.

Key components include the desktop column count, allowing you to specify between 1 and 8 columns, with a default of 4, and the mobile column count, ranging from 1 to 4, with a default of 2. These settings help optimize content arrangement for different screen sizes.

The desktop layout and mobile layout settings offer options between a grid or slider format, enhancing visual appeal and usability. It's important to consider different settings for mobile to accommodate varying user experiences and screen sizes.

Usage examples include adjusting column counts for seasonal promotions or switching layouts for a new collection launch. These settings provide a robust framework for customizing your store's visual presentation, ensuring a cohesive and responsive design across all devices.

Overview #

The layout settings are a core part of the theme settings, controlling the overall look and feel of your shop. These settings are applied globally across the site but can be customized at the section or block level for more specific needs. They ensure that your content is displayed effectively on both desktop and mobile devices, providing a cohesive and responsive design.

Key components and functionality #

Desktop column count

This setting allows you to specify the number of columns displayed on desktop devices. You can choose a value between 1 and 8, with the default being 4. Adjusting this setting will impact how content is arranged on larger screens, providing flexibility in layout design.

Mobile column count

Similar to the desktop setting, this option lets you define the number of columns for mobile devices. The range is from 1 to 4, with a default of 2. This ensures that content is displayed optimally on smaller screens, enhancing the mobile user experience.

Desktop layout

This setting determines the layout style for desktop devices. You can choose between two options:

  1. Grid - Displays content in a grid format.
  2. Slider - Arranges content in a slideshow format.

Selecting the appropriate layout can enhance the visual appeal and usability of your site on desktop devices.

Mobile layout

For mobile devices, this setting allows you to choose between:

  1. Grid - Displays content in a grid format.
  2. Slider - Arranges content in a slideshow format.

Choosing the right layout for mobile can significantly improve navigation and user interaction on smaller screens. It's important to consider that mobile settings might need to differ from desktop settings to accommodate different user experiences and screen sizes.

Usage examples #

  1. Adjusting column count for seasonal promotions: You might consider increasing the desktop column count to showcase more products simultaneously during a holiday sale, while keeping the mobile column count lower for easy browsing.

  2. Switching layouts for a new collection launch: For a new product collection, you might consider using the slider layout on both desktop and mobile to create a dynamic and engaging presentation, drawing attention to each product individually.

These settings provide a robust framework for customizing the visual presentation of your online store, ensuring a cohesive and responsive design across all devices.