Theme Focal Collections page products @ row

Technical Q&A
1

How to change products [email removed] row on a collections page from minimum of 3 to 2 [email removed] row. And also to center the products in the row rather than flush left as at present.

2

Hi @PeterOgnibene ,

Go to Assets > theme.css and paste this at the bottom of the file:

.product-facet .product-list__inner {
	display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: var(--product-list-column-gap) !important;
}
.product-facet .product-list__inner .product-item {
    width: calc(50% - (var(--product-list-column-gap) / 2)) !important;
}

Hope it helps!

3

Chris didn’t work. Our shop is SCSS. Not CSS. Nothing happened when I pasted in this line. I sent a reply yesterday by email with an image.

4

Hi @PeterOgnibene ,

CSS code will work fine on SCSS.

Please send your site and if your site is password protected, please send me the password. I will check it.