Change social media icon hoover colour in homepage footer Dawn 15V

Topic summary

A Shopify store owner using Dawn theme version 15 wants to change the hover color of social media icons in the footer to white, while keeping the rest of the site’s hover color red.

Solutions Provided:

  • Two community members offered CSS code snippets to target footer social icons specifically
  • The recommended solution uses .footer-block--newsletter .list-social__link:hover { color: white !important; } added to the base.css file

Additional Request:
The original poster also asked for help with a separate, more complex issue involving creating color-based collections from products that have multiple color variants. They have 6 heel styles, each available in 4 colors (24 total products), and want to create collections showing only specific colors (e.g., “Pink Collection” showing all 6 styles in pink only). The current tagging system shows all color variants of a style rather than filtering by the selected color.

Status: The footer hover color issue appears resolved with provided CSS code. The collection filtering issue remains a separate, ongoing challenge.

Summarized with AI on November 7. AI used: claude-sonnet-4-5-20250929.

Hii,

My whole store button hoovering colour is red so my issue is my footer is also in red colour and there added icons hoover in red when we click on it so nothing shows after clicking the button its all blank. I want to change the hoover colour for the footer icons only and keep it to white.

check the screenshot:

store url: https://5a3cf5-fc.myshopify.com

1 Like

Hello @ctal37

  1. Go to Online Store → Theme → Edit code.

  2. Open your theme.liquid file

  3. Paste the below code before on theme.liquid

a.list-social__link:hover { color: #000 !important; /*change color according to you*/ }

Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

1 Like
.list-social__link:hover {
    color: white !important;
}

Can you add this code to last line file base.css @ctal37

I want a change only for footer section not for the whole store social media icons

1 Like
.footer-block--newsletter .list-social__link:hover {
    color: white !important;
}

You can try this @ctal37

1 Like

Hey @BSS-Teklabs

create colour wise collection from existing 6 style products

This change is so important to me I need your help really bad, and you will be the first one solving this issue on in community. I will be more than just thankful I don’t know you but everything means a lot to me whatever help you do to help me

Can you help me with the issue given below

Store url https://5a3cf5-fc.myshopify.com/

Check my profile for more details about this issue I’ve raised a question already.

I have 6 style heels with 4 different colours each style (Red Pink White Black ), so totally 24 pairs.

( 6 Red ) (6 Pink) (6 White) (6 Black)

I would like to create colour wise collection from existing 6 style products only.

Like ‘Red collection’ with all 6 style red heels,

‘Pink collection’ with all 6 style pink heels etc.

So I added everything correctly , I added pink tags products in Pinkish Collection and added it in main menu navigation bar.

And now the issue is when i click on the option ‘Pinkish Collection’ its actually navigating me to all the products available in single style and not just showing pinks. So if I click on option pink i want all the pink products appear and rest disappear.

I did all the steps correctly now the problem is in single style there’s already 4 colours added its not single colour product so I can tag it with a single tag obviously I tagged all 4 colours in that same single style which is having all 4 colours.

So now tell me if I click on option pink collection i want all the pink products appear and rest disappear.

check the screenshots