Remove padding between products in collection page

Store Design
, , , , , ,

Topic summary

Goal: remove all spacing between product images on a Shopify collection page so the grid is full-bleed, with product title/price overlaid at the bottom of each image, on both desktop and mobile. Theme: Stiletto.

Progress:

  • A helper provided a code edit to add in theme.liquid; the OP reported it “worked almost perfectly,” removing gaps between product tiles.
  • Remaining issue: outer margins persisted; the OP wanted images to touch the screen edges on desktop and mobile. Reference screenshots were provided (images central to understanding the target layout).

Latest update:

  • The theme vendor suggested adding CSS under the existing styles: .collection__main-area { padding: 0px !important; } to remove collection grid padding/margins and achieve full-width.

Technical notes:

  • theme.liquid is the main layout file for Shopify themes.
  • “Padding” is the internal spacing inside a container; setting it to 0 removes inner margins around the grid.

Outcome/Status:

  • The proposed CSS likely resolves the remaining edge margins. Final user confirmation isn’t posted; thread appears near resolution with a clear fix provided.
Summarized with AI on January 2. AI used: gpt-5.
1

Hello! I was wondering if it is possible to do something like in this photo:

Captura de pantalla 2024-03-16 a las 18.37.33.png
Captura de pantalla 2024-03-16 a las 18.37.33.png2044Ă—1176 253 KB

That is, remove the spaces between the products (the photos) on the collection page and make them occupy the entire screen.

In that case, the titles and prices of each product would have to be inside the photos at the bottom, and not outside and below.

(Both on the desktop and the mobile versions)

My theme is Stiletto and my website is https://winnerofficial.com/collections/ss-2024 The password is y21

2

Hi @martujv ,

You can try this code by following these steps:

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file theme.liquid

Step 3: Paste the below code at the bottom of the file → Save

Hope my solution works perfectly for you!

Best regards,

Oliver | PageFly

1 Like
3

Hi Oliver! Thanks for your help, it worked almost perfectly.

The only thing left is to make the images have no margins on the sides of the screen so that they take up the entire screen.

I attach a reference photo (the red rectangles are the areas that the images should occupy):

On desktop:

A3ECA778-9711-4FEB-BB61-A8886BF80A93.JPEG
A3ECA778-9711-4FEB-BB61-A8886BF80A93.JPEG2880Ă—1552 566 KB

On the phone:

E3524408-1C74-4C86-B290-3FF8717FAFCA.JPEG
E3524408-1C74-4C86-B290-3FF8717FAFCA.JPEG1170Ă—2324 162 KB

Thank you!

4

Hi @martujv ,

Crystal here from Fluorescent!

While generally code customizations like this are not supported, I was able to find a quick solution that I’m happy to pass along. If you add the following code underneath the code you added above, in between the tags, it should remove the margins on the collection page product grid for you.

.collection__main-area {
  padding: 0px !important;
}

I hope that helps, and if you need anything else please reach out to us in our Help Centre.

Crystal C
Customer Support & Quality Assurance Specialist, Fluorescent.co