How to remove random grey boxes on collection list

Store Design
, , ,

Topic summary

Issue: Grey boxes appearing between images in a Shopify home page collection list, likely caused by box-shadow on card pseudo-elements.

Context: Helpers requested the store URL (and password if applicable) to tailor a fix. The URL was provided.

Proposed solutions:

  • Add CSS to disable the shadow on the relevant pseudo-elements:
    • .card–card:after, .card–standard .card__inner:after { box-shadow: none; }
    • Scoped option: .collection-list .card–card:after, .collection-list .card–standard .card__inner:after { box-shadow: none; }
  • Alternative single rule: .card__inner:after { box-shadow: none !important; }

Implementation guidance: Insert the CSS at the bottom of the theme’s stylesheet (theme.css/base.css/index.css/style.css) via Online Store > Edit code.

Outcome: The change removed the grey boxes, and the original poster confirmed it worked. A result screenshot was shared.

Status: Resolved. No remaining questions or disagreements.

Summarized with AI on January 4. AI used: gpt-5.
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
IMG_5799.png1179×2556 366 KB

2

@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!

3

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

4

Www.gildedridge.com

5

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

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
sahilsharma9515_0-1708793783575.png778×759 210 KB

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

7

Thanks so much this worked!

1 Like