Mastering Your Shopify Horizon Theme: Centering Product Collections with Community-Tested CSS

Hey fellow store owners! As a Shopify migration expert and someone who spends a lot of time diving into the community forums, I often see common design challenges that pop up. One that recently caught my eye, and frankly, is a super common pain point, is getting your product collections to sit perfectly centered on your homepage, especially with specific themes like Horizon.

It sounds simple, right? Just center it! But as AdamT06 discovered in a recent community thread, it can be a bit trickier than it seems, especially when you factor in different screen sizes and mobile responsiveness. Let's dig into what Adam faced and the brilliant solutions the community cooked up.

The Centering Conundrum: Adam's Horizon Theme Challenge

Adam, like many of you, wanted his product collection on his homepage to be perfectly centered. He'd tried a bunch of CSS code in his base.css file, but nothing seemed to stick. His website, www.TruthTrust.dk, was showing collections that were a bit off-kilter. Here's a peek at what he was dealing with:

The real kicker came when he tried a suggested code snippet and found it actually messed up his mobile view, duplicating items and making the grid smaller. This is a classic example of how a solution for one view can break another, highlighting the importance of responsive design!

Before the fix:

After the problematic code:

Community Solutions: Two Approaches to Centering

Thankfully, the Shopify community is full of helpful folks! Two main approaches surfaced:

1. The .resource-list--grid Approach (from devcoders and Moeed)

This was the most discussed solution in the thread. It targets a specific class, .resource-list--grid, which is often used for collection displays in themes like Horizon. The key here is using display: flex and justify-content: center to align items horizontally.

devcoders' Comprehensive Code:

This snippet aims to center the grid and manage item widths for a clean look on various screen sizes. Adam initially had trouble with this on mobile, but devcoders insisted it was working on their end, suggesting a caching issue or local browser quirk. It's a good starting point because it includes basic responsiveness.

.resource-list--grid {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: center !important;
  gap: 24px;
}

.resource-list--grid .resource-list__item {
  width: calc(33.33% - 24px);
}

.resource-list--grid .resource-list__item:only-child {
  width: 33%;
}

.resource-list--grid .resource-list__item:nth-last-child(2):first-child,
.resource-list--grid .resource-list__item:nth-last-child(2):first-child + .resource-list__item {
  width: 33%;
}

Here's a visual of this code in action, showing it centered:

Moeed's Desktop-Specific Variation:

Moeed offered a slightly different take, specifically scoping his code to work only on desktop screens (min-width: 768px). This is a smart move if you find that the general solution breaks your mobile layout or if your theme handles mobile collections well on its own and you only need desktop centering.

@media screen and (min-width: 768px) {
.resource-list--grid {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: center !important;
  gap: 24px;
}

.resource-list--grid .resource-list__item {
  width: calc(33.33% - 24px);
}

.resource-list--grid .resource-list__item:only-child {
  width: 33%;
}

.resource-list--grid .resource-list__item:nth-last-child(2):first-child,
.resource-list--grid .resource-list__item:nth-last-child(2):first-child + .resource-list__item {
  width: 33%;
}
}

2. The .box-grid Approach (from topnewyork)

An earlier suggestion in the thread targeted different classes: .box-grid and .box-grid .product-card. This code is also well-structured with flexbox and includes a media query for mobile (max-width: 749px) to adjust item widths. If the .resource-list--grid solutions don't quite hit the mark for your specific Horizon setup, this is definitely worth a try.

.box-grid {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: center !important; 
    align-items: stretch !important;
    gap: 30px !important;
    margin: 40px auto 0 auto !important;
    width: 100% !important;
    max-width: 1200px !important;
    padding: 0 !important;
}

.box-grid .product-card {
    display: flex !important;
    flex-direction: column !important;
    flex: 0 0 calc(25% - 23px) !important;
    max-width: calc(25% - 23px) !important;
    min-width: 250px !important; 
    margin: 0 !important;
    box-sizing: border-box !important;
}

@media screen and (max-width: 749px) {
    .box-grid .product-card {
        flex: 0 0 calc(50% - 15px) !important; 
        max-width: calc(50% - 15px) !important;
    }
}

How to Implement These CSS Fixes in Your Shopify Store

Before you jump in, remember this golden rule: always duplicate your theme before making any code changes! This way, if something goes wrong, you can easily revert to your previous version without affecting your live store.

Here's a step-by-step guide:

1. Backup Your Theme:
   • From your Shopify Admin, go to Online Store > Themes.
   • Find your current theme (e.g., Horizon), click Actions > Duplicate.
2. Access Your Theme Code:
   • Still under Online Store > Themes, click Actions > Edit code for your *live* theme (or the duplicated one if you prefer to test there first).
3. Locate base.css or a similar CSS file:
   • In the left-hand sidebar, navigate to the Assets folder.
   • Look for a file named base.css, theme.css, or sometimes custom.css or styles.css. base.css is a common place for general styles.
4. Paste the Code:
   • Scroll to the very bottom of the chosen CSS file.
   • Paste one of the provided code snippets there. I'd suggest starting with devcoders' comprehensive code first, as it aims for both desktop and mobile. If you encounter issues, then try Moeed's desktop-only version, or topnewyork's if neither works.
5. Save Your Changes:
   • Click the Save button in the top right corner of the code editor.
6. Test Thoroughly:
   • Open your store in a new browser tab.
   • Clear your browser cache (this is crucial, as Adam's experience showed!). You might need to do a hard refresh (Ctrl+F5 or Cmd+Shift+R).
   • Check your homepage collection on various devices: desktop, tablet, and especially your mobile phone. Resize your browser window on desktop to simulate different screen sizes.

A Few Expert Insights

• !important Flag: You'll notice !important sprinkled throughout these codes. This CSS declaration forces the style to take precedence over other styles, which is often necessary when overriding existing theme styles. Use it judiciously, as too many can make future debugging harder.
• CSS Selectors: Notice how different solutions target different classes (.box-grid vs. .resource-list--grid). Themes can name their elements differently. If one code doesn't work, inspecting your page elements with your browser's developer tools can help you find the correct class name for your collection grid.
• Caching is Key: Adam's confusion about the code not working on his phone, while others saw it working, is a perfect example of browser caching. Always clear your cache when testing CSS changes!

Getting your store's layout just right can make a huge difference in how professional and trustworthy your brand appears. These small CSS tweaks, though they might seem daunting at first, are powerful ways to fine-tune your Shopify store's aesthetics. Don't hesitate to experiment (with a duplicated theme, of course!) and leverage the incredible insights from the Shopify community. Happy customizing!