Change the background color and hover color of the social media icons ( Shopify Ware Theme )

Topic summary

A user seeks to modify the social media icons in their Shopify Ware theme footer, specifically wanting to change both the default background color and hover state color. The icons currently have a white background that doesn’t display well against the footer.

Problem: The white background of social media icons lacks visibility in the footer section.

Goal:

  • Make the icon background color more visible (currently white but not showing well)
  • Apply a different color on hover
  • Keep footer section background unchanged

Attempted Solutions:
A helper provided CSS code snippets to add to theme.liquid under <style> tags, including:

  • Hover effects with white background and border-radius
  • Footer background color changes (rejected by original poster)

Current Status: The issue remains unresolved. The hover effect works, but the default state background still isn’t visible enough. The user clarified they want white backgrounds on icons that are actually visible, with a different hover color—but the white isn’t displaying properly against the current footer design.

Summarized with AI on October 30. AI used: claude-sonnet-4-5-20250929.

Hello Everyone!

I want to change the background color and hover color of the social media icons in the footer section. The background color of the social media icons is not visible well. Site created by Urban instead of Powered by Shopify.

Store: https://93w53cp8o83xjoct-71768310072.shopifypreview.com

Password: Admin

a:hover {
    background-color: white;
}
footer.footer {
    background-color: #00BADB;
}

hey @dreamtechzone_5 try this one
Go to online store ----> themes ----> go to three Dots ----> edit code ---->find theme.liquid files ----> place the code ---->
under the tag before the body ----->
if this code work please do not forget to like and mark it solution

1 Like

I only want to change the background color of the social media icons, and the hover color. I don’t want to change the background color of the footer section.

a:hover {
    background-color: white;
}

try this one

Go to online store ----> themes ----> go to three Dots ----> edit code ---->find theme.liquid files ----> place the code ---->
under the tag before the body ----->
if this code work please do not forget to like and mark it solution

1 Like

The social media background color changes when you hover, but even if you don’t hover, the social media icon background color still solid white.

a:hover {
    background: white;
    border-radius: 100%;
}

hope so you like this one
Go to online store ----> themes ----> go to three Dots ----> edit code ---->find theme.liquid files ----> place the code ---->
under the tag before the body ----->
if this code work please do not forget to like and mark it solution

1 Like

It changes on hover but the background of the social media icons is not visible well without hover. I want to keep the background color of the social media icons white except on hover. The background color is white but the white color is not visible well.