How to add / adjust columns in any Shopify theme

How to add / adjust columns in any Shopify theme

Introduction

Control your layout with confidence using Flexi’s column-based sections — a flexible system that lets you add, remove, and adjust columns across your Shopify theme without custom code. Whether you're building feature grids, content layouts, or structured landing pages, column control is essential for clean, responsive design.

In the video above, you’ll learn how to add and adjust columns in any Shopify theme using Flexi’s intuitive section and block settings. You’ll see how to control column counts, spacing, and responsive behavior directly inside the Shopify theme editor.

Perfect for homepages, product pages, and custom landing pages, Flexi’s column system works seamlessly with any Shopify theme. From simple two-column layouts to more advanced multi-column designs, you can create layouts that adapt beautifully across devices.

Setup Instructions

Install the App

Visit the Shopify App Store and install Flexi Slider Sections. Start your free trial to unlock access to all Flexi layout-based sections and blocks.

Install Section

Open the Flexi app and navigate to the sections library. Choose a section that supports column layouts (such as Cards, Features, or Content Grids) and click "Add to Theme" to install it instantly.

Add to Your Store

Go to your Shopify admin → Online Store → Themes → Customize. Click "Add section" and select the Flexi section you want to use for your column layout.

Set Section Width

In the section settings, choose your preferred container width:

  • Full width: Stretch columns edge-to-edge across the page
  • Fixed width: Set a custom max width (320px – 1440px)
  • Theme width: Match your theme’s default content container

Add Content

Click "Add block" to populate your columns. Each block represents a column or column item depending on the section you’re using.

You can add as many blocks as needed and reorder them using Shopify’s drag-and-drop editor, giving you full control over column structure without touching code.

Customize & Style

Adjust your column layout using Flexi’s built-in settings:

  • Control the number of columns on desktop and mobile
  • Adjust column gaps, padding, and alignment
  • Set stacking behavior for smaller screens
  • Customize typography, backgrounds, and colors per section

Works Seamlessly with Dawn & Horizon

Flexi sections are built for Shopify’s modern theme architecture, which means column layouts work seamlessly with Dawn, Horizon, and all Online Store 2.0 themes.

Dawn Compatibility

Dawn is Shopify’s reference theme, and Flexi’s column system follows the same responsive grid and spacing principles used throughout Dawn.

This ensures your columns inherit your theme’s typography, buttons, and spacing by default, while still allowing precise layout control through Flexi’s settings.

Horizon & Modern Framework Support

Horizon introduces a more modular, future-facing approach to Shopify themes. Flexi’s column-based sections integrate cleanly with Horizon-based themes without overriding global styles or introducing layout conflicts.

Because Flexi sections are self-contained and theme-safe, you can confidently adjust column layouts even in highly customized Horizon storefronts.

Theme-Safe by Design

Every Flexi section is scoped, isolated, and performance-optimized. This means you can:

  • Add or adjust columns without editing theme code
  • Preview layout changes safely before publishing
  • Reuse the same column layouts across multiple themes
  • Switch themes without rebuilding your page structure

Whether you're using Dawn, Horizon, or a custom Online Store 2.0 theme, Flexi’s column system adapts automatically — giving you full layout control while maintaining performance and consistency.

View all tutorials