Reduce the Side pading in Collection Page

Store Design
, , , ,

Topic summary

A user wants to reduce side padding on their Shopify collection page to make product images wider and extend closer to the page edges, similar to the Verrolli website’s layout.

Solution Provided:
Another user shared CSS code to achieve this effect:

  • Navigate to: Shopify Admin → Online Store → Theme → Customize → Theme Settings → Custom CSS
  • Add custom CSS targeting .page-width, .collection-list.grid, and list items
  • The code adjusts max-width, padding, gap, and width properties to reduce spacing

Key CSS Changes:

  • Removes max-width constraints and sets padding to 20px
  • Adjusts grid item width using calc(50% - 20px)
  • Sets 20px gap between items

The responder included a screenshot showing the expected result after applying the CSS modifications.

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

Hello,

I want to reduce the Side pading that i have on my collection list page , i want to do like verrolli Where the images are quite Wide and are nearly touches the extremety of their website , i want the same .Here is the Verolli Website :

https://www.vorelli.co.uk/collections/vorelli-shop-by-collection

Here is my website link to the collection page list :https://7968dc-f5.myshopify.com/collections

2

HI @Sohayl67

To complete your requests, please follow these steps:

  1. Go to Shopify Admin > Online Store > Theme > Customize > Theme Settings > Custom CSS https://prnt.sc/i8ljAMlHJUKl
  2. Paste the code provided into the Custom CSS section.
ul.collection-list.grid {
    gap: 20px !important;
}
.page-width:has(ul.collection-list.grid) {
    max-width: unset !important;
    padding: 0 20px !important;
}
ul.collection-list.grid > li {
    width: calc(50% - 20px);
}

Here is the result: https://prnt.sc/T4UNitF4ABXq

I hope this helps

Best,

Daisy