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

Solved

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

BJVNTG
Excursionist
36 0 6

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

Screenshot 2023-11-11 170625.png

Accepted Solution (1)
Abdosamer
Shopify Partner
919 171 191

This is an accepted solution.

The styles of the store are changed, I can't redo all of that.

Buy me a Coffee
Email : abdelrahamansamer71@gmail.com
Chat on WhatsApp
My work

View solution in original post

Replies 26 (26)

Abdosamer
Shopify Partner
919 171 191

Hi @BJVNTG , can you share your store url?

Buy me a Coffee
Email : abdelrahamansamer71@gmail.com
Chat on WhatsApp
My work
BJVNTG
Excursionist
36 0 6

bjvntg.com 

BJVNTG
Excursionist
36 0 6
Abdosamer
Shopify Partner
919 171 191

You need to achieve something similar to that? :

Abdosamer_0-1699742914716.png

 

Buy me a Coffee
Email : abdelrahamansamer71@gmail.com
Chat on WhatsApp
My work
BJVNTG
Excursionist
36 0 6

yup anything similar to that would be good! 

Abdosamer
Shopify Partner
919 171 191

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

Abdosamer_0-1699743324784.png

 

 

Buy me a Coffee
Email : abdelrahamansamer71@gmail.com
Chat on WhatsApp
My work
BJVNTG
Excursionist
36 0 6

mobile and desktop please

Abdosamer
Shopify Partner
919 171 191

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

.product-list .card {
    margin: 0 !important;
    border: 1px solid #505050 !important;
}
Buy me a Coffee
Email : abdelrahamansamer71@gmail.com
Chat on WhatsApp
My work
BJVNTG
Excursionist
36 0 6

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

Screenshot 2023-11-11 181330.png

Abdosamer
Shopify Partner
919 171 191

Add the following code snippet to the same file :

.product-list {
    justify-content: center !important;
}
Buy me a Coffee
Email : abdelrahamansamer71@gmail.com
Chat on WhatsApp
My work
BJVNTG
Excursionist
36 0 6

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

Abdosamer
Shopify Partner
919 171 191

You can center the font and pricing using this code :

.card__content {
    text-align: center !important;
}
Buy me a Coffee
Email : abdelrahamansamer71@gmail.com
Chat on WhatsApp
My work
BJVNTG
Excursionist
36 0 6

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! 

image_123986672 (2).JPG

BJVNTG
Excursionist
36 0 6

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

Screenshot 2023-11-11 182746.png

BJVNTG
Excursionist
36 0 6

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

image_123986672 (1).JPGimage_123986672.JPG 

Abdosamer
Shopify Partner
919 171 191

Add this code to make it center on phone : 

.product-list {
    margin: 0 !important;
}
Buy me a Coffee
Email : abdelrahamansamer71@gmail.com
Chat on WhatsApp
My work
BJVNTG
Excursionist
36 0 6

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

Abdosamer
Shopify Partner
919 171 191

Yeah the code snippet that I provided you :

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

just change #505050 with #010101. 

Buy me a Coffee
Email : abdelrahamansamer71@gmail.com
Chat on WhatsApp
My work
BJVNTG
Excursionist
36 0 6

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

Screenshot 2023-11-11 191410.png

Abdosamer
Shopify Partner
919 171 191

Add the following code :

.card__content {
    
  padding: 0 !important;
   
}
Buy me a Coffee
Email : abdelrahamansamer71@gmail.com
Chat on WhatsApp
My work
BJVNTG
Excursionist
36 0 6

How do I change the border color to black? 

Abdosamer
Shopify Partner
919 171 191

I replied to your question above.

Buy me a Coffee
Email : abdelrahamansamer71@gmail.com
Chat on WhatsApp
My work
BJVNTG
Excursionist
36 0 6

How do I make the outside border thickness the same thickness as the inside, because the outside is slightly skinnier. 

Screenshot 2023-11-11 194152.png

Abdosamer
Shopify Partner
919 171 191

I cannot enter the website.

Buy me a Coffee
Email : abdelrahamansamer71@gmail.com
Chat on WhatsApp
My work
BJVNTG
Excursionist
36 0 6

password is retsam

Abdosamer
Shopify Partner
919 171 191

This is an accepted solution.

The styles of the store are changed, I can't redo all of that.

Buy me a Coffee
Email : abdelrahamansamer71@gmail.com
Chat on WhatsApp
My work