Solved

How to remove random grey boxes on collection list

Gildedridge
Tourist
6 0 1

I added a collection list to my home page. Unfortunately there are these weird looking grey boxes showing up in between the images. I’ve tried everything to remove them but they won’t go away. Any recommendations how to get rid of them? 

IMG_5799.png

Accepted Solution (1)

Laza_Binaery
Shopify Partner
69 19 29

This is an accepted solution.

Hi @Gildedridge 

 

You can do this in different ways. First, you can add a bit of CSS code to that section, in Custom CSS part add 

.card--card:after,.card--standard .card__inner:after {
    box-shadow: none;
}

 

or in assets/component-card.css 

.collection-list .card--card:after, .collection-list .card--standard .card__inner:after {
    box-shadow: none;
}

 

 

Kind regards
Laza
www.binaery.com

View solution in original post

Replies 6 (6)

codexecom
Shopify Partner
56 9 13

@Gildedridge  To assist you with removing the grey background, I would need to know the specific URL of the store where you want the changes to be implemented. Once I have access to the store URL, I'll be able to provide you with the appropriate code or instructions tailored to your platform. Please share the store URL at your earliest convenience so that we can proceed efficiently. Thank you!

Need Freelance Shopify Developer, Designer or For further Discussion
Reachout me on whatsapp:+91 919721741072 or , Skype: https://join.skype.com/invite/sDrWRlIVb20I
Gildedridge
Tourist
6 0 1

sahilsharma9515
Shopify Partner
851 101 155

Hi @Gildedridge 

Can you please provide your store URL and password as well if applicable, so that I can provide you solution that can work for your store.

 

Best regards

Sahil

- Your

 Coffee Tip 

can create magic in coding ❤️❤️

- Need a Shopify Developer? CHAT ON WHATSAPP or EMAIL ME !


- Hopefully the solution will help you. If yes then Please hit

 Like 

and

 Mark it as solution! ❤️


sahilsharma9515
Shopify Partner
851 101 155

Hi @Gildedridge Thanks for providing the URL, Please add the code in your theme.css/base.css/style.css file which is available in your theme.

.card__inner:after {
    box-shadow: none !important;
}

If you are not sure where is your theme.css/base.css/index.css/style.css file please follow the steps:

  1. Login in shopify admin.
  2. Click on the Online Store.
  3. Then click on the button next to Customize in live Theme.
  4. Click Edit Code.
  5. Search theme.css/base.css/index.css/style.css in the code in left hand side which ever is available in your theme.
  6. You can add the above code at the bottom of the file.

Result:

sahilsharma9515_0-1708793783575.png

If you will unable to implement the same then I'm happy to do this for you, let me know. I can implement the code changes so that this will work well for you.

 

Hopefully it will help you. If yes then Please don't forget hit Like and Mark it as solution!

 

Best Regards

Sahil

- Your

 Coffee Tip 

can create magic in coding ❤️❤️

- Need a Shopify Developer? CHAT ON WHATSAPP or EMAIL ME !


- Hopefully the solution will help you. If yes then Please hit

 Like 

and

 Mark it as solution! ❤️


Laza_Binaery
Shopify Partner
69 19 29

This is an accepted solution.

Hi @Gildedridge 

 

You can do this in different ways. First, you can add a bit of CSS code to that section, in Custom CSS part add 

.card--card:after,.card--standard .card__inner:after {
    box-shadow: none;
}

 

or in assets/component-card.css 

.collection-list .card--card:after, .collection-list .card--standard .card__inner:after {
    box-shadow: none;
}

 

 

Kind regards
Laza
www.binaery.com
Gildedridge
Tourist
6 0 1

Thanks so much this worked!