Shopify Footer Fix: Moving Social Icons Below Your Logo (Even Without a Setting!)

Hey there, fellow store owners! It's your Shopify expert here, fresh off a deep dive into the community forums. You know how it goes – sometimes you have a very specific vision for your store's layout, only to find the theme editor isn't quite as flexible as you'd hoped. That's exactly what happened in a recent thread that caught my eye, and it's a common pain point: wanting to move those social media icons in the footer to a different spot, specifically right under the logo.

Our friend JustinasR kicked off the discussion, running the Roam theme and looking to relocate their social buttons to just below the site logo in the footer. The problem? No standard theme setting to do it. Sound familiar? Let's unpack what the community had to say, and how you can tackle this yourself!

Why Can't I Just Drag and Drop? Understanding Theme Limitations

First off, JustinasR's experience isn't unique. Many Shopify themes, while offering fantastic customization options, sometimes hardcode certain elements or place them in specific sections without an option to easily reorder them via drag-and-drop in the theme editor. For themes like Roam, as several community members like ZestardTech and Ploqo quickly pointed out, the social icons are often rendered in their own row or block that isn't directly configurable through the visual editor.

DanielAnderson and HBNStudio both suggested a good first check: reopening the theme editor and looking closely at the Footer section's block list. In some themes, social icons are their own draggable block. But for Roam, it seems this isn't the case. This means we'll need to roll up our sleeves and get into the theme code – but don't worry, the community provided some excellent guidance!

The Community Weighs In: Two Main Paths to Take

The collective wisdom from the thread pointed to two primary ways to achieve this footer customization:

1. Direct Code Adjustment: Manually locating and moving the social icon markup within the theme's Liquid files.
2. Dynamic JavaScript Relocation: A more elegant solution involving a small script to move the elements on the fly.

Always Start with Safety: Duplicate Your Theme!

Before touching any code, every single expert in the thread (ZestardTech, HBNStudio, Ploqo, Laza_Binaery) emphasized one critical step: duplicate your live theme! This creates a safe copy where you can experiment without affecting your live store. You'll find this option under Online Store > Themes > … > Duplicate.

Path 1: The Direct Code Edit (When You're Comfortable Digging In)

If you're comfortable navigating your theme's Liquid files, the direct code adjustment involves finding the existing social icon code and physically relocating it. Here's the general gist, synthesizing advice from ZestardTech, DanielAnderson, HBNStudio, and Laza_Binaery:

1. Duplicate Your Theme: (Seriously, do it!)
2. Open the Code Editor: In your duplicated theme, click Actions > Edit code.
3. Locate the Footer Section: Social icons are almost always in the footer. Look for files like footer.liquid or within a sections/footer.liquid file.
4. Find the Logo Markup: Search for the class trusted_logo. This is what Laza_Binaery and Ploqo identified as the class for the logo in the Roam theme's footer. This will be your anchor point.
5. Find the Social Icon Markup: Search for "social" in your theme files. It might be a snippet like social-media.liquid or inline markup within a
   element.
6. Cut and Paste: Once you've found the social icon code, cut it from its original location and paste it directly after the logo's markup (or within the same parent column as the logo, if that makes more sense for your layout).
7. Save and Preview: Save your changes and preview the duplicated theme to ensure everything looks correct on both desktop and mobile. Check spacing carefully!

This method requires a bit more detective work to find the exact code, but it's a solid way to achieve the desired layout.

Path 2: A Smart JavaScript Solution for Roam Theme Owners

Ploqo provided a fantastic, ready-to-use script that dynamically moves the social icons. This is often a cleaner approach, especially if the theme's Liquid structure is complex or if you want to avoid directly altering core theme snippets. It effectively "repositions" the elements using JavaScript after the page loads, and then hides the original container.

Here’s how Ploqo's solution works, complete with the provided code:

Before and After:

Steps for Ploqo's Solution:

1. Duplicate Your Live Theme: (Yes, again!) Go to Online Store > Themes > … > Duplicate.
2. Edit Code: In the copy of your theme, click Actions > Edit code.
3. Locate the Logo Code: Search all files for trusted_logo. This is typically a custom Liquid block in the footer.
4. Paste the Code: Directly after your logo code (where you found trusted_logo), paste the following block of HTML, CSS, and JavaScript:

5. Save and Preview: Click "Save" and then preview your duplicated theme to see the changes.
6. Publish: Once you're happy with how it looks, you can publish the duplicated theme to make it live.

Notes on Ploqo's Solution:

• By default, the icons will align to the left under the logo. If you prefer them centered, simply change justify-content:flex-start to justify-content:center in the