How can I centre Product Grid and make it full width?

Store Design
, , , ,

Topic summary

Goal: center a Shopify product grid with a border and ideally make it edge-to-edge (full width).

What was shared:

  • A preview link and password were provided for inspection. Screenshots illustrate the current and desired look.
  • One reply gave steps to add code in theme.liquid (main layout file), but the actual code block appeared empty; a result screenshot was shown.

Proposed solutions (implemented via Edit code > theme.liquid, before ):

  • Center the grid using CSS:
    • .collection .grid { justify-content: center; }
  • For 4-column desktop grids, constrain each item to ~26% width to align and center:
    • .collection .grid–4-col-desktop .grid__item { width/max-width: calc(26% - var(–grid-desktop-horizontal-spacing)*3/4) !important; }

Open questions / latest update:

  • The author asked how to keep mobile as a 2-column grid instead of 4. No answer yet.

Status:

  • Centering guidance provided and partially addressed. The “bleed to edge” (true full-width) was not directly solved in the shared CSS. Mobile 2-column behavior remains unresolved.
Summarized with AI on December 22. AI used: gpt-5.
1

I have added a product grid with a border but it isn’t centered.

Ideally, i would like the grid to bleed out to the edge?

Is this possible?

Thanks!!

Screenshot 2024-08-07 at 11.55.13.png
Screenshot 2024-08-07 at 11.55.13.png2872×1286 272 KB

2

@visualess Hey, thanks for posting here.
can you please share the link to inspect it, thanks.

3

Hey @visualess

Follow these Steps:

  1. Go to Online Store

  2. Edit Code

  3. Find theme.liquid file

  4. Add the following code in the bottom of the file above tag

RESULT:

Moeed_0-1723028440987.png
Moeed_0-1723028440987.png1898×871 149 KB

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

4

password: 44444

5

Hello @visualess

You can add code by following these steps

  1. Go to Online Store → Theme → Edit code.

  2. Open your theme.liquid file

  3. Paste the below code before on theme.liquid

.collection .grid{ justify-content: center; } .collection .grid--4-col-desktop .grid__item{ width: calc(26% - var(--grid-desktop-horizontal-spacing)* 3 / 4) !important; max-width: calc(26% - var(--grid-desktop-horizontal-spacing)* 3 / 4) !important; }

niraj_patel_0-1723028675969.png
niraj_patel_0-1723028675969.png1356×530 148 KB

Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

6

@visualess put this in css code :

.collection .grid {
    justify-content: center;
}
7

Is there a way to make it so that the mobile version still stacks as a 2 product grid instead of 4?

8

Is there a way to make it so that the mobile version still stacks as a 2 product grid instead of 4?