Add social links to header in Kofe theme

[meggriffin]

Can someone tell me how I can add social icons to the right side of my header?

[suyash1]

@meggriffin if default theme options are not available then needs custom coding

[TheScriptFlow_1]

Hey @meggriffin,

Could you please share your store url along with the password so that I can take a look and provide you with the solution.

Thanks

[meggriffin]

Thank you. Here is my store link. https://hellacomplicated.com/ Password Welcome123

[TheScriptFlow_1]

@meggriffin

Welcome123

Hey @meggriffin,

Thanks for sharing the store url. I found that in order to add the social icons on the right of the header requires to do the custom code in your theme file.

Could you please share your store collab code in the p/m so that I can implement the requested changes.

Thanks

[topnewyork]

Hi @meggriffin

1: Click customize, once the theme editor opens, look for the Header section in the left sidebar and click on it. Scroll and click on Theme Setting, and find Social Media option. Here, you will see separate fields for Facebook, Instagram, Twitter, Pinterest, etc. Paste the full URL (link) of your social media pages into the corresponding boxes. Once you have added the links, click the SAVE.
After saving, the icons will appear in your header, usually on the right side, according to your theme’s design.

2: Edit the Theme Code:
Go to “Online Store” > “Themes.”
Next to your theme, click “Actions” > “Edit code.”
In the code editor, open the “Sections” folder from the file list on the left and click on the header.liquid file.
You need to find the right spot in this file to add the icons (for example, after the navigation menu). You can paste HTML code like the snippet below. You will need to add your own social media links and links to icon images.

<div class="header-social-links">
  <a href="https://facebook.com/your-page-url">
    <img src="facebook-icon.png" alt="Facebook">
  </a>
  <a href="https://instagram.com/your-username">
    <img src="instagram-icon.png" alt="Instagram">
  </a>
</div>

Now, to style these icons, find a file like base.css or theme.css in the “Assets” folder. At the end of the file, paste the following CSS code to position the icons on the right side of the header.

.header-social-links {
  float: right;
  margin-top: 15px; 
}
.header-social-links a {
  margin-left: 10px; 
}

You can adjust magin-top and margin-left as needed.

SAVE the changes you made in both files.

Generally, the first method (Theme Customization) works for most users or you can try custom code second method as well.

Thanks!