Change Background colour on Specific Collection Page

[Toptoys2uHS]

Hello All,

I would like to find out how to change the background colour and other elements on a specific collection page.

I understand how to change a particular item on the navigation menu with

.nav-bar__item a[href=“(link)”]

and changing a specific collection block item with

.collection-block-item a[href=“(link)”]

background-image: url(example link)!important;
}

however I do not understand where to find a specific collection page and make changes on that (such as background colour, changing the website logo, text font and colour).

Would anyone be able to help with customising a specific collection page and the correct CSS to make changes?

An example of this would be changing the background of the header to black, just on this specific page

The website and collection page can be found here:

https://toptoys2u.co.uk/collections/halloween

Many thanks for any help!

[laddisahsi]

Hi @Toptoys2uHS

In body tag add class for collection

Then according to class add css

.halloween main#main {
    background-color: #000 !important;
}

If this solution is worked, then please Like this and Mark this as accepted solution!

Laddi

[osamafarooqi71]

Hello @Toptoys2uHS , Shopify uses templates to show different collections. That means you’ll not be able to find the specific collection page like ‘page.collection.best-seller’. However, you can use custom coding to address this.

simply create a new styling sheet for the collection like “best-seller.css” in the asset folder. Then add all the necessary styling for best seller collection into this file. Then import this file into the theme.liquid file in heading after and before tag.

To only apply this to specific collections you need to add a condition in Liquid as below.

....

{% if collection.handle == "best-seller" %}

   {{ 'best-seller.css' | asset_url | stylesheet_tag }}

{% endif %}

....

Regards,

Osama Farooqi

[Toptoys2uHS]

Hello Laddisahsi,

Could you explain which page the code needs to be added and where in the page?

I do not understand this code also.

Is it meant to be added like this?

Thank you for your help

[Toptoys2uHS]

Hello Osama Farooqi,

Thank you for your reply.

I already have a template/styling sheet for the Halloween Collection.

What part of the code bellow would need to be changed to target the halloween collection? (The URL is here: https://toptoys2u.co.uk/collections/halloween)

…

{% if collection.handle == “best-seller” %}

{{ ‘best-seller.css’ | asset_url | stylesheet_tag }}

{% endif %}

…

Thank you for your help.

[osamafarooqi71]

Hello @Toptoys2uHS , there are multiple ways to do the same thing. Please go to your Shopify dashboard. There Online Store > Themes > Edit Code on the left side you’ll see some coding files. Please search for the theme.liquid file. when you open it, please find , then paste the below code after this tag in a new line.

If you still face any issues please feel free to ping me back.

{% if collection.handle == "best-seller" %}

{% endif %}

Regards,

Osama Farooqi

[Toptoys2uHS]

Hello @osamafarooqi71

I cannot thank you enough for your help on this issue. Especially after nothing on the Shopify Community providing answers for specific collection pages.

I have added your code into Theme.Liquid and it seems to work, as well as being able to stylise specific assets.

I am only having slight trouble with some assets as you can see by the image here, as when I add in an asset that is found on the inspect tool and add a colour, the change does not get updated on the front-end.

Would you be able to correct this code on the back-end so that it shows up correctly on the front end?

Please see the images below for reference.

Please see the code that I have added so far.

{% if collection.handle == “halloween” %}

body{ background: linear-gradient(to right top, #e9a418, #070409, #a75ffa, #7e2bfb, #5a26a2, #36088c, #f5c6fb, #8653a8, #e29be4, #41dfff, #cd97f9); } body { cursor: url('[https://cdn.shopify.com/s/files/1/1779/2423/files/Halloween_Broomstick.png?v=1696249673](https://cdn.shopify.com/s/files/1/1779/2423/files/Halloween_Broomstick.png?v=1696249673)'), auto; } .collection__dynamic-part{ background: #F3B9C3; } .announcement-bar{ background: linear-gradient(to right top, #e9a418, #070409, #a75ffa, #7e2bfb, #5a26a2, #36088c, #f5c6fb, #8653a8, #e29be4, #41dfff, #cd97f9); } .header__logo-image{ background-image: url([https://cdn.shopify.com/s/files/1/1779/2423/files/Toptoys2u_Halloween_Logo.png?v=1696421350](https://cdn.shopify.com/s/files/1/1779/2423/files/Toptoys2u_Halloween_Logo.png?v=1696421350)) !important; } .nav-bar{ background: #F3B9C3; } .header header--inline { background: #F3B9C3; }

{% endif %}

Would you be able to correct this in order for it to start displaying the correct colour across the whole navigation bar?

Thank you once again for your help.