How can I add a product grid using the Alchemy theme?

[BJVNTG]

How do I add a grid around my products like shown below. I’m using the alchemy theme

[Abdosamer]

Hi @BJVNTG , can you share your store url?

[BJVNTG]

bjvntg.com

[BJVNTG]

www.bjvntg.com

[Abdosamer]

You need to achieve something similar to that? :

[BJVNTG]

yup anything similar to that would be good!

[Abdosamer]

Great, you wanted on mobile only or in desktop like that :

[BJVNTG]

mobile and desktop please

[Abdosamer]

Go to your style.css file and add the following snippet

.product-list .card {
    margin: 0 !important;
    border: 1px solid #505050 !important;
}

[BJVNTG]

looks good, but it decided to then off-center all the products. anyway to keep them centered?

[Abdosamer]

Add the following code snippet to the same file :

.product-list {
    justify-content: center !important;
}

[BJVNTG]

thankyou so much! one final thing, how do I center the font and pricing under the listings?

[BJVNTG]

It’s still slightly off centered on the phone, as you can see the products are closer to the left side then the right.

[BJVNTG]

maybe this is a better example of what I was looking for, and will help keep things centered.

[Abdosamer]

You can center the font and pricing using this code :

.card__content {
    text-align: center !important;
}

[BJVNTG]

Thanks! is there an way to make it look just like the photo below, i’d rather there not be any empty space on the outside of the grid. I appreciate all your help!

[Abdosamer]

Add this code to make it center on phone :

.product-list {
    margin: 0 !important;
}

[BJVNTG]

works great, is there anyway to change the border color to black?

[Abdosamer]

Yeah the code snippet that I provided you :

.product-list .card {
    margin: 0 !important;
    border: 1px solid #505050 !important;
}

just change #505050 with #010101.

[BJVNTG]

Is there anyway to move the description and pricing up so that it’s closer to the photo?