Is there a way to add my social media on my header?

[danielbiz]

Website is: lootworld.shop

Social media icons on the left before the search button

[DaisyVo]

Hi @danielbiz

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” and adjust the code below like the screenshot here: https://prnt.sc/InjIw2Ciqytu

Here is the code for Step 2:

{%- render 'social-icons', class: 'footer__list-social' -%}

Please let me know if it works. Thank you!

Best,

Daisy - Avada Support Team.

[Vinsinfo]

@danielbiz Please follow the below steps to add a social media icons to the header section. Let us know whether it is helpful for you.

1. Go to “Online stores” → “Themes”.
2. Click action button from the current theme and select “Edit code”.
3. Search “header.liquid” file and search for “header__icons” code and add the below code to the file like in the below attached screenshot.

{%- if section.settings.enable_header_social_icons -%}
  {%- render 'social-icons', class: 'custom-header-list-social' -%}
{% endif %}

4. Search for “id”: “enable_country_selector” code and add the below code to the file like in the below attached screenshot.

{
  "type": "checkbox",
  "id": "enable_header_social_icons",
  "default": true,
  "label": "Enable Header social icons"
},

FYI: You can enable and disable this toggle as per your need to display and hide the header social icons.

5. Click the “Customize” button from the current theme and click the “Header” section, like in the below attached screenshots to add CSS code in the “Custom CSS” block. The “Custom CSS” block will be at the bottom of the “Header” section.

.custom-header-list-social.list-social {
    flex-wrap: nowrap !important;
}
.custom-header-list-social .list-social__link {
    padding: 0px 10px;
}
.custom-header-list-social.list-social .list-social__item {
    align-content: center;
}
@media screen and (max-width: 480px) {
    .custom-header-list-social .list-social__link {
        padding: 0px 5px;
    }
}

Result will be like,

Please provide your support by click “Like” and “Accepted” if our solution works for you. Thanks for your support.

[akshay_bhatt]

Hi @danielbiz ,

To place social media icons to the left of the search button:

1. Edit Header: Locate your header file (e.g., header.liquid or header.php), and add social media icon HTML before the search button.

2. Add CSS:

.social-icons { display: flex; align-items: center; margin-right: 10px; }
.social-icons a { margin: 0 5px; }

save the changes and preview.

Got it! If you found my suggestions helpful, please consider liking or marking it as a solution.
Your feedback is appreciated! If you have any more questions or need further assistance, just let me know.

Thanks & Regards
Akshay Bhatt