How do I Center product on homepage?

Shopify Discussion

Topic summary

A user needed to center a single product on their Shopify homepage, as it appeared left-aligned in the default grid layout.

Solution Provided:
Another community member shared CSS code to be added to the theme’s base.css or theme.css file:

  • Uses flexbox to center the product grid
  • Sets maximum width of 600px for the product item
  • Centers the item with auto margins

Outcome:
The CSS solution successfully resolved the centering issue. Multiple other users requested the store URL to provide alternative solutions, but the original poster confirmed the CSS fix worked before sharing their URL.

Status: Resolved

Summarized with AI on October 31. AI used: claude-sonnet-4-5-20250929.
1

forgetaldrin_0-1741187139345.png
forgetaldrin_0-1741187139345.png984×536 192 KB

I need to move it towards the middle because its a 1 product website.

2 Likes
2

Hey @forgetaldrin could you please share your store URL and Password (If applicable) so that I provide you solution code.

Thanks

3

Hello @forgetaldrin Go to Online Store > Themes > Edit Code >open assets > open base.css Or theme.css file

and add this code at the bottom of the file

.product-grid {
  display: flex;
  justify-content: center;
}

.product-grid .grid__item {
  max-width: 600px;
  width: 100%;
  margin: 0 auto;
}

Thank you :blush:

1 Like
4

Hi @forgetaldrin

Please, share your store URL. Thanks!

5

Hi @forgetaldrin Can you share store url?

6

Hey @forgetaldrin

Welcome to Shopify Community! Can you share your Store URL so I can have a look on it? Also, if you have password enabled then please share the password as well. Your cooperation would be greatly appreciated.

Best Regards,
Moeed

7

Thank you this worked for me :slightly_smiling_face:

1 Like
8

M glad that worked :blush: