Social Media Icons Header

[JakeDeppeler]

Hello, I need assistance adding social media icons (Facebook, Instagram, & TikTok) next to the cart in the header, with visibility on both desktop and mobile versions. Currently, I’ve added them to the announcement bar, but they disappear on mobile.

https://b400b2-75.myshopify.com/ - This is the store

[rajweb]

Hey @JakeDeppeler ,

To make the social media icons appear next to the cart in the header on both desktop and mobile, you can follow these steps:

1. Online Store

2. Themes

3. Edit Code

4. Find the file for your header, typically named  header.liquid (or something similar, depending on your theme).

5. Add Social Media Icons to the Header:

-Inside the header file, look for the section of code related to the cart icon. It's often wrapped in a "div" with classes related to header__icons, header__actions, or header__cart.

-Insert the social media icon code (using Font Awesome icons or images linked to your social media profiles) just before or after the cart icon code

6. Sample Code for Social Media Icons:

-You can add this code where you want the icons to appear in the header:

<a href="https://facebook.com/yourpage" target="_blank" class="header__social-icon">
  <img src="your-facebook-icon-url" alt="Facebook" />
</a>
<a href="https://instagram.com/yourpage" target="_blank" class="header__social-icon">
  <img src="your-instagram-icon-url" alt="Instagram" />
</a>
<a href="https://tiktok.com/@yourpage" target="_blank" class="header__social-icon">
  <img src="your-tiktok-icon-url" alt="TikTok" />
</a>

-Replace your-facebook-icon-url , your-instagram-icon-url and your-tiktok-icon-url with the links to your icon images.

7. Adjust the CSS for Visibility on Mobile:

-Open your theme’s CSS file (usually theme.css or styles.css ) and add custom CSS to control the display:

.header__social-icon {
  display: inline-block;
  margin-left: 10px;
  width: 20px; /* Adjust size as needed */
}

/* Ensure visibility on mobile */
@media (max-width: 768px) {
  .header__social-icon {
    display: inline-block;
  }
}

This should ensure the social media icons are consistently visible next to the cart on both desktop and mobile views. Let me know if you encounter any issues!

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

[DaisyVo · Accepted solution]

Hi @JakeDeppeler 

I hope you are well. You can follow our instructions below:

Step 1: Shopify admin > Online store > Edit code: https://prnt.sc/M4p-gua99Uf4
Step 2: Search for "header.liquid" file
Step 3: Add the following code at the bottom of the file above </head> tag. Screenshot for your reference: https://prnt.sc/lOb9Ih2EudXJ 

Here is the code for Step 3:

{%- render 'social-icons' -%}

 

 

Please let me know if it works. Thank you!

Best,
Daisy - Avada Support Team.

[JakeDeppeler]

Thanks, This was a easy just wonder how to fix this now? j

[DaisyVo]

Hi @JakeDeppeler 

The code we shared you a few days ago, could you please move it to the bottom right above the close tag </head> like this? https://prnt.sc/lOb9Ih2EudXJ 

Then we can continue to align the icons from our end here. Thank you!

Best,

Daisy - Avada Support Team. 

[namphan]

Hi @JakeDeppeler,

You want this:

In my opinion, it should be visible on desktop, and on mobile it should be added in the menu drawer because mobile doesn't have enough width to display all.

Please let me know, I will check it.