How to add product columns to any Shopify theme

Introduction

Create clean, structured product layouts with the Flexi Product Columns section — a flexible way to display products in columns anywhere across your Shopify store. Product columns are ideal for showcasing featured items, comparisons, bundles, or curated selections without relying on full collection pages.

In the video above, you’ll learn how to add product columns to any Shopify theme using Flexi’s intuitive section and block system. Discover how to control column counts, spacing, and responsive behavior to create layouts that look great on all devices.

Perfect for homepages, landing pages, and promotional content, the Flexi Product Columns section integrates seamlessly with any Shopify theme. Whether you’re highlighting bestsellers, new arrivals, or complementary products, this layout gives you full design control.

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 sections, including Product Columns.

Install Section

Open the Flexi app and navigate to the sections library. Search for "Product Columns" and click "Add to Theme" to install it instantly.

Add to Your Store

Go to your Shopify admin → Online Store → Themes → Customize. Navigate to the page where you want to display products, click "Add section", and select "Product Columns" from the available sections.

Set Section Width

In the section settings, choose how the product columns should be displayed:

• Full width: Create an edge-to-edge product layout
• Fixed width: Set a custom maximum width (320px – 1440px)
• Theme width: Match your theme’s default content container

Add Content

Click "Add block" to select products for each column. Each block can reference a product and display key elements such as images, titles, pricing, and call-to-action buttons.

You can add multiple products per row, reorder columns easily, and curate layouts that fit your merchandising goals.

Customize & Style

Customize your product columns using Flexi’s built-in settings:

• Control the number of columns on desktop and mobile
• Adjust spacing, alignment, and column gaps
• Choose which product elements are visible
• Match typography, buttons, and colors to your brand

Works Seamlessly with Dawn & Horizon

Flexi sections are built for Shopify’s modern theme architecture, which means the Product Columns section works seamlessly with Dawn, Horizon, and all Online Store 2.0 themes.

Dawn Compatibility

Dawn is Shopify’s reference theme, and the Flexi Product Columns section follows the same responsive grid and spacing conventions used throughout Dawn.

This ensures product cards inherit your theme’s typography, button styles, and pricing layout by default, while still giving you flexibility to customize column structure.

Horizon & Modern Framework Support

Horizon represents Shopify’s next-generation theme framework. The Product Columns section integrates cleanly with Horizon-based themes without overriding global styles or introducing JavaScript conflicts.

Because the section is self-contained and theme-safe, you can confidently use it in modern and highly customized storefronts.

Theme-Safe by Design

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

• Add or remove product columns without editing theme code
• Preview layout changes safely before publishing
• Reuse the same product column layout across pages and themes
• Switch themes without rebuilding product displays

Whether you're using Dawn, Horizon, or a fully custom Online Store 2.0 theme, Flexi’s Product Columns section adapts automatically — helping you present products clearly, consistently, and exactly where they matter most.