[Horizon] How to Fix the Number of Desktop Columns on Collection Pages

[Horizon] How to Fix the Number of Desktop Columns on Collection Pages

UI/UX Improvements

Applications

コレクション編集

View full details

A custom section implementation for fixing the number of PC columns on Horizon theme collection pages. Adds a "Grid Mode" setting to the theme editor, letting you switch between Horizon's default card-size-based auto layout and a fixed 1–8 column layout.

Collection page with PC columns fixed at 4

Theme editor showing grid mode and column count settings

How it works

Horizon's default grid uses repeat(auto-fill, minmax(165px, 1fr)) to determine column count automatically based on viewport width. This can conflict with your intended layout design.

This custom section overrides the CSS variable --product-grid-columns-desktop with repeat(N, 1fr) only when "Fixed columns" mode is selected. The selector is scoped to the section ID, so no other collections or sections are affected.

Implementation

1. Create the custom section file

Create a new file custom-main-collection-fixed-columns.liquid in your theme's sections/ folder. Copy the contents of the standard main-collection.liquid and add the following two pieces.

First, add a CSS variable override block immediately after </results-list>.

CSS override Liquid code block

Next, add the "Grid Mode" and "PC Columns" settings at the top of the settings array inside {% schema %}.

Schema settings with grid_mode and pc_columns added

2. Create the template JSON

Create a new file collection.fixed-columns.json in your theme's templates/ folder. Copy the standard collection.json and change the main section's "type" to "custom-main-collection-fixed-columns".

Template JSON with section type changed

3. Assign the template to a collection

In the Shopify admin, go to Products → Collections, open the target collection, and select fixed-columns from the "Theme template" dropdown in the right sidebar.

Assigning the fixed-columns template to a collection

Once assigned, open the theme editor for that collection and switch "Grid Mode" to "Fixed columns," then set your desired column count with the "PC columns" slider.

Notes

When "Grid Mode: Size-based" is selected, the default auto-fill behavior is preserved
The CSS variable override applies only to desktop (750px and above). Mobile column count follows the standard "Mobile card size" setting
If using the grid zoom-out density toggle, the fixed column count is disabled while zoom-out is active

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

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

Sample Codes

Test Theme :Horizon 3.5.1

sections/custom-main-collection-fixed-columns.liquid（新規作成）

{% javascript %} const url = new URL(window.location.href); if (url.hash) { document.addEventListener( 'DOMContentLoaded', () => { const card = document.getElementById(url.hash.slice(1)); if (card) { card.scrollIntoView({ behavior: 'instant' }); } }, { once: true }...