[Horizon] A custom block for freely setting column width ratios

When building out pages with the Horizon theme, you'll inevitably hit moments where you want "a sidebar layout here" or "three columns of products side by side."

Horizon has a group block that supports side-by-side layouts, but there's no way to directly specify the width ratio between columns. If you want "main content on the left, sidebar on the right (2:1)," you have to work around it indirectly — and getting the proportions right is a real struggle.

This article introduces a custom column layout block that solves this. Just pick a preset in the theme editor for flexible column layouts, and no changes to existing files are needed.

The limits of the group block

Horizon's group block is a general-purpose container that can arrange child blocks side by side or stacked. But when you try to use it as a column layout, you run into these walls:

• No direct width ratio control — You can't specify ratios like "left 2 : right 1." You have to approximate by adjusting individual child block widths.
• Hard to control desktop/mobile independently — You can't directly say "3 columns on desktop, 1 column stacked on mobile."
• Limited gap control — There's no built-in way to set horizontal and vertical gaps separately in px units.

Some people turn to external page builder apps like PageFly to work around these limits. But adding apps increases JavaScript load (which affects page speed), and it's easy to lose visual consistency with the theme's color scheme and design system.

What the column layout block can do

The column layout block introduced here is a theme-native custom block built on CSS Grid. You operate it entirely through the theme editor with no code, and here's what it supports:

14 presets + custom free input

Common column patterns are available in a dropdown in the theme editor — one click to apply.

When no preset covers your ratio, select "Custom" and type space-separated numbers. They're converted directly to CSS Grid fr units.

Independent desktop and mobile control

Layout patterns can be set separately for desktop and mobile. For example:

• Desktop: 3 equal columns → Mobile: 1 column (stacked)
• Desktop: 2:1 sidebar → Mobile: 1 column (sidebar wraps below)
• Desktop: 4 columns → Mobile: 2 equal columns

Column gaps can also be adjusted in px for desktop and mobile independently.

Use existing Horizon blocks as children

Any existing Horizon block (text, image, group, button, etc.) can be placed inside the columns as child blocks. No new workflows to learn — just drag and drop in the theme editor as usual.

Full appearance controls included

It comes with the same appearance settings as the group block:

• Color scheme (inherit from theme or set individually)
• Background image / video
• Overlay (solid / gradient)
• Border (width, opacity, radius)
• Padding (top, bottom, left, right independently)
• Vertical alignment (top / center / bottom / stretch)

Where it comes in handy

Any page where you want things side by side. Here are some common scenarios:

• LP hero section — Catchcopy + CTA on the left, product image on the right (2:1). Puts the text front and center.
• Brand story page — Long text on the left, mini photo grid on the right (3:1). Makes for a readable, editorial layout.
• Features / selling points — Icon + text sets in 3 equal columns (1:1:1). The classic three-up layout.
• Logo grid / partner showcase — 4–6 logos in a single row. Switch to 2 columns on mobile with one setting.
• Comparison content — Before/after or product comparisons in 2 equal columns (1:1).

All of these are achievable just by switching the dropdown in the theme editor — no code required.

Technical design highlights

Why CSS Grid?

Flexbox + nth-child is another approach, but it tends to create CSS specificity conflicts when changing column counts for mobile, leading to interference with other styles.

With CSS Grid, switching layouts is just a matter of changing the grid-template-columns value. Media query overrides are simple and predictable, with far fewer surprise CSS conflicts.

No changes to existing files

This block is built entirely from new files.

• blocks/column.liquid — block definition (schema + render call)
• snippets/column.liquid — rendering logic (CSS Grid generation)
• Translation key additions to locale files (en.default.schema.json, ja.schema.json)

None of Horizon's existing files are touched. This follows the "don't modify vendor files" principle covered in a previous article, meaning there are no conflicts when the theme updates. Even a large CSS refactor like v3.5.0 won't affect this custom block.

Two-tier design: presets + custom

The settings UI is structured so beginners can stay on presets without getting lost, while advanced users can enter custom values freely. The custom input field only appears when "Custom" is selected, thanks to visible_if — so the UI stays clean for everyday use.

Comparison with the group block

The group block isn't going anywhere — it remains the go-to for general containers. The column block is specialized for "when you need a clear column split," and the two are complementary.

How to install

Just add the following files to your theme.

1. Add blocks/column.liquid
2. Add snippets/column.liquid
3. Add translation keys to locale files (en.default.schema.json, ja.schema.json)

After adding the files and reloading the theme editor, "Column Layout" will appear in the block add menu inside custom sections.

The code files are available from STORE DOJO TIPS. → [Horizon] Add a column layout block with custom width ratios

Summary

Horizon's column layout challenges can be solved with a theme-native custom block — no external apps needed.

• 14 presets + custom free input for exactly the column ratio you want
• Independent layout control for desktop and mobile
• CSS Grid-based, lightweight, no performance overhead
• No existing file changes — update-safe
• Rides on Horizon's block architecture — just drop in the file and it's ready

If you've ever struggled to get the right column proportions with the group block, give this a try.

The code files (blocks/column.liquid and snippets/column.liquid) are available from STORE DOJO TIPS.
→ [Horizon] Add a column layout block with custom width ratios