I want to change my social active color to green

Store Design
, , , ,
1

My social links in the footer are showing green color after hovering, before it merges with the background color and becomes invisible.

Can anyone help me to make it active color green?

This is the store link : https://paintedparks.com

image
image1198×838 99.1 KB

2

Hey @Fayed_Bd

Follow these Steps:

  1. Go to Online Store
  2. Edit Code
  3. Find theme.liquid file
  4. Add the following code in the bottom of the file above </ body> tag
<style>
li.list-social__item {
    background: rgb(102, 158, 68) !important;
}
</style>

RESULT:

image
image1877×565 44.9 KB

If you require any other help, feel free to reach out to me. If I managed to help you then a Like would be truly appreciated.

Best,
Moeed

3

Hi @Fayed_Bd

  1. From your Shopify Admin, navigate to Online Store > Themes > Edit Code
  2. In the Assets folder, open base.css and add your CSS code at the end
.footer ul.footer-social-icons li {
    background-color: green;
}

image
image1325×555 45.5 KB

4

Hi @Fayed_Bd :waving_hand:

The hover effect is using the same green as your background, which is why the icons seem to disappear. You can fix this by setting a different (or consistent) green for the hover state.

How to fix:

  1. Go to Online Store > Themes > Edit code.

  2. Open your main stylesheet (often called base.css or theme.css).

  3. Scroll to the bottom and paste this code:

.footer__social a:hover svg path {
  fill: #00a859; /* keeps icons green on hover */
}

This will keep your icons visible in green even when hovering.

:backhand_index_pointing_right: If you’d prefer a darker green so it stands out even more, use this instead:

.footer__social a:hover svg path {
  fill: #006400; /* dark green */
}

Result

Your footer icons will stay green (or a darker green) when hovered, making them always visible against the background.

Best,
Expertrichaerd
Ecommerce expert & Shopify Partner

5

It’s worked, thanks.

6

Hi @Fayed_Bd

Thank you for your response. It’s good to know that it’s worked for you. Kindly feel free to get back to me if you need any further assistance. If helpful, please like all posts.