Changing the heading colour on a specific page

Store Design
1

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.

1 Like
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” %}

{{ collection.title }}

{% endif %}

‘theme.scss.liquid’

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

Good luck.

3

@tommyboySE25

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

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

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

4

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/

5

Hi @KetanKumar thanks for coming back.

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

many thanks

6

@tommyboySE25

Which collection are you trying to change the color of?

7

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" %}
# 
{{ 'collections.general.collection_label' | t }}: 
{{ collection.title }}

{% else if %}
# 
{{ 'collections.general.collection_label' | t }}: 
{{ collection.title }}

{% endif %}

Puma1027_0-1637671272570.png
Puma1027_0-1637671272570.png1677×868 91.1 KB

8

theme.scss.liquid.png
theme.scss.liquid.png1852×1052 170 KB

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 :disappointed_face:

collection-template.liquid.png
collection-template.liquid.png1914×929 228 KB

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
sale page.png2137×1061 251 KB

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

9

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.