changing the heading colour on a specific page

tommyboySE25
Tourist
11 0 5

Hi, i'm using debut theme.  I have multiple pages and collection pages.  

 

i want to be able to change the colour of the page heading on specific pages so it may vary.  I've added code to the bottom of the 'theme.scss.liquid' file

          .collection-hero__title {color: white !important;}

 

this means i can change the colour of the collection page headers to be different to that of other pages, but i want to be able to:

  1. change the colour of a specific collection page, not just all of them be the same colour
  2. change the header colour on specific pages (e.g. returns only) and not just all the pages be the same colour

 

hopefully that makes sense!  any help welcomed.

Replies 8 (8)
Puma1027
Tourist
33 2 2

Hi, TommyboySE25.

You have to use a specific collection page's handle.

In 'collection-template.liquid', you have to add a new class.

 

EX:

 

'collection-template.liquid'

{% if collection.handle == "shoes" %}

<h2 class="collection-hero_title collection-title-white">{{ collection.title }}<h2>

{% endif %}

 

'theme.scss.liquid'

.collection-title-white {color: white !important;}

 

Good luck.

I am a Shopify developer.
I want to achieve my success through a community with you.
It's my success and soon your success.
If you need help, please contact me!
Skype ID: live:.cid.4149c7e1ff44466c
KetanKumar
Shopify Partner
24919 2496 9029

@tommyboySE25 

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community!
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
tommyboySE25
Tourist
11 0 5

Hi @Puma1027 thanks for coming back but unfortunately this did not work.  i added the code to the bottom of those files, but it failed to change the colour.

 

the site is: https://luellagrey.com/

 

 

tommyboySE25
Tourist
11 0 5

Hi @KetanKumar thanks for coming back.

 

the site is: https://luellagrey.com/

 

many thanks

Puma1027
Tourist
33 2 2

@tommyboySE25 

Which collection are you trying to change the color of?

I am a Shopify developer.
I want to achieve my success through a community with you.
It's my success and soon your success.
If you need help, please contact me!
Skype ID: live:.cid.4149c7e1ff44466c
Puma1027
Tourist
33 2 2

https://luellagrey.com/collections/sale

If you change this collection, please change the code in "collection-tamplate.liquid" file.

Please replace the part indicated in the attached image with the code below.

{% if collection.handle == "sale" %}
<h1 class="collection-hero__title page-width collection-title-white">
<span class="visually-hidden">{{ 'collections.general.collection_label' | t }}: </span>
{{ collection.title }}
</h1>
{% else if %}
<h1 class="collection-hero__title page-width">
<span class="visually-hidden">{{ 'collections.general.collection_label' | t }}: </span>
{{ collection.title }}
</h1>
{% endif %}

 

Puma1027_0-1637671272570.png

 

I am a Shopify developer.
I want to achieve my success through a community with you.
It's my success and soon your success.
If you need help, please contact me!
Skype ID: live:.cid.4149c7e1ff44466c
tommyboySE25
Tourist
11 0 5

theme.scss.liquid.png

Thanks @Puma1027 .

 

i really appreciate your help, but unfortuantely this did not work again.  I pasted in as explained but it did not change anything (screenshot of the code in place in collection-template.liquid

collection-template.liquid.png

 

I also tried amending it on the collection-luella-full-width.liquid (which is the template these collection page use), but this didnt work either.

 

I tried something different, which was to add some code to the bottom of theme.scss.liquid.  Now, this worked to change the collection page heading on all pages EXCEPT the sale page.  what i mean is that the example here, i have changed it for handbags (  .handbags .collection-hero__title {color: black !important;}  )  and it changed just the heading on the handbag page https://luellagrey.com/collections/handbags to black.

 

if i changed the .handbags to .purses it changed just the purses collection page.  

 

But when i changed it to .sale it did not change it on the sale page https://luellagrey.com/collections/sale:

sale page.png

the sale page is the only collection page it did not work for!

 

Puma1027
Tourist
33 2 2

Did you add the code - "collection-title-white {color: white !important}" in "theme.scss"

I'll change the code if you want.
Please request a partner.

I am a Shopify developer.
I want to achieve my success through a community with you.
It's my success and soon your success.
If you need help, please contact me!
Skype ID: live:.cid.4149c7e1ff44466c