Making Border Around Products With Debut Theme

[allbrittonz]

This is what is listed by default with the Debut theme.

This is what I would like to be achieved. 

If there is anyway to achieve this please help in the simplest terms possible (sorry if it's too much to ask).

Thank you in advance!

[oscprofessional]

Hello allbrittonz,
Please share your site url so that I can check and let you know exact solution here.

[Jasoliya]

Hi @allbrittonz 

1. Go to Online Store->Theme->Edit code
2. Asset->theme.scss->paste bellow code in bottom of file

#shopify-section-featured-collections .grid__item{ box-shadow: -1px 2px 17px 4px rgba(204,204,204,.42);  }

[allbrittonz]

Nothing seemed to have changed, sorry! Really appreciate the help though!

Thank you,

Shawn

[Jasoliya]

This code is for debut theme, if not working then send store url may be overriding css. 

[allbrittonz]

Sorry, didn't see the message above from you both. The URL is: realdealfinders.com

Thank you,

Shawn 

[Jasoliya · Accepted solution]

Try this:

#shopify-section-collection .grid__item{ box-shadow: -1px 2px 17px 4px rgba(204,204,204,.42);  }

[allbrittonz]

Thank you!

[TW1]

Hi, I am also using the Debut theme and exactly want to the same effect on the product grid. But when I copy the code and paste it into theme.scss, nothing seemed to have changed. It would be great if there is any suggested solution. Thanks!

[Jasoliya]

Send your store url

[TW1]

https://thank-q-store.myshopify.com/?fts=0&key=f1f7c3278bda5d5cb462463c6ead658d04895c16daef69e3bdba6...

[Jasoliya]

1. Go to Online Store->Theme->Edit code
2. Asset->theme.scss->paste bellow code in bottom of file

.product-card {
    box-shadow: -1px 2px 17px 4px rgba(204,204,204,.42);
    padding: 10px;
}

[TW1]

Thanks! It works! 

[Jasoliya]

Follow this

1. Go to Online Store->Theme->Edit code
2. Asset->style.css -> paste bellow code in bottom of file

.section__wrapper .collection-matrix__wrapper .product__grid-item { margin-top: 15 px ; box-shadow: 0px 0px 11px 2px rgb(204 204 204 / 42%); }

[NaseerAhmed]

Thank you. it seems to be working but needs a little tweak i think.. 
can you please check this screenshot https://ibb.co/522WHVz
there is no space between the two rows ..

[Jasoliya]

send me link of this page 

[NaseerAhmed]

the theme is actually not live yet.. I am making some changes to the theme before making it available... however I have done changes to the same theme on another store which i am sharing with you. same problem there.. 

https://meltingspotpizza.myshopify.com/collections/bar

[Jasoliya]

remove old css and add this new one

.section__wrapper .collection-matrix__wrapper .product__grid-item { margin-top: 15px ; box-shadow: 0 0 11px 2px rgb(204 204 204 / 42%); }

[NaseerAhmed]

Thank You.. This one worked like a charm.. 

[NaseerAhmed]

one more thing please.. Can you provide the same design code for featured collection on the home page as well.. 

https://meltingspotpizza.myshopify.com/

[Jasoliya]

add this code:

.product__grid-item { margin-top: 15px ; box-shadow: 0 0 11px 2px rgb(204 204 204 / 42%); }

[Sandra123]

Hi there. I tried all of the code snippets mentioned but nothing changed. Shop URL is https://www.alfa24shop.de/collections/produkte

Can someone here maybe help me with that as well?

Thanks a lot!!

[Jasoliya]

1. Go to Online Store->Theme->Edit code
2. Asset->theme.scss->paste bellow code in bottom of file

.grid-product__link {box-shadow: -1px 2px 17px 4px rgba(204,204,204,.42);   padding: 10px;}

[Sandra123]

Worked like magic! Thanks so much. You rock

[shahedbeauty]

me too plz. my store is 

www.clearskinjo.com

[Jasoliya]

Add this css:

.product-card{box-shadow: 0px 0px 20px 0px rgb(204 204 204 / 42%); padding: 10px;}

[randyjikdo]

Me too want this in my debut theme. my URL is www.jikdo.com

[Jasoliya]

I can see you have already added.

Best regard 

[NaseerAhmed]

hi, you have been a great help. Can you please give me the code for Flex Nourish theme. I have used all your provided codes on that theme but nothing seems to work.. 

Any help would be great.. 

Thank you.  

[Jasoliya]

Send me your store url 

[NaseerAhmed]

Bar - MeltingSpotPizza

https://meltingspotpizza.myshopify.com/collections/bar