Change colour, header/footer in specific category

Store Design
1

What are my options if I want to create a special style for one specific page on my web shop?

For example: I have some categories (to make it easy, let’s say “clothes”, “shoes”, “underwear” etc). If I want to have one category named “Christmas”. Creating and managing the category isn’t any trouble.

But if I want this specific Christmas category to have another look? For example different colour background and different header/footer, logo than the rest of the categories? My aim is to be able to do changes in the header and footer (upper and lower section of a page - but ONLY in the specific Christmas category). As well as to change the logo picture (again, only in the specific Christmas category). This don’t seem possible?

I know I can create specific templates and connect the Christmas category . Which I did. And changes made in the middle sections of the Christmas web page will only appear here and not anywhere else. Changes in header/footer and similar will however appear overall on the website. Not only on the specific Christmas category. Hence my conclusion the changes you can do in a specific template are very limited?

Is this something I could do with coding instead then? Please help me out.

2

Hello @amouseytale ,
Change Colour, Header/Footer In Specific Category

Do you want to change the background color, text color and text style of the header footer of Christmas category?

Please share URL of Christmas category.

3

Hello,
Here is the URL: https://amouseytale.com/collections/christmas

I have attached a photo as well. I just want to change the colours of the two header sections I have marked in the photo, change the logo picture in the header and change the colour in the footer.

ex1.png
ex1.png1490×758 79.2 KB

4

Here is a quick workaround hack with just CSS,

html:has(link[href='https://amouseytale.com/en-us/collections/christmas']) .announcement-bar.color-accent-1{
background: red;
}

html:has(link[href='https://amouseytale.com/en-us/collections/christmas']) .announcement-bar.color-accent-2{
background: green;
}

html:has(link[href='https://amouseytale.com/en-us/collections/christmas']) .footer {
    background: blue;
}

Though it’s supported only on major browsers like Chrome and Safari, Edge.

And of course change the colors and fonts as per your requirement.

5

Hi, thanks for your answer
Where should I insert your code in order to try if it works?
I have tried under “base.css” but haven’t notice any changes.

6

Which browser are you checking on? When I add it in Chrome console, I am able to see it.

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■1873×881 115 KB

You can also use this app to add custom css - https://apps.shopify.com/custom-css-plus

Or if you want I can send theme access request and do it for you.

7

Hi again,
I have tried now and looked on Chrome and it works indeed (I am using Firefox usually and it didn’t show there), thanks for the tip!
Is it possible to use color codes? Or am I limited to “red”, “blue”, “green”, “yellow” etc. ?

8

I tried and it works with color codes :grinning_face_with_smiling_eyes:

And regarding the logo, would you have any idea how to change it on that page only by any chance?

9

You can use this to replace the logo using CSS, replace the image link with your image link

html:has(link[href='https://amouseytale.com/en-us/collections/christmas']) .header__heading-link {
    background-image: url("https://img.freepik.com/premium-vector/handdrawn-festive-christmas-new-year-card-with-holiday-symbols-flag-calligraphic-greeting-inscription_190776-502.jpg?w=740");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

html:has(link[href='https://amouseytale.com/en-us/collections/christmas']) .header__heading-logo {
    visibility: hidden;
}
10

Thank you so much for all the help, everything worked perfectly. Much appreciated!

11

On another note, do you have any knowledge how I can attach a gif file on the home page of Shopify? I know it works with product pages but what about if I want a gif somewhere on the home page?

12

If GIF upload is not working within Shopify theme, we would need to upload it separately and add the link in the theme code.
If you want you can create this as theme edit task in our app, the first task is free.

13

Big thanks! I did sign up for the app and created the first task. I hope it worked!

14

Hi, I have sent you theme access request. Could you please check and approve it. Btw I can’t see your task in the panel yet, you can email us the task at contact@adevole.com

15

Hi, I can’t seem to make the Christmas products appear independent of the header, announcement bar, footer, and buttons. I’d like to change the colors only for the Christmas collection and product pages.

16

Hey @amouseytale :waving_hand:

You’re absolutely right — by default, Shopify uses global header and footer sections, which means any changes made there will reflect sitewide, even if your template is unique. But there are a couple of good workarounds you can use to give your “Christmas” collection its own unique look.

Option 1 – Duplicate the Header & Footer Sections

You can create a separate header and footer section files just for your Christmas template:

  1. Go to Online Store → Edit Code

  2. Under sections, find your header.liquid → click Duplicate → rename it to header-christmas.liquid
    (do the same for footer.liquid)

  3. In your new Christmas collection template (collection.christmas.json or .liquid), replace:

    {% section 'header' %}

    with

    {% section 'header-christmas' %}

    Same idea for the footer.

  4. Now you can freely edit those new sections — different logo, background, banner, etc. — and they’ll only appear on your Christmas page.

Option 2 – Conditional Styling with CSS

If you only want minor design changes (like background color or header color):

  1. Add a unique body class to your Christmas template, for example:

    <body class="christmas-page">

  2. Then in your theme CSS (or custom CSS file):

    .christmas-page header, .christmas-page footer {
  background-color: #b5121b; /* festive red */
}
.christmas-page .site-logo img {
  content: url('{{ 'christmas-logo.png' | asset_url }}');
}

This way, you can swap the logo and colors only on that page.

Option 3 – Use a Conditional Statement in Header/Footer

If you prefer not to duplicate files, you can wrap custom elements with a condition:

{% if template == 'collection.christmas' %}
  <img src="{{ 'christmas-logo.png' | asset_url }}" alt="Christmas Logo">
{% else %}
  {{ render 'standard-logo' }}
{% endif %}

:backhand_index_pointing_right: So yes, you can absolutely do it with coding — it just depends on whether you want to change layout sections or only visual styles.

:hammer_and_wrench: You can check out our Shopify Partner profile — we’ve built and shared several free Shopify app solutions to help store owners. Feel free to explore our profile and see how our apps can make your Shopify experience better!