How to change the color of social media icons in the footer

How to change the color of social media icons in the footer

PedroPrado
Excursionist
41 0 6

I want to change the color of the social media icons on my footer in general. What should I do to achieve this?
my store link: https://xqtymudi20rxhvpp-78296449301.shopifypreview.com

Replies 4 (4)

BSSCommerce-B2B
Shopify Partner
565 114 137

Hi @PedroPrado , 

I have reviewed your requirement, you just need to edit css script and the issue will be resolved.  You can follow my instructions! 

 

Step 1: Go to Admin -> Online store -> Theme > Edit code:

BSSCommerceB2B_0-1718739463589.png

 

Step 2: Search for the file base.css or section-footer.css. And add this code snippet to the end of the file.

 

.icon.icon--full-color path {
    fill: currentColor;
}

 

In this step, you can change the color of attribute "fill" to change the color of social media icons. 

But, I think color of social media icon is white as old version looks the best so should don't change .

 

Step 3: Save your code and reload this page.

=>> The result: 

BSSCommerceB2B_1-1718739628956.png

 

I hope these instructions will help you. If they are helpful, please give us likes and mark as the solution.

Have a nice day sir! 

If our suggestions are useful, please let us know by giving it a like, marking it as a solution.


B2B Solution & Custom Pricing |BSS: B2B Portal, Quote, Net 30 | BSS: B2B Login Lock Hide Price


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency
PedroPrado
Excursionist
41 0 6

Hi, It's don't work. 

PedroPrado_0-1718740567374.png

The icons are black.
Don't you have another better way to help me?

BSSCommerce-B2B
Shopify Partner
565 114 137

Hi @PedroPrado , 

Sr about misunderstanding your requirement,

Thank you for reply and describe exactly issue like your image below. You want to change the color of the social item ( icon instagram, tiktok) right? 

 

BSSCommerceB2B_0-1718762465557.png

 

So, In Step 2: Search for the file base.css or section-footer.css. And add this code snippet to the end of the file.

 

 

li.list-social__item svg path {
    fill: red;
}

 

You can change the color as you want. In my example, I choose red.

 

And the result will be: 

BSSCommerceB2B_1-1718762654613.png

 

We hope my suggestions will fully meet your requirements this time.

 

If it is helpful, can you kindly give us many likes and mark the solution for us? 

This can be a reference for other merchants if they have an issue like you and greatly motivate us to contribute to our community. Thanks in advance.

If our suggestions are useful, please let us know by giving it a like, marking it as a solution.


B2B Solution & Custom Pricing |BSS: B2B Portal, Quote, Net 30 | BSS: B2B Login Lock Hide Price


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency
PageFly-Richard
Shopify Partner
4400 1006 1657

Hi @PedroPrado 

 

This is Richard from PageFly - Shopify Page Builder App

 

Please add this code to your theme.liquid above the </head> to get this solved

Step 1: Online Stores > Themes > More Actions > Edit code

Step 2: click on theme.liquid and paste the code above the </head>

<style>
li.list-social__item svg path {
    fill: red;
}
</style>

PageFlyRichard_0-1718761388720.png

 

Hope this can help you solve the issue 

 

Best regards,

Richard | PageFly 

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.