Fixing Social Links That Hijack Your Store's Tabs

The Problem

 

Social media icons in the site footer — Facebook, Instagram, YouTube, TikTok, X — were opening in the same browser tab, taking visitors away from the store entirely instead of simply linking out to social profiles.

 

The Investigation

 

The footer template itself contained no social link markup at all — it simply called a shared snippet. Since browser DevTools only shows the final rendered HTML (not the underlying {% render %} calls), the actual source had to be traced by searching the codebase directly. The markup lived in snippets/social-icons.liquid, a single reusable snippet powering social links across the footer, password page, and announcement bar.

 

The Fix

 

Added target="_blank" and rel="noopener" to each of the 9 platform links inside the shared snippet.

 

 

• target="_blank" opens the link in a new browser tab
• rel="noopener" is a required security pairing alongside it — without it, the newly opened tab can access and manipulate the original page via window.opener




Here is the code fix in Chrome Dev Tools: 

 

Because the fix lived in one shared snippet, it corrected the behavior everywhere on the site at once, rather than needing repeated edits across multiple files.

 

Workflow
Feature branch → scoped commit (excluding unrelated test data) → PR → merge, following standard Git practice for all theme changes.

 

Full recipe: View on GitHub →