Relocate social buttons

[JustinasR]

Hi im trying to relocate social buttons to just below the site logo in the footer. Could anyone help me out with the way to do this? The standard theme setting doesnt have it.

www.mansome.eu

[Laza_Binaery]

Hi @JustinasR

From a first look it should be possible to edit the footer section and place the social block after the logo.

Duplicate your theme so you can play and make changes safely. So first step is to find the right file/files. In your code editor, search for “trusted_logo”. That is the image class for the logo in the footer. After a element, you should copy the part of the code that holds div element with the class social`. Note this sounds easy but it depends how much Liquid code is there before that div. So go slow.

Good luck

[Ploqo]

Your store runs the Roam theme. Roam renders the social icons as their own row above the footer menus, and there’s no setting to move them

After aplying the fix given below:

Steps:

• Duplicate your live theme first (Online Store > Themes > … > Duplicate) so you can test safely.
• In the copy: Edit code, then search all files for trusted_logo (that’s where your logo was added, likely a Custom Liquid block in the footer). Paste this block right after your logo code and Save:

<style>
  .social--under-logo{ justify-content:flex-start !important; margin-top:.6em; }
  .site-footer-social.is-relocated{ display:none !important; }
</style>
<script>
  document.addEventListener('DOMContentLoaded', function(){
    var footnav = document.querySelector('.footnav');
    var logo = footnav && footnav.querySelector('.trusted_logo');
    var social = document.querySelector('.site-footer-social .social');
    if(!footnav || !logo || !social) return;
    var col = logo;
    while(col && col.parentElement !== footnav){ col = col.parentElement; }
    if(col && !col.contains(social)){
      col.appendChild(social);
      social.classList.add('social--under-logo');
      var row = document.querySelector('.site-footer-social');
      if(row) row.classList.add('is-relocated');
    }
  });
</script>

• Preview, then publish the copy.

Notes:

• The icons line up on the left, under the logo. To put them centered under the logo instead? Change flex-start to center.
• Works the same on mobile.

Regards,
Ploqo

[HBNStudio]

Two paths, depending on how comfortable you are with theme code.

First, reopen the theme editor and check the Footer section’s block list. In some themes the social icons are their own block inside the footer, and blocks can be dragged to sit under the logo. Since Roam does not expose that setting, the code editor is the fallback.

In Online Store → Themes, duplicate your live theme so you can experiment safely. Then open Edit code and search the theme files for “social” — the icons are usually a rendered snippet (something like social-media.liquid) or inline markup inside the footer section. Move that snippet or markup so it renders directly after the logo, then save and preview the duplicate.

If the footer is built from blocks, the cleaner version is to remove the social block and add the same render tag right below the logo markup in the same file.

[DanielAnderson]

If Roam is handling the footer the way it looks here, I’d check the footer section file first, because the social icons are probably being rendered in their own block above the menu area rather than through a drag-and-drop setting.

In most themes that means moving the social block in the footer markup so it sits right under the logo block, then saving and previewing on desktop and mobile to make sure the spacing doesn’t break.

If you don’t want to edit code, the other thing worth checking is whether Roam has a footer content order setting hidden in the theme editor under the footer section, since some themes let you reorder blocks there even when the main setting doesn’t mention social icons.

Are you seeing the social icons in a separate footer file/block, or only in the theme editor settings?

[ZestardTech]

Hello @JustinasR

Welcome to shopify community.

Since you’re using the Roam theme and there’s no option in the theme editor to move the social icons, this will need a small code adjustment.

Reference screenshot:

First duplicate the theme, then locate the social icon markup in the footer section or related snippet and place it inside the footer column where you want it to appear.

If you’d like us to make the adjustment for you, feel free to DM us and we will be happy to look into it and handle the changes for you.