ORIGIN THEME - Transparent Image Background On Collections Page

Store Design
, ,
1

Hi there!

My product images have transparent backgrounds but when viewed as a collection the image background is filled in white.

Any advice on fixing this would be greatly appreciated! :slightly_smiling_face:

preview url is https://mdvozqkmockxe67s-79755870509.shopifypreview.com

thank you!

2

Hello @joeereira ,

Follow these steps:

  1. Go to Online Store → Theme → Edit code

  2. Open your base.css file and paste the following code below:

.card--card.gradient, .card__inner.gradient { 
    background: transparent !important;
}

Thanks

3

Hi @joeereira

You can remove that background by adding this CSS code at the bottom of your base.css file

.card__inner { background: transparent !important; }

Screenshot 2023-07-19 at 15.13.09.png
Screenshot 2023-07-19 at 15.13.09.png1185×646 186 KB

4

Thank you so much! that’s perfect!! Is there anyway to centre the title and product price with the product image too?

5

Add this css

.card-information { 
    text-align: center;
}
.card__heading { 
    text-align: center; 
}
6

That works perfectly with the title but the product price won’t budge, can i change text-align to something for the price?

I tried to figure out what component it would work under but couldn’t do it :confused:

7

Use important with the property

.card-information, .card__heading {
    text-align: center !important;
}
8

Thank you!