FreeNewBlockContent

Social Icons Row

Name: Social Icons Row
Brand: modblo

Inline-SVG social link row, no icon font dependency.

#social#footer#links#icons#custom-liquid

Live preview

See it in action.

Fully interactive, drag, click, scroll inside the frame, toggle to mobile.

About this block

A clean horizontal row of social platform links. Inline SVG icons for Instagram, TikTok, YouTube, X, Pinterest, and Facebook, no icon font, no external requests, no FontAwesome bloat. Drop into the footer or any page section.

Install in 90 seconds

01
Open your Shopify admin and go to Online Store → Themes → Customize.
02
On any template, click "Add section" where you want the block to appear.
03
Choose "Custom Liquid" from the section list.
04
Paste the code from this page into the Custom Liquid setting and click Save.
05
Edit text and colors directly in the code (look for the comments marking edit points).

The code

Paste the snippet below into the Custom Liquid setting on a Custom Liquid section in your Theme Editor. Edit text, colors, and links directly in the code, every editable spot is marked with an EDIT comment.

modblo-social-icons.liquid

{%- comment -%}
  modblo. Social Icons Block
  Paste into a Shopify "Custom Liquid" section via Theme Editor.
  Inline SVG icons (no font dependency, no extra requests).
  Uncomment / delete rows to enable / disable platforms.
{%- endcomment -%}

<style>
  .modblo-soc { background:transparent; padding:clamp(20px,3vw,32px) 0; }            /* EDIT bg */
  .modblo-soc__inner { max-width:1200px; margin:0 auto; padding:0 24px; text-align:center; }
  .modblo-soc__lbl {
    text-transform:uppercase; letter-spacing:.18em; font-size:11px;
    font-weight:700; opacity:.55; margin:0 0 14px;
  }
  .modblo-soc__row {
    display:inline-flex; gap:12px; align-items:center; justify-content:center;
    flex-wrap:wrap;
  }
  .modblo-soc__link {
    width:40px; height:40px; border-radius:50%;
    display:grid; place-items:center;
    color:#0b0b0c;                                                                /* EDIT icon color */
    background:rgba(0,0,0,.05);                                                   /* EDIT button bg */
    text-decoration:none; transition:background .2s, transform .15s;
  }
  .modblo-soc__link:hover { background:rgba(0,0,0,.1); transform:translateY(-2px); }
  .modblo-soc__link svg { width:18px; height:18px; }
</style>

<section class="modblo-soc">
  <div class="modblo-soc__inner">
    <p class="modblo-soc__lbl">Follow us</p>                                          {%- comment -%} EDIT label or remove {%- endcomment -%}
    <div class="modblo-soc__row">
      <a class="modblo-soc__link" href="https://instagram.com/yourbrand" aria-label="Instagram" target="_blank" rel="noopener">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round">
          <rect x="3" y="3" width="18" height="18" rx="5"/><path d="M16 11.4a4 4 0 1 1-8 0 4 4 0 0 1 8 0z"/><path d="M17.5 6.5h.01"/>
        </svg>
      </a>
      <a class="modblo-soc__link" href="https://tiktok.com/@yourbrand" aria-label="TikTok" target="_blank" rel="noopener">
        <svg viewBox="0 0 24 24" fill="currentColor">
          <path d="M19.6 6.7a4.7 4.7 0 0 1-3.3-1.4 4.7 4.7 0 0 1-1.4-3.3h-3.4v13.2a2.6 2.6 0 1 1-2-2.5v-3.5a6 6 0 1 0 5.4 6V8.7a8 8 0 0 0 4.7 1.5z"/>
        </svg>
      </a>
      <a class="modblo-soc__link" href="https://youtube.com/@yourbrand" aria-label="YouTube" target="_blank" rel="noopener">
        <svg viewBox="0 0 24 24" fill="currentColor">
          <path d="M23 7s-.2-1.6-.9-2.3c-.8-.9-1.7-.9-2.1-1C16.8 3.5 12 3.5 12 3.5s-4.8 0-8 .2c-.4 0-1.3 0-2.1 1C1.2 5.4 1 7 1 7s-.2 1.9-.2 3.7v1.7C.8 14.1 1 16 1 16s.2 1.6.9 2.3c.8.9 1.9.9 2.4 1C6 19.5 12 19.5 12 19.5s4.8 0 8-.2c.4 0 1.3 0 2.1-1 .7-.7.9-2.3.9-2.3s.2-1.9.2-3.7v-1.7C23.2 8.9 23 7 23 7zM10 14.5v-6l5.5 3z"/>
        </svg>
      </a>
      <a class="modblo-soc__link" href="https://x.com/yourbrand" aria-label="X" target="_blank" rel="noopener">
        <svg viewBox="0 0 24 24" fill="currentColor">
          <path d="M18.244 2H21l-6.52 7.45L22 22h-6.27l-4.91-6.42L5.21 22H2.45l6.97-7.96L2 2h6.41l4.44 5.87L18.244 2zm-1.1 18h1.66L7.94 4h-1.7l10.9 16z"/>
        </svg>
      </a>
      <a class="modblo-soc__link" href="https://pinterest.com/yourbrand" aria-label="Pinterest" target="_blank" rel="noopener">
        <svg viewBox="0 0 24 24" fill="currentColor">
          <path d="M12 2a10 10 0 0 0-3.6 19.3c0-.8 0-1.7.2-2.5.2-.9 1.4-5.7 1.4-5.7s-.4-.7-.4-1.7c0-1.6 1-2.8 2.1-2.8 1 0 1.5.8 1.5 1.7 0 1-.7 2.6-1 4 0 1.2.6 2.2 1.8 2.2 2.1 0 3.7-2.2 3.7-5.4 0-2.8-2-4.8-5-4.8a5.2 5.2 0 0 0-5.4 5.2c0 1 .4 2.2.9 2.8.1.1.1.2.1.3l-.4 1.5c0 .2-.2.3-.4.2-1.4-.7-2.3-2.7-2.3-4.4 0-3.6 2.6-6.9 7.5-6.9 3.9 0 7 2.8 7 6.6 0 3.9-2.5 7.1-5.9 7.1-1.2 0-2.3-.6-2.6-1.3l-.7 2.7c-.3 1-1 2.2-1.5 3A10 10 0 1 0 12 2z"/>
        </svg>
      </a>
      <a class="modblo-soc__link" href="https://facebook.com/yourbrand" aria-label="Facebook" target="_blank" rel="noopener">
        <svg viewBox="0 0 24 24" fill="currentColor">
          <path d="M22 12a10 10 0 1 0-11.6 9.9v-7H8v-2.9h2.4V9.7c0-2.4 1.5-3.7 3.6-3.7l2 .2v2.4h-1.2c-1.2 0-1.6.7-1.6 1.5V12H16l-.5 2.9h-2.1v7A10 10 0 0 0 22 12z"/>
        </svg>
      </a>
    </div>
  </div>
</section>

What you can customize

Custom Liquid sections don't expose theme-editor settings, so customization happens in the code. Here's what to edit:

What	How to edit
Label	Remove the .modblo-soc__lbl line if you don't want the 'Follow us' label.
Each platform link	Update each href= and remove platforms you don't use.
Icon color & button bg	Look for /* EDIT icon color / and / EDIT button bg */.

SEO & accessibility notes

Inline SVG only, no FontAwesome / icon-font request.
Real <a> with rel="noopener" on every external link.
Each link has aria-label naming the platform for screen readers.
Zero JavaScript.

Pairs nicely with

Newsletter Signup

Email capture form with consent text, pastes into Custom Liquid in the Theme Editor.

100 perf·beginner

Free

Trust

Trust Badges

Compact horizontal trust strip, pastes into Custom Liquid.

CTA Banner

Full-bleed conversion banner, pastes into Custom Liquid in the Theme Editor.

100 perf·beginner

Free