Edit Shadow Behind Product Images In Studio Theme

Hi there,

Please help! I would really like to remove the greyish shadow which surrounds the product images on the ’ Studio’ theme, if possible. I have no idea how to remove it. Please help me out with it, so I can do the changes and publish my site.

https://thefunkydory.com/?_ab=0&_fd=0&_sc=1

this is a preview link to my website.

-It can be seen on all images of the home page and collection page.

Hi There,

Thank you for reaching out to the Shopify forums!

Let me quickly fix that issue for you.

Please share your store-protected pwd so, I can able to access the page.

Thanks & Regards,
Prezen Tech

The shadow part is not shown over there. It is visible in the website preview - https://7rpx6wfg7g387aw8-62195302589.shopifypreview.com

Hi Shivani,

You can add this CSS to remove the grey background:

.card__inner:after {
display: none;
}

If you need help in adding it, feel free to let me know.

Please can you help me out with, where do I have to add the above section?

Go to Online Store->Theme->Edit code->base.css and copy this css code at the bottom of file and save

.card__inner:after {
display: none;
}

If you are not confident about editing theme code, you can use this app to copy CSS into any theme, the feature is available in Free version - https://apps.shopify.com/custom-css-plus

You can also reach out to us within chat support of this app.

Hey, thank you so much for your help!

It Worked.

Can you please help me out with reducing the size of the images which are used in the collection list section? The size of the images is very large, I would like to reduce the size.

You can add this CSS,

If you want 5 in a row for desktop,

@media screen and (min-width: 990px)
.collection-list__item {
    width: calc(20% - var(--grid-desktop-horizontal-spacing)) !important;
}
}

if you want 4 in a row for desktop,

@media screen and (min-width: 990px)
.collection-list__item {
    width: calc(25% - var(--grid-desktop-horizontal-spacing)) !important;
}
}

I see you have installed ■■■■■■■■■■■ you can directly create tasks within the app if you have any theme edit requirement. The first task/hour is free.

Please can you help me with, where do I have to paste the CSS code?

You can paste it here, or reach out to me at contact@adevole.com

I tried it in the above way but it is not working. Can you help me, if I want to add the code in the edit code section, where do I have to add it?

Hi Shivani, I have sent you theme access request, could you please check and approve it. I’ll add the CSS and share the steps.

Please check now, the collection image sizes should be resolved.

https://7rpx6wfg7g387aw8-62195302589.shopifypreview.com/