How do I move my social media buttons from the footer to the header? (Craft theme)

[boster]

Hello,

Same question as the title. I am using a vanilla Craft theme and would like to move the buttons from the bottom to the top of the page. Could anyone help me out?

[PaulNewton]

Hi @boster 👋 that's an advanced theme customization as different files and structures have to be changed, and style.

Generally if you have some coding experience look for footer.liquid or similar in the sections folder in the theme code editor.

Find the wanted elements, then try to transfer them to the header.liquid or similar section.

But often this is not a 1:1 transplant.

If using a shopify-magic compatible theme merchants could also asking the bot to try and generate a custom header section with the wanted features at the risk of wasting time probabilistically generated code.

If you need this customization then contact me by my email for services

or if you have access use a private message by clicking here (sloooower). 

Other contact info in forum signature.
ALWAYS please provide context, examples: store url, theme name, post url(s) , or any further detail in ALL correspondence.

[suyash1]

@boster  this will need code editing, footer file needs to be transferred to header file, but this changes the entire header structure and responsive view

[rajweb]

Hey @boster ,

To move the social media buttons from the footer to the header in the Craft theme on Shopify, follow these steps:

1. Online Store

2. Themes

3. Edit Code

4. Under Sections, open footer.liquid.

5. Look for this block (or similar):

{% render 'social-icons' %}

4. Cut that entire line or block of code.

Paste the Social Icons in the Header:

1. Still in the code editor, go to Sections → header.liquid.

2. Decide where in the header you'd like the icons (e.g., top-left, top-right, beside logo).

3. Paste the previously copied line ({% render 'social-icons' %}) into the desired location. A common spot is near the end of the header markup, before the </header> tag.

4. 

<div class="header__icons">
  {% render 'social-icons' %}
</div>

If you want help implementing this, please feel free to reach out!
Best Regards,

Rajat

[Shopify Expert]

[WebDeskSolution]

Hello @boster 

Please follow the steps below after logging into your Shopify admin:

1. Go to Online Store > Themes.
2. Find the theme you want to edit, then click Actions > Customize.

To add Social Media icons in the Top :

• Click on the Announcement Bar section.
• Enable the Social Media icons option.
  Reference Screenshot

To disable Social Media icons from the Footer:

• Click on the Footer section.
• Disable the Social Media icons option.
  Reference Screenshot
  

Finally, don’t forget to save your changes.

Please hit Like and Mark it as a Solution if you find our reply helpful.