Move Social Media Icons from the footer menu - Studio Theme

Store Design
1

Hey, is it possible to move the social media icons from the footer menu to for example the header or better announcement bar? i can´t find a good free app for this problem. i am using the studio theme.

my site: lorenaxangelina.com

pw: 654321

Every help is welcome, thx!

2

hi @lorenaxangelina ,

yes, you can move the icons list social from footer to header or any where on website you want.
but have point you need know is check and customize code, so if you don’t familiar with code you can contact with me, i can do it!

Thanks!

3

@lorenaxangelina ,
Hii,

yes you can move the social media icons
In your footer.liquid file, find code

-------------- --------------

Copy this entire div and paste it wherever you want to add, in the theme.

2 Likes
4

Hi @lorenaxangelina ,

Are you wanting this?

Screenshot.png
Screenshot.png1442×352 124 KB

Please follow the steps below:

  • Step 1: Go to Customize and turn off social media icons at footer.

  • Step 2: Go to announcement-bar.liquid file and add code here:

Screenshot.png
Screenshot.png1244×707 50.8 KB

Code:


  {%- if settings.social_twitter_link != blank -%}
  - {%- render 'icon-twitter' -%}
        {{ 'general.social.links.twitter' | t }}
    
  

  {%- endif -%}
  {%- if settings.social_facebook_link != blank -%}
  - {%- render 'icon-facebook' -%}
        {{ 'general.social.links.facebook' | t }}
    
  

  {%- endif -%}
  {%- if settings.social_pinterest_link != blank -%}
  - {%- render 'icon-pinterest' -%}
        {{ 'general.social.links.pinterest' | t }}
    
  

  {%- endif -%}
  {%- if settings.social_instagram_link != blank -%}
  - {%- render 'icon-instagram' -%}
        {{ 'general.social.links.instagram' | t }}
    
  

  {%- endif -%}
  {%- if settings.social_tiktok_link != blank -%}
  - {%- render 'icon-tiktok' -%}
        {{ 'general.social.links.tiktok' | t }}
    
  

  {%- endif -%}
  {%- if settings.social_tumblr_link != blank -%}
  - {%- render 'icon-tumblr' -%}
        {{ 'general.social.links.tumblr' | t }}
    
  

  {%- endif -%}
  {%- if settings.social_snapchat_link != blank -%}
  - {%- render 'icon-snapchat' -%}
        {{ 'general.social.links.snapchat' | t }}
    
  

  {%- endif -%}
  {%- if settings.social_youtube_link != blank -%}
  - {%- render 'icon-youtube' -%}
        {{ 'general.social.links.youtube' | t }}
    
  

  {%- endif -%}
  {%- if settings.social_vimeo_link != blank -%}
  - {%- render 'icon-vimeo' -%}
        {{ 'general.social.links.vimeo' | t }}
    
  
  {%- endif -%}

Hope it helps!

1 Like
5

Hey @oscprofessional , thank you for your advice!
I’ve found the code but i’m not quite sure were to place it. I want it left beside my text in the announcement bar. I think the announcement-bar.liquid is the right place… if possible can you help again?

Thx for your help!

6

Hi @lorenaxangelina ,

Do you want it to look like this?

Screenshot.png
Screenshot.png1175×248 58.7 KB

Please send me the code of announcement-bar.liquid file, I will help you to add it

7

This works perfect for me! Thanks a lot!

1 Like
8

Hi @lorenaxangelina ,

I saw you liked my answer. If it helped you solve your issue, please mark it as a solution. Thank you and good luck.

1 Like