hi I am wanting my products in each collection to appear exactly like this, with this spacing in between and on the sides.
this is the example:
please help and thankyou
My website is studio-seductress.com and password: yesyesyes
You can try to follow this step
Step 1: Go to Edit code
Step 2: Find file base.css and add this code at the end of the file
div#shopify-section-template--24119740629282__product-grid {
padding: 0 50px !important;
}
Result:
Best,
Liz
Hi @studioseductres ,
May I suggest to update code these steps:
- Go to Store Online-> theme → edit code
- Assets/base.css
- Add code below to end of file
.collection.page-width {
max-width: var(--page-width);
margin: 0 auto;
padding-left: 3rem;
padding-right: 3rem;
--grid-desktop-horizontal-spacing: 20px;
--grid-desktop-vertical-spacing: 20px;
}
.collection.page-width #product-grid {
gap: 20px!important;
}
.collection.page-width #product-grid .card__inner {
width: 100%!important;
}
@media screen and (min-width: 750px) {
.collection.page-width {
padding-left: 3.2rem;
padding-right: 3.2rem;
}
}
@media screen and (min-width: 990px) {
.collection.page-width {
padding-left: 5rem;
padding-right: 5rem;
}
}
You can do that by adding this code to base.css file
@media (min-width: 750px) {
.collection.page-width {
padding: 0 5rem !important;
}
}
You can try to follow this step
Step 1: Go to Edit code
Step 2: Find file base.css and add this code at the end of the file
@media (max-width: 768px) {
div#shopify-section-template--24119740629282__product-grid {
padding-left: 15px !important;
}
ul#product-grid {
column-gap: 5px !important;
}
}
Result:
Best,
Liz
Unfortunately it did not change
Can you show an image of where the code is added?
his is mostly a spacing and layout issue, not anything unique to products themselves.
In Shopify themes, the way products look in a collection comes from the collection grid wrapper (the container) and the individual product cards. To match that example, you usually need to adjust three things: the max width of the grid, the gap between product cards, and the padding on the left and right sides.
You can do this with CSS by targeting the collection grid specifically, something along these lines:
.collection .product-grid {
max-width: 1200px; /* controls how wide the grid feels */
margin: 0 auto;
gap: 48px; /* space between products */
}
.collection .card-wrapper {
padding: 0 12px; /* side spacing inside each product card */
}
The exact class names can vary by theme, so using your browser’s inspector to click a product card and see the grid wrapper is the fastest way to dial it in precisely.
I also made an app called Easy Edits that’s built for this kind of change. You can click directly on the collection section, adjust spacing visually, or just tell the AI something like “match the spacing from this example,” and it applies the changes only to that collection layout.
Link: https://apps.shopify.com/easy-edits
Happy to help you pinpoint the exact selectors if you want to go the manual route — spacing tweaks like this are very doable once you’re targeting the right container.