How can I change social media button colors on my Dawn theme?

Solved

How can I change social media button colors on my Dawn theme?

printwrkz
Tourist
5 0 1

Hey, so my Social Media Buttons matching the Colour Theme of my Page.

Is there any way you can add them with there original colours ?

 

Shopify Theme : Dawn

 

Added 2 Pictures

 

This is how it looks

now.jpg

This is how it should look

then.jpg

Accepted Solution (1)

HelgeJ
Shopify Partner
9 1 4

This is an accepted solution.

I think you have to switch the saved svg files.

In the code Im editor search for "icon-facebook.liquid" and replace the svg file code with code that includes the original colors.

like this:

<svg width="18px" height="18px" viewBox="0 0 0.36 0.36" xmlns="http://www.w3.org/2000/svg" fill="none"><path fill="#1877F2" d="M0.337 0.18A0.158 0.158 0 0 0 0.18 0.022a0.158 0.158 0 0 0 -0.025 0.313v-0.11H0.115V0.18h0.04V0.145c0 -0.039 0.024 -0.061 0.06 -0.061 0.017 0 0.035 0.003 0.035 0.003v0.039h-0.02c-0.02 0 -0.026 0.012 -0.026 0.025V0.18h0.044l-0.007 0.046h-0.037v0.11A0.158 0.158 0 0 0 0.337 0.18z"/><path fill="#ffffff" d="M0.241 0.226 0.248 0.18h-0.044V0.15c0 -0.012 0.006 -0.025 0.026 -0.025h0.02V0.087s-0.018 -0.003 -0.035 -0.003c-0.036 0 -0.06 0.022 -0.06 0.061V0.18H0.115v0.046h0.04v0.11a0.158 0.158 0 0 0 0.049 0v-0.11h0.037z"/></svg>

look at the correct width and height.

 

View solution in original post

Replies 3 (3)

HelgeJ
Shopify Partner
9 1 4

Do you have a link to your shop?

HelgeJ
Shopify Partner
9 1 4

This is an accepted solution.

I think you have to switch the saved svg files.

In the code Im editor search for "icon-facebook.liquid" and replace the svg file code with code that includes the original colors.

like this:

<svg width="18px" height="18px" viewBox="0 0 0.36 0.36" xmlns="http://www.w3.org/2000/svg" fill="none"><path fill="#1877F2" d="M0.337 0.18A0.158 0.158 0 0 0 0.18 0.022a0.158 0.158 0 0 0 -0.025 0.313v-0.11H0.115V0.18h0.04V0.145c0 -0.039 0.024 -0.061 0.06 -0.061 0.017 0 0.035 0.003 0.035 0.003v0.039h-0.02c-0.02 0 -0.026 0.012 -0.026 0.025V0.18h0.044l-0.007 0.046h-0.037v0.11A0.158 0.158 0 0 0 0.337 0.18z"/><path fill="#ffffff" d="M0.241 0.226 0.248 0.18h-0.044V0.15c0 -0.012 0.006 -0.025 0.026 -0.025h0.02V0.087s-0.018 -0.003 -0.035 -0.003c-0.036 0 -0.06 0.022 -0.06 0.061V0.18H0.115v0.046h0.04v0.11a0.158 0.158 0 0 0 0.049 0v-0.11h0.037z"/></svg>

look at the correct width and height.

 

amjadali01
Excursionist
23 0 4

Could you provide me other SVG code Instagram, TikTok, YouTube, tweeter?