Making Border Around Products With Debut Theme

Solved
allbrittonz
Tourist
6 0 0

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

Untitled1.png

 

This is what I would like to be achieved. 

Untitled.png

 

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!

Accepted Solution (1)
Jasoliya
Shopify Expert
4723 615 1176

This is an accepted solution.

Try this:

#shopify-section-collection .grid__item{ box-shadow: -1px 2px 17px 4px rgba(204,204,204,.42);  }
Want custom changes? hire me.
3 months of Shopify are available for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for bundle page.
Want to get Free review and advice for sale on store ?? just text me here

View solution in original post

Replies 30 (30)
oscprofessional
Shopify Partner
14744 2214 2704
Hello allbrittonz,
Please share your site url so that I can check and let you know exact solution here.
If helpful then Please Like and Accept Solution. Chat on WhatsApp | Skype : oscprofessionals-87 |
Email: pallavi@oscprofessionals.com | Custom Pricing Wholesale App : Free | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing
Jasoliya
Shopify Expert
4723 615 1176

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);  }
Want custom changes? hire me.
3 months of Shopify are available for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for bundle page.
Want to get Free review and advice for sale on store ?? just text me here
allbrittonz
Tourist
6 0 0

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

 

Thank you,

Shawn

Jasoliya
Shopify Expert
4723 615 1176

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

Want custom changes? hire me.
3 months of Shopify are available for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for bundle page.
Want to get Free review and advice for sale on store ?? just text me here
allbrittonz
Tourist
6 0 0

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

 

Thank you,

Shawn 

Jasoliya
Shopify Expert
4723 615 1176

This is an accepted solution.

Try this:

#shopify-section-collection .grid__item{ box-shadow: -1px 2px 17px 4px rgba(204,204,204,.42);  }
Want custom changes? hire me.
3 months of Shopify are available for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for bundle page.
Want to get Free review and advice for sale on store ?? just text me here
allbrittonz
Tourist
6 0 0

Thank you!

TW1
New Member
3 0 0

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
Shopify Expert
4723 615 1176

Send your store url

Want custom changes? hire me.
3 months of Shopify are available for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for bundle page.
Want to get Free review and advice for sale on store ?? just text me here
Jasoliya
Shopify Expert
4723 615 1176

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;
}
Want custom changes? hire me.
3 months of Shopify are available for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for bundle page.
Want to get Free review and advice for sale on store ?? just text me here
TW1
New Member
3 0 0

Thanks! It works! 

Jasoliya
Shopify Expert
4723 615 1176

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%); }

 

Want custom changes? hire me.
3 months of Shopify are available for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for bundle page.
Want to get Free review and advice for sale on store ?? just text me here
NaseerAhmed
Tourist
10 0 1

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
Shopify Expert
4723 615 1176

send me link of this page 

Want custom changes? hire me.
3 months of Shopify are available for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for bundle page.
Want to get Free review and advice for sale on store ?? just text me here
NaseerAhmed
Tourist
10 0 1

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
Shopify Expert
4723 615 1176

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%); }
Want custom changes? hire me.
3 months of Shopify are available for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for bundle page.
Want to get Free review and advice for sale on store ?? just text me here
NaseerAhmed
Tourist
10 0 1

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

NaseerAhmed
Tourist
10 0 1

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
Shopify Expert
4723 615 1176

add this code:

.product__grid-item { margin-top: 15px ; box-shadow: 0 0 11px 2px rgb(204 204 204 / 42%); }
Want custom changes? hire me.
3 months of Shopify are available for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for bundle page.
Want to get Free review and advice for sale on store ?? just text me here
Sandra123
Excursionist
17 0 3

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
Shopify Expert
4723 615 1176

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;}

 

Want custom changes? hire me.
3 months of Shopify are available for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for bundle page.
Want to get Free review and advice for sale on store ?? just text me here
Sandra123
Excursionist
17 0 3

Worked like magic! Thanks so much. You rock

shahedbeauty
New Member
2 0 0

me too plz. my store is 

www.clearskinjo.com

Jasoliya
Shopify Expert
4723 615 1176

Add this css:

.product-card{box-shadow: 0px 0px 20px 0px rgb(204 204 204 / 42%); padding: 10px;}
Want custom changes? hire me.
3 months of Shopify are available for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for bundle page.
Want to get Free review and advice for sale on store ?? just text me here
randyjikdo
New Member
3 0 0

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

Jasoliya
Shopify Expert
4723 615 1176

I can see you have already added.

Best regard 

Want custom changes? hire me.
3 months of Shopify are available for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for bundle page.
Want to get Free review and advice for sale on store ?? just text me here
NaseerAhmed
Tourist
10 0 1

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
Shopify Expert
4723 615 1176

Send me your store url 

Want custom changes? hire me.
3 months of Shopify are available for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for bundle page.
Want to get Free review and advice for sale on store ?? just text me here