Skip to product information
【Horizon】カラムごとの幅比率を指定できる横並びレイアウトブロックの設定例
Published:2026.04.19

[Horizon] Add a column layout block

This TIPS shows how to add a custom column layout block (blocks/column.liquid and snippets/column.liquid) to the Horizon theme that lets you set individual column width ratios. The standard group block doesn't support width ratios directly, but with this block you can choose from 13 presets or enter custom ratios in the theme editor. No changes to existing files required.

Column layout block in the Horizon theme editor

Preset layouts

13 presets covering 1 to 6 columns, plus custom ratio input. Desktop and mobile layouts are configured independently, so you can easily switch from side-by-side on desktop to stacked on mobile.

Column layout presets — 13 patterns

Horizontal Layout — Variation Examples (6 patterns)

Block implementation

blocks/column.liquid defines the schema (column ratio presets, gap, appearance settings) and collects child blocks, while snippets/column.liquid generates the grid-template-columns value for CSS Grid. Styles are scoped, so multiple instances on the same page don't interfere with each other.

blocks/column.liquid — schema definition (column_pattern_desktop select, etc.)

snippets/column.liquid — CSS Grid generation logic (converts presets to fr units)

After making a purchase (all items are ¥0), you will be able to view the sample code.

View store information

[Horizon] Add a column layout block

If you have already made a purchase, please login here.

Sample Codes

Test Theme :Horizon 3.4.0

blocks/column.liquid(新規作成)

すべてのShopify TIPS

View all