center product collection

Store Design
, , , ,

Topic summary

Issue: The home page product collection grid is not centered. The requester shared screenshots and a site link for reference.

Proposed fixes (CSS-based, via Online Store > Themes > Edit code):

  • Add in base.css or theme.css: .grid { justify-content: center; }
  • Scope to collection pages: .collection .grid { justify-content: center; } (can be inserted before in theme.liquid inside a block).
  • Alternative spacing: .grid { justify-content: space-evenly; } to distribute items evenly.
  • Target specific grid instance: .grid:last-child { justify-content: center !important; } for finer control.
  • Optional visual change: body .card__inner.gradient { background: #f2f2f2 !important; } to adjust card background.

Notes: “justify-content” is a CSS Flexbox property that horizontally aligns items within a flex container. Several replies include step-by-step instructions and screenshots. Images are central to show the current vs. desired layout.

Current status: One responder reports the collection appears centered now and asked for clarification, but there’s no confirmation from the original poster. Resolution is unclear/possibly achieved, pending the requester’s feedback.

Summarized with AI on December 23. AI used: gpt-5.
2

Hello! @JoyDion Please follow these steps to add this CSS code:

  1. Go to your Online Store
  2. Click on “Themes”
  3. Select “Edit code”
  4. Open your CSS file. If you have a custom CSS file, open that instead.
  5. If you can’t find your custom CSS file, open “base.css”
  6. Add the following code at the end of the file.
.grid {
    justify-content: center;
}
body .card__inner.gradient {
    background: #f2f2f2 !important;
}

Rishihuptech_0-1722860752930.png
Rishihuptech_0-1722860752930.png1339×799 54.6 KB

If you need further assistance, please let me know. If you found my help useful, consider liking this message and marking it as the solution.
Thank you
k.K