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.

1 Like
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.

2 Likes
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.

2 Likes
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;
}
2 Likes
10

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

1 Like
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