Layout settings

Helpful links

1. https://help.shopify.com/en/manual/online-store/themes

2. https://help.shopify.com/en/manual/online-store/themes/theme-structure

3. https://help.shopify.com/en/manual/online-store/themes/theme-structure/theme-settings

4. https://help.shopify.com/en/manual/online-store/themes/customizing-themes

5. https://help.shopify.com/en/manual/online-store/themes/features-list

6. https://help.shopify.com/en/manual/online-store/themes/unlicensed-themes

Reference videos

1. Online store — The official Shopify guide

Overview

The Layout settings group provides centralized control over how content is arranged across your storefront. These settings are essential for establishing consistency and professionalism, enabling you to define device-specific layouts for desktop, tablet, and mobile visitors. Adjusting these options ensures that your shop remains visually cohesive and easy to navigate, regardless of screen size.

⚠️ Important:Layout settings create the foundation for a seamless browsing experience on all devices, supporting a unified site structure without the need to repeat configurations for every section.

Layout settings

The following settings let you control the number of items displayed per row and select the overall organizational style—grid or slider—tailored for each device type. This framework allows you to present your products and content in the most user-friendly way, adapting to the browsing habits of your customers.

Desktop column count

This setting defines how many columns are shown in grid layouts on desktop screens. By adjusting the column count, you control content density and prominence for users with larger displays.

1. Minimum value is 1 column.

2. Maximum value is 12 columns.

3. Step value is 1.

4. Default value is 4 columns.

   • Higher column counts allow more items per row, making use of wider screens.

   • Lower column counts let each item stand out more, but require more vertical scrolling.

Tablet column count

This option manages the number of columns displayed on tablet devices. It supports both custom values and an automatic mode for enhanced flexibility.

1. Minimum value is 0 columns.

   1. Setting to 0 enables auto mode, allowing the tablet layout to inherit the value from the desktop setting for a consistent experience.

2. Maximum value is 8 columns.

3. Step value is 1.

4. Default value is 0 columns (auto mode).

   • Auto mode streamlines layout adjustments by linking tablet presentation to desktop defaults, keeping mid-sized device layouts visually consistent.

📝 Note: A tablet column count of 0 means the layout will follow your desktop column setting, making cross-device design easier to manage.

Mobile column count

This setting establishes the number of columns used in grid layouts on mobile devices. Optimizing this value ensures easy browsing and accessibility for users on small screens.

1. Minimum value is 1 column.

2. Maximum value is 4 columns.

3. Step value is 1.

4. Default value is 2 columns.

   • Lower column counts improve legibility and tap-target size, making items easier to select and view on mobile devices.

Desktop layout

Here, you select how content is displayed on desktop screens—either as a grid or a slider. This affects both structure and navigation for desktop users.

1. Grid – Displays items in a multi-column arrangement, giving a classic overview.

2. Slider – Arranges items in a horizontally scrolling, swipe-friendly carousel.

3. Default value is grid.

Tablet layout

This setting allows you to display content on tablets as a grid or a slider, ensuring the shop layout matches users’ expectations on mid-sized devices.

1. Grid – Uses the specified tablet column count; if set to 0, inherits the desktop value.

2. Slider – Displays content in a swipeable, horizontal slider.

3. Default value is grid.

Mobile layout

Choose between grid and slider for your mobile layout. This lets you deliver a mobile experience that is both readable and touch-friendly.

1. Grid – Organizes items based on your specified mobile column count for straightforward navigation.

2. Slider – Creates a horizontally scrollable, touch-optimized slider.

3. Default value is grid.

Usage notes

Customizing the Layout settings gives you the flexibility to adapt content presentation to real-world browsing contexts. Device-specific values allow distinct arrangements and asset choices, helping your storefront perform optimally on every screen size. Each setting functions independently, supporting targeted adjustments without losing overall consistency. Using a different number of columns, or a different layout mode, on desktop versus mobile is common practice—these distinctions ensure the best blend of visibility, usability, and brand fidelity for your visitors.

📝 Note: Device-specific settings in Layout settings help you balance adaptability with consistent branding. A tablet column count of 0 leverages your desktop configuration to simplify the design process. Always review adjustments on multiple devices to confirm layouts perform as intended.