Adding border on product list

Solved

Adding border on product list

remz1234
Excursionist
18 0 5

Hi, how can I replicate this to my product list? It has border with rounded corners. Thank you

Here is my store url : https://89dd9e-27.myshopify.com/

 

remz1234_0-1719553561399.png

 

Accepted Solution (1)
Dan-From-Ryviu
Shopify Partner
8382 1650 1661

This is an accepted solution.

Code updated 

.collection .grid__item {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1), 0 6px 20px rgba(0, 0, 0, 0.1) !important;
    border-radius: 15px !important;
    overflow: hidden;
}

- Helpful? Like and Accept solution to let me know or Buy me Coffee ❤️!
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.

View solution in original post

Replies 12 (12)

Moeed
Shopify Partner
4293 1101 1350

Hey @remz1234 

 

Welcome to Shopify Community! Can you share your Store URL so I can have a look on it? Also, if you have password enabled then please share the password as well. Your cooperation would be greatly appreciated.

 

Best Regards,
Moeed

Need a Shopify Specialist? Chat on WhatsApp


- Custom Design | Advanced Coding | Store Modifications
- Your Coffee Tip and my code, A perfect blend. ❤️
remz1234
Excursionist
18 0 5

Hi @Moeed here is my store url : https://89dd9e-27.myshopify.com/ 

 

Moeed
Shopify Partner
4293 1101 1350

Hey @remz1234 

 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code in the bottom of the file above </body> tag

<style>
.grid__item {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1), 0 6px 20px rgba(0, 0, 0, 0.1);
}
</style>

RESULT:

Moeed_0-1719555137733.png

 

If I managed to help you then, don't forget to Like it and Mark it as Solution!

 

Best Regards,
Moeed

Need a Shopify Specialist? Chat on WhatsApp


- Custom Design | Advanced Coding | Store Modifications
- Your Coffee Tip and my code, A perfect blend. ❤️
remz1234
Excursionist
18 0 5

Hi @Moeed already tried to add these code and it works but I want the corners to be rounded also. Thank you

remz1234
Excursionist
18 0 5

Hi @Moeed it also applies on product page. How can we remove this border on product page ?

 

remz1234_0-1719557020130.png

 

Dan-From-Ryviu
Shopify Partner
8382 1650 1661

Hi @remz1234 

Please go to your Online Store > Themes > Customize > Theme settings > Custom CSS, paste this code and save the change.

.spb-item .product-grid .grid__item {
border-radius: 8px;
}

 

- Helpful? Like and Accept solution to let me know or Buy me Coffee ❤️!
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.

remz1234
Excursionist
18 0 5

Hi @Dan-From-Ryviu already tried your code and it applies on my homepage but on collection it does not reflect. Thank you

remz1234_0-1719559138394.png

 

Dan-From-Ryviu
Shopify Partner
8382 1650 1661

Hi, please update the code you added to this 

.grid__item {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1), 0 6px 20px rgba(0, 0, 0, 0.1) !important;
    border-radius: 15px !important;
    overflow: hidden;
}

- Helpful? Like and Accept solution to let me know or Buy me Coffee ❤️!
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.

remz1234
Excursionist
18 0 5

Hi @Dan-From-Ryviu it worked now my collection but it also applies on my product page. How can we remove this? 

remz1234_0-1719559764541.png

 

Dan-From-Ryviu
Shopify Partner
8382 1650 1661

This is an accepted solution.

Code updated 

.collection .grid__item {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1), 0 6px 20px rgba(0, 0, 0, 0.1) !important;
    border-radius: 15px !important;
    overflow: hidden;
}

- Helpful? Like and Accept solution to let me know or Buy me Coffee ❤️!
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.

remz1234
Excursionist
18 0 5

@Dan-From-Ryviu it worked. Thank you so much. 

Dan-From-Ryviu
Shopify Partner
8382 1650 1661

You are very welcome.

- Helpful? Like and Accept solution to let me know or Buy me Coffee ❤️!
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.