how do I remove the white underlay on the collection list page

Solved
New Member
9 0 0

Hi, 

 

all these codes and posts have been very helpful. but I can't seem to find one that will solve my problem.

on my collection list page, which is linked to my catalog, I have for the moment 6 collections, I have a personalised image I want to use, but when I upload it, already vectored, the collection list page adds like a white back drop.

how can I get rid of that?

 

I've added pictures, so you can see the difference...

 

when I enter the link and go to a specific collection, the title page shows the vectored image, but in the main page, it shows those white backdrops, and I want it to be transparent, like the product images.

 

 

thank you for your help 

Screenshot 2019-12-10 at 3.36.24 AM.pngthis is what I want to fix, this is the general collections page.Screenshot 2019-12-10 at 3.36.50 AM.pnghow can I get rid of this white drop?Screenshot 2019-12-10 at 3.37.06 AM.pnghow can I make it look like this?Screenshot 2019-12-10 at 3.38.11 AM.pngthis is what I want.

0 Likes
Highlighted
Excursionist
17 1 4

You have to use the images in the "PNG" format to display a transparent background. So please ensure you were uploading the PNG images.

David Kean
CoFounder at Boostheme team
https://boostheme.com
0 Likes
New Member
9 0 0

yes, all the images I've used are png.

0 Likes

Hello ,

Please share your site url and password so that I will give you exact solution

Want to modify or incorporate custom changes on store, Hire us.
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Free Review and advice for sale on store | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | SEO & Digital Marketing | Site Speed Optimization | Performance Site Audit
0 Likes
New Member
9 0 0

Hi Oscar, 

 

thank you for your response, 

 

this is my site 

 

https://tia-nanas-collections.myshopify.com

 

the password is staouzu

0 Likes

@Arantza,Please provide correct password

Want to modify or incorporate custom changes on store, Hire us.
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Free Review and advice for sale on store | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | SEO & Digital Marketing | Site Speed Optimization | Performance Site Audit
0 Likes
New Member
9 0 0

 sorry, 

 

staozu

 

0 Likes
New Member
9 0 0

also, 

 

how can I make this heart smaller...

 

when I stretch the screen, it goes too big...

 

thank you so much for all your help

Screenshot 2019-12-10 at 1.47.42 PM.png

0 Likes

Success.

Hello @Arantza ,

For transperant background on collection page Please add below css

1. Go to Online Store->Theme->Edit code
2. Asset->theme.scss->paste bellow code in bottom of file

.template-list-collections .collection-grid-item__overlay.box.ratio-container {
	background-color: unset !important;
}

For heart add below css

.template-collection .collection-hero {
	max-width: 980px;
	margin: 0 auto;
}

 

Want to modify or incorporate custom changes on store, Hire us.
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Free Review and advice for sale on store | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | SEO & Digital Marketing | Site Speed Optimization | Performance Site Audit
1 Like
New Member
9 0 0

Oscar... Thank you so so so so so much for your help... I have been wrecking my brain for days trying to figure this out... 

 

you are amazing!!! thank you... it worked wonderfully 

0 Likes