Horizon — Controlling collection grid layout across desktop & mobile (Android + iOS)

[icmob]

What’s your question? What do you want to achieve?

I’m using the Horizon theme and need help controlling collection grid layouts — consistently across desktop, Android, and Apple iOS — for multiple collections now and as I scale. Three current use cases plus a scalable solution for future collections:

1. Flagship Collection (6 products): 3 Front Center (FC) + 3 Back Center (CTR). I want 2 rows of 3 — FC on row 1, CTR on row 2. Not all 6 in one continuous grid.

2. Everyday Collection (6 products): Same layout — 3 FC on row 1, 3 CTR on row 2.

3. Zodiac Collection (up to 36 products — 12 signs × 3 colors): Clean, scalable grid grouped by sign. Ideally consistent row structure as the collection grows to 36 products.

4. Future collections: I’ll be launching additional collections on an ongoing basis and need a reusable, maintainable layout solution I can apply each time without rebuilding from scratch.

How do I ensure grid layouts are consistent across desktop, Android, and Apple iOS? Is this controlled via theme settings, metafields, or custom code? Looking for the most scalable and maintainable solution.

(Optional) Store URL

ICMOB® | icmob.org

[tim_tairli]

Hard to suggest anything for password-protected store without a password.

Generally:

You can have separate templates for your collections and have a different set of settings for collection grid for each of them.
Product grid is controlled by the theme->section settings.

You can modify the layouts by adding code to “Custom CSS” or/and using “Custom liquid” sections/blocks.

Collection layout usually changes for narrower screens for better readability.

Share the password and some sketches to better illustrate your requirements.

[icmob]

Thank you for the response! To clarify what I’m still working through:

I need help with the specific layout — FC products on row 1, CTR on row 2 (2×3) — within the Horizon theme. I’m also looking for guidance on cross-device consistency (desktop, Android, iOS), a scalable approach for the Zodiac collection as it grows to 36 products, and a reusable template solution I can apply to future collections without rebuilding each time.

The store is password-protected during pre-launch — can you advise based on Horizon theme defaults and the requirements I described?

[tim_tairli]

So yes, you can assign different templates to these collections.

Or can even use Pages for your navigation instead of pointing your menu links to Collections.

On some of them you can use several “Featured collection” sections instead of the standard “Collection”.

And then you can change settings for those sections to either blend together or be different. Like this:

The benefit here is that you can mix and match without writing a line of custom code or CSS.