Removing Collection Photo from Title Only on Specific Pages

Solved
Lynnette_Tonkin
Tourist
6 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

This is an accepted solution.

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;
}
If helpful then please Like and Accept Solution. Free Website Review and advice for sale from Hire us
Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO | Digital Marketing | Site Speed Optimization | Performance Site Audit
For Quick Chat Whats app | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87
Lynnette_Tonkin
Tourist
6 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

This is an accepted solution.

@Lynnette_Tonkin,

It will only removes collection title background image.

If helpful then please Like and Accept Solution. Free Website Review and advice for sale from Hire us
Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO | Digital Marketing | Site Speed Optimization | Performance Site Audit
For Quick Chat Whats app | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87
Lynnette_Tonkin
Tourist
6 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

If helpful then please Like and Accept Solution. Free Website Review and advice for sale from Hire us
Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO | Digital Marketing | Site Speed Optimization | Performance Site Audit
For Quick Chat Whats app | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87
Lynnette_Tonkin
Tourist
6 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

This is an accepted solution.

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

If helpful then please Like and Accept Solution. Free Website Review and advice for sale from Hire us
Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO | Digital Marketing | Site Speed Optimization | Performance Site Audit
For Quick Chat Whats app | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87
0 Likes
Chelsea93
Tourist
8 0 3

Hi is there a way to remove the collection image from the page with products on that it relates to and keep this when its used as a widget on the homepage or in the 'view all' tab for collections? 

 

0 Likes