how can i add my own clickable social media icons to trade theme

[grumpycookies]

hey forum... i'm going crazy trying to find this answer.

i would like to add my own clickable social media icons to the footer part of my page.

i don't want to use the one from the theme because it ends up looking like this...

that is horrible, small, not colorful, and it ends up left aligning the follow us on shop button.

i have tried installing an app but almost all of them end up having a side bar or a bar at the bottom of the page that moves when you scroll.

can anyone out there help me. i'm getting a headache haha... here is my preview site.

https://mlzq4cuuuc5f2lry-77911654695.shopifypreview.com

[rajweb]

Hey @grumpycookies ,

Add Custom Social Media Icons to Footer:

1. Prepare Your Icons:

- Use colorful icons for platforms like Facebook, Instagram, Twitter, etc.

- Upload the icons to your Shopify admin: Go to Settings >

- Files in your Shopify admin. Upload the image files.

Follow these Steps:

1. Online Store 

2. Themes 

3. Edit Code

4. Open the footer.liquid or similar footer-related file.

5. Add HTML for Social Media Icons: Insert the following code where you want the icons to appear in the footer:

<div class="custom-social-icons">
  <a href="https://facebook.com/yourpage" target="_blank" rel="noopener">
    <img src="{{ 'facebook-icon.png' | file_url }}" alt="Facebook" class="social-icon" />
  </a>
  <a href="https://instagram.com/yourpage" target="_blank" rel="noopener">
    <img src="{{ 'instagram-icon.png' | file_url }}" alt="Instagram" class="social-icon" />
  </a>
  <a href="https://twitter.com/yourpage" target="_blank" rel="noopener">
    <img src="{{ 'twitter-icon.png' | file_url }}" alt="Twitter" class="social-icon" />
  </a>
</div>

Replace facebook-icon.png, instagram-icon.png, and twitter-icon.png with the filenames of your uploaded icons.

Style the Icons:

-Open the theme’s CSS file, such as theme.css or styles.css.

- Add the following CSS to style your icons:

.custom-social-icons {
  display: flex;
  justify-content: center;
  gap: 15px;
  margin-top: 20px;
}

.custom-social-icons img {
  width: 30px;
  height: 30px;
  transition: transform 0.3s ease;
}

.custom-social-icons img:hover {
  transform: scale(1.2);
}

If I was able to help you, please don't forget to Like and mark it as the Solution!
If you’re looking for expert help with customization or coding, I’d be delighted to support you. Please don’t hesitate to reach out via the email in my signature below—I’m here to help bring your vision to life!

Best Regard,
Rajat Sharma

[grumpycookies]

hi there! i just tried this and it didn't work for me 😞 

i looked in the trade theme coding area, and i didn't see theme.css or styles.css. i do have base.css. could i use that?

i'm not a pro at coding, but i'm not bad at following directions on here. haha... any other tips for me?