Add Collection Grid Borders impulse theme

[Luxurymrkt]

Hi,

im looking to add collection grids lines/borders same as picture below.

any help would be appreciated. My site is https://luxurymrkt.com/collections/womenswear

[valiermedia]

Hi there!

Adding this CSS to the bottom of theme.css in your active theme should produce the results you are looking for:

.grid-product {
	border: 1px solid #f8f8f8;
	margin-bottom: 0;
	padding: 30px;
}

.collection-grid__wrapper .grid {
	border: 1px solid #f8f8f8;
}

You can see a screenshot of the results below:

If you want thicker borders or a different shade of grey for the border, just adjust the border widths and hex code respectively

[Luxurymrkt]

Hi it looks great. Only Thing is it add borders on all my featured collections and sliders

I really just want the borders on the collection page. This is home page slider

[valiermedia]

Ok!

In that case, try the following:

.template-collection .grid-product {
	border: 1px solid #f8f8f8;
	margin-bottom: 0;
	padding: 30px;
}

.template-collection .collection-grid__wrapper .grid {
	border: 1px solid #f8f8f8;
}

[Luxurymrkt]

That worked but it changed the size of the pictures and font layout

please see before and after

before

and after

[Luxurymrkt]

Might of fixed it I changed the padding to 5px

[valiermedia]

That’s the ticket! I had adding all of that extra padding because some of the images looked cramped next to a solid border. But that’s totally a preference component

If that answer I provided worked for you, please mark it as a solution so that the next person who needs to add borders to the collection grid for the Impulse theme can find the solution quickly.

Cheers!

[Luxurymrkt]

Thanks again!!! Ok

[valiermedia]

Of course! And if you run into issues or have any further Shopify questions, feel free to message me directly.

Enjoy your weekend!

[Luxurymrkt]

Hey bud, anyway to fix this? I think cause of the grid now it’s not full page. You can scroll left a bit on mobile. Please see pic

[valiermedia]

Hi there!

The box-sizing is already set to border-box, which should prevent the borders from resizing the elements. That said, I did take a look and it appears that there is an active “content-flush” setting that does some weird/problematic things to the layout. Here is a styling patch to remove that effect, or, try locating that effect within the theme customization settings.

@media (max-width: 767px) {
.collection-grid__wrapper .grid.grid--uniform.small--grid--flush {
	padding: 0 !important;
	margin-left: auto !important;
	margin-right: auto !important;
}
}

[Luxurymrkt]

Thank you