Aligning collection grid to the center of page when there are less products than columns set

[Kairike]

I’m trying to achieve this on Shopify’s Dwell theme and I cannot make it happen. I’ve tried different code snippets shared in posts. Could anybody help? I wish to align collection grids to center of page when there are less products than columns set.

Thank you!

[tim_tairli]

If you can edit theme code, then there is a simple solution:

find this code (Dwell uses the same code as Horizon)

snippets/product-grid.liquid

and add this line after line 22:

  max-width: calc( ({{ product_card_size }} + {{  section.settings.columns_gap_horizontal }}px ) * {{ products.size  }}  );

Before / After:

Why this way?

Horizon family themes use display: grid; for product grids and auto-fill to set number of products per row depending on selected product card size.

One option is to switch from auto-fill to auto-fit but this will make cards grow too big.

Another option is to switch from grid to flex, but it looks complex’ish and would change the product grid behaviour significantly.

Unfortunately, product grid section do not allow adding “Custom Liquid” blocks, but we need to know the card size from section settings and number of products to display.

---

if my post is helpful, please like it ♡ and mark as a solution -- this will help others find it

[Kairike]

Thank you, tim_1! I tried this but it didn’t help. Did I add it correctly?

[Kairike]

Hi!

The theme is not published yet, but here’s a preview link if it helps: https://iw08fbdmzskgq36s-72883241202.shopifypreview.com

[tim_tairli]

Looks working as expected?

[Kairike]

I apologise, there’s been a misunderstanding. It’s not the collection page I’m talking about but featured collection sections on the front page.

[tim_tairli]

Ah, that’s a significant difference.
This section accepts “Custom liquid” block.
You can add this code:

{% if section.settings.columns > section.settings.collection.products_count %}
  <style>
    #shopify-section-{{ section.id }} .resource-list {
      display: flex;
      justify-content: center;
    }
    #shopify-section-{{ section.id }}  .resource-list__item {
      width: calc(100% / {{section.settings.columns}});
    }
  </style>
{% endif %}

Before/After:

[Kairike]

Thank you so much! That worked!

[Kairike]

I added the “@media only screen and (min-width: 749px)”, so it doesn’t affect the section on mobile.

{% if section.settings.columns > section.settings.collection.products_count %}
  <style>
@media only screen and (min-width: 749px) {
    #shopify-section-{{ section.id }} .resource-list {
      display: flex;
      justify-content: center;
    }
    #shopify-section-{{ section.id }}  .resource-list__item {
      width: calc(100% / {{section.settings.columns}});
    }
  }
  </style>
{% endif %}

[tim_tairli]

I actually had the @media while testing
Great it’s working for you!