How can I darken the image background on the product card?

catadavilag
Visitor
2 0 0
How can I darken the image background on the product card? I have a store called https://www.portomenaje.cl/ and the theme used there (Aurora) gives me this option, so all the product photos have a grey background, even if the original photo is not a png and have a white background.

Is there a code that I can add for this to happen on my https://www.wens.cl/ website? An also, how can I round de corners of the image of the product card? A perfect example of this would be the https://www.sokobox.cl/ website.
Replies 2 (2)

ThePrimeWeb
Shopify Partner
1187 309 228

Hey @catadavilag,

Please take note that some of your images have white background which will overlap the background of the product card. Remove their backgrounds and upload those photos again. 

 

Go to your theme's "Edit Code" Option, then in the search bar type "theme.liquid"
Below the tag "<head>" tag type the following. Screenshot attached for reference.

<style>
.product-card__figure {
    background-color: lightgray;
    border-radius: 20px;
}
</style>

 

Screenshot is for reference only, the correct code to paste is the one shown above.

ThePrimeWeb_0-1706270273337.png

 

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
catadavilag
Visitor
2 0 0

Thanks! You´re very kind for answering quickly. Is there a way that this works even if the image has a white background? On my https://www.portomenaje.cl/ website all my images are a jpg. with white background and the theme option also works for these images

catadavilag_0-1706271110645.png