How do I add a grid around my products like shown below. I’m using the Parallax theme
Topic summary
A user seeks help adding a grid border around products in their Parallax theme, similar to a reference image they provided.
Solution Provided:
A contributor shares custom CSS code to be added in the theme.liquid file below the <head> tag. The code successfully creates product grid borders.
Issues & Refinements:
- Initial implementation had excessive spacing and double borders between product cards
- Adjustments reduced borders but changed layout from 6 to 5 products per row
- Mobile responsiveness was lost
Technical Constraints Explained:
The helper clarifies that eliminating side gaps entirely isn’t feasible across all screen sizes—reducing gaps requires larger images, which decreases products per row. A compromise solution balances grid density with spacing.
Extended Implementation:
The user requests applying the same styling to other featured collections. The contributor provides updated code targeting multiple section classes:
.shopify-section--featured-collection > section > div.shopify-section--recommended-products > section > div
Minor structural differences required slight CSS selector adjustments for the product recommendations section.
Resolution:
All styling successfully applied across collection pages, collection lists, and product recommendations. The user expresses satisfaction with the comprehensive solution.
Hello @eufories
can you share store URL?
Hey @eufories ,
You can try this and see 
Go to your theme’s “Edit Code” Option, then in the search bar type “theme.liquid”
Below the tag “” tag paste the following. Screenshot attached for reference.
Screenshot is for reference only, the correct code to paste is the one shown above.
1 Like
It worked! But there are a few problems
The side gaps and the product card bottom padding/margin are too wide apart.
The border between product cards need to be at least 1px closer in order to prevent the double border showing
I tried that and it solved the border issue
But the 6 products per row ended up turning into 5 products per row as you can see in the image below
The gap between the product card and the page width is still there :/I tried to do some tinkering as well but tbh i dont know how to improve it
On mobile the collection list is no longer responsive since it give me this 
Hey @eufories ,
There’s actually no fixed gap there that I can remove with a single line of code because the space is filled by the number of product cards that can fit per row. To reduce the gap of the sides, I need to increase the image size. What happens when you increase the image size, that increases the card size, which means less cards can fit in a row. If you want 6 products per row, then I have to reduce the image size so that 6 cards can fit per row. Then the gap on the sides will increase. For me to completely remove the gap on the side, I have to increase the image sizes even further, which means it might reduce the products per row even further. If I reduce the image size to remove the gap then you might end up with more than 6 products per row. But ideally there’s no way to guarantee that there will no be a gap on every screen size that everybody is using. Maybe it will look good for you, but somebody else will see gaps.
To make it mobile responsive, you can replace the code with the following (Please delete the previous one):
oh okay, beside all this. is there anyway to implement the same changes to another featured collection? because when i tried adding the featured collection to another page, all the setting above did not apply to it
1 Like
Amazing, that worked perfectly 
If I need to assign this same code for other section like collection-list.liquid and product-recommendation.liquid.
I just need to change this?
.shopify-section–featured-collection > section > div >
Hey @eufories ,
That is not guaranteed. Their class structure could be different. You can try and see.
I tried it and it worked for collection-list but it did not work for product-recommendation
It’s .shopify-section–recommended-products > section > div >
hm that did not work either.
it stayed the same
Yeah I noticed. Small detail, but the structure is different
This should work
Yeah wow, such a small detail and it worked wonderfully. Thank you so much, you have helped me tremendously with this!