Shopify Footer Facelift: How to Move Social Icons Under Your Logo (Roam Theme & Beyond)

View original discussion by JustinasR on Shopify Community →

Hey everyone! As a Shopify migration expert, I spend a lot of time digging into the nitty-gritty of store customization, and let me tell you, it's often the "small" things that make the biggest difference in a store's look and feel. Recently, I stumbled upon a fantastic discussion in the Shopify community that really highlights a common challenge: relocating elements within your theme when there isn't a direct setting for it.

Our friend JustinasR kicked off the conversation, asking for help to move their social media buttons directly under their site logo in the footer, specifically on the Roam theme. They mentioned, quite rightly, that the standard theme settings just didn't offer this option. This is such a classic scenario, isn't it? You have a clear vision for your footer, but the theme editor feels a bit limited.

image

Decoding the Roam Theme Footer

Several community experts jumped in, and what's great is how they converged on similar ideas while offering slightly different angles. ZestardTech, DanielAnderson, HBNStudio, and Laza_Binaery all confirmed that for the Roam theme, you're indeed looking at a code adjustment. The consensus? The social icons are likely rendered in their own block or snippet, separate from the main drag-and-drop sections in the theme editor.

image

The key takeaway from these replies is that you'll need to dive into your theme's code. Specifically, they point to the footer section file (often named footer.liquid or similar) and suggest looking for the "social" markup or a snippet like social-media.liquid. The common reference point? The trusted_logo class, which helps you pinpoint where your logo is being rendered.

While physically moving the Liquid code around is a valid path, Ploqo offered a super elegant and robust solution using a bit of JavaScript and CSS. This approach dynamically moves the social icons and ensures they look great, even on mobile. Let's break down that method, as it provides a complete, actionable fix.

Step-by-Step: Relocating Social Icons Under Your Logo

Before you touch any code, remember the golden rule of Shopify theme customization: always duplicate your live theme first! This creates a safe playground for testing changes without affecting your live store. You can do this by going to Online Store > Themes > … > Duplicate.

Here's how to implement Ploqo's solution:

  1. Duplicate Your Theme: As mentioned, this is your first and most important step.
  2. Access Theme Code: In your duplicated theme, click "Actions" then "Edit code."
  3. Locate the Logo's Position: Search all files for trusted_logo. This class typically marks where your logo is added, likely within a Custom Liquid block in your footer section.
  4. Paste the Code Snippet: Once you find the code for your logo, paste the following block of HTML, CSS, and JavaScript directly after your logo's code.

Here's the code you'll need:
  1. Save Your Changes: Click "Save" in the top right corner.
  2. Preview & Publish: Preview your duplicated theme to ensure the social icons are now perfectly placed under your logo. Once you're happy with how it looks on both desktop and mobile, you can publish the duplicated theme to make it live!

Here's a look at the "before" and "after" of this fix:

Before the Fix: Social Icons in Their Own Row

Roam footer before, social icons in their own row above

After the Fix: Social Icons Under the Logo

Roam footer after, social icons under the logo

Pro Tip: Centering Your Icons

By default, the code above aligns the icons to the left. If you prefer them centered under your logo, it's a super simple tweak. Just change justify-content:flex-start !important; to justify-content:center !important; in the