Add border with shadow around products in Debutify theme

Solved
Dutchies
Tourist
35 1 10

Can anyone help me adding borders around the products like in the example below?

 

I tried a couple of solutions but none worked. I use the Debutify theme.

 

Dutchies_0-1612796583949.png

Thanks!!

0 Likes
suyash1
Shopify Partner
1919 192 289

@Dutchies - can you please share your website link?

you are welcome to contact me.
My email - suyash.patankar@gmail.com

#1 page builder app on Shopify - for FREE! PageFly
0 Likes
Dutchies
Tourist
35 1 10

@suyash1 

 

dutchies-cbd.myshopify.com

 

password = 0702

0 Likes
suyash1
Shopify Partner
1919 192 289

This is an accepted solution.

@Dutchies - something like this?

.product--wrapper{border: 1px solid #e2e2e2;
    -webkit-box-shadow: 0 8px 6px -6px black;
    -moz-box-shadow: 0 8px 6px -6px black;
    box-shadow: 0 8px 6px -4px #e2e2e2;}

suyash1_0-1612800266189.png

 

you are welcome to contact me.
My email - suyash.patankar@gmail.com

#1 page builder app on Shopify - for FREE! PageFly
Ninthony
Shopify Partner
1627 224 611

This is an accepted solution.

I would do it around everything and add a little padding so that it looks a little more like his original example:

.grid-product__wrapper {
    box-shadow: 2px 2px 10px rgba(0, 0, 0, .3);
    padding: 20px 15px;
}

 

You can add that to the bottom of your theme.scss.liquid file in your Assets folder under Online Store > Themes > Actions > Edit Code 

If my solution helped you, please like and accept as solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
0 Likes
Dutchies
Tourist
35 1 10

Is it possible to add it also for featured products?

0 Likes
Ninthony
Shopify Partner
1627 224 611

The code I provided should work on both your collection pages and your home page.

If my solution helped you, please like and accept as solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
0 Likes
Dutchies
Tourist
35 1 10

@Ninthony @suyash1 

Thanks to both of you!

suyash1
Shopify Partner
1919 192 289
Welcome.
you are welcome to contact me.
My email - suyash.patankar@gmail.com

#1 page builder app on Shopify - for FREE! PageFly
0 Likes
Dutchies
Tourist
35 1 10

 

@Ninthony @suyash1 

What code do I have to add to get all the pictures / borders the same size? 

 

The 3 products on my page are testproducts, but I resized every image to 800x800 and it's still different sizes

0 Likes