edit some default theme estetic templates

[michal22]

Hi , i d like to remove the square lines around my products in theme Refresh and instead change it for something like white rectangle without those black line boundaries around. Is it possible?

[BSSCommerce-B2B · Accepted solution]

Hi @michal22,

Do you want your product cards look like this

If so, please follow these steps

Step 1. Go to Admin -> Online store -> Theme > Edit code

Step 2. Find the file "base.css" or "component-card.css".

Step 3. Add this code to the end of file

.card--card.gradient,
.card__inner.gradient {
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1), 0 6px 20px rgba(0, 0, 0, 0.1)!important;
   border: none!important;
}   

If it helps you, please like and mark it as the solution.

Best Regards

[BSSCommerce-B2B · Accepted solution]

Hi @michal22,

Do you want your product cards look like this

If so, please follow these steps

Step 1. Go to Admin -> Online store -> Theme > Edit code

Step 2. Find the file "base.css" or "component-card.css".

Step 3. Add this code to the end of file

.card--card.gradient,
.card__inner.gradient {
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1), 0 6px 20px rgba(0, 0, 0, 0.1)!important;
   border: none!important;
}   

If it helps you, please like and mark it as the solution.

Best Regards

[michal22]

thanks you really helped me.... and is there a way to maybe make it look even better on mobile view cause i have 3 products in best selling but there is just so much empty space for forth one on mobile view but i dont want to add the forth because it would look bad on desktop view than...

[BSSCommerce-B2B · Accepted solution]

@michal22,
I think you should set one product per row on mobile, to do this please following these steps
1. Go to Admin -> Online store -> Themes -> Customize

2. Choose Feature collection section -> scroll down to mobile layout -> change the number of columns on mobile to 1

Hope it helps you 😊