Removing Collection Photo from Title Only on Specific Pages

Solved
Highlighted
Tourist
4 0 0

HI all,

 

I don't write code first up, but can reaad a little of it.  I used a youtube video to make a list-collection on our website yesterday and it works well (basically its a lot of mini collections on one main collection to make navigation easy for clients - here's the page.  https://www.treegifts.co.nz/pages/add-something-else-to-your-gift   The code is written by someone on youtube.  

 

The pictures on the page are of course the "Collection" image which I need to use as they have a variety of products on the image, not just a product image which would be one product... The question is - how do I stop that imagefrom going into the title space on the actual pages and doing that pixelated fuzzy thing behind the title https://www.treegifts.co.nz/collections/chocolates-sweet-treats  (is there a way to just turn off these titles on these specific pages without affecting the rest of the site?). 

This site was a custom build so I don't want to change all of the titles on all of the pages in the code as the rest of the site looks good with the grey boxes...https://www.treegifts.co.nz/collections/air-plants-terrariums.  How do I get these new ones above (ie: Chocolates/Sweets)  to do the same as the rest of the site with that grey box...or just supress...without mucking everything up and having to pay the web dev thousands (minimum costs for their time!).

 

Thanks so much for anyone who can help me, out of my depth.

0 Likes
Highlighted

Success.

Hello @Lynnette_Tonkin,

If you dont want collection photo then

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

.collection-hero__image.ratio-container.js.lazyloaded {
	background-image: none !important;
}
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
Highlighted
Tourist
4 0 0
Surely that will remove all of the collection titles from every page on the
site affecting all the other titles set up by the developer?
0 Likes
Highlighted

Success.

@Lynnette_Tonkin,

It will only removes collection title background image.

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
Highlighted
Tourist
4 0 0
Perfect, thanks so much for your help - any idea how I then change the text
from white to perhaps black or another colour now that the image is gone?
https://www.treegifts.co.nz/collections/chocolates-sweet-treats
0 Likes

Hello @Lynnette_Tonkin,

Add this css in theme.scss

.collection-hero__image.ratio-container.js.lazyloaded {
	background-color: #000;
}

Note:Change color as per your requirement

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
Highlighted
Tourist
4 0 0

Actually I think I clicked solved a little too early - there is a lag happening when using this code:

 
The picture still shows before it then goes to the colour ie: it flashes up... is there a way to actually stop this?  See the image when you click through from this page to the actual linked pages...   
https://www.treegifts.co.nz/pages/add-something-else-to-your-gift  to any of the category pages

 
0 Likes
Highlighted

Success.

Hello @Lynnette_Tonkin,

Its because below css

2020-01-27_13-44.jpg

But If you change this css then it will affects on another collection page

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