How to Add a Floating Icon Bar to Your Shopify Store (ZHD Icon Bar)

How to Add a Floating Icon Bar to Your Shopify Store (ZHD Icon Bar)

Want to add a sleek, floating toolbar with social links or quick navigation icons to your Shopify store? In this tutorial, we’ll build a custom icon bar section that stays fixed on the screen — with hover colors, active link highlighting, and even optional draggable movement!

🧩 Goal: Create a floating icon bar that can be customized in the theme editor. 💡 Skill Level: Beginner – Intermediate.

Step 1: Create a New Section

In your Shopify admin, go to:
Online Store → Themes → Edit Code → Sections → Add a new section Name it zhd-icon-bar.liquid.

Paste This Code:

{% raw %}
{% style %}
  .zhd__icon-bar .icon-bar {
      {%- case section.settings.icon_bar_size -%}
      {%- when 'standard' -%}
        width: 65px;
      {%- when 'large' -%}
        width: 90px;
      {%- endcase -%}
      background-color: {{ section.settings.bg_color }};
      position: fixed;
      top: 30%;
      right: 0;
      z-index: 5;
  }

  .zhd__icon-bar span.drag-me {
      display: none;
      {%- case section.settings.icon_bar_size -%}
      {%- when 'standard' -%}
        font-size: 12px;
      {%- when 'large' -%}
        font-size: 16px;
      {%- endcase -%}
      height: 40px;
      width: 100%;
      padding: 5px;
      color: #fff;
      background: black;
      text-align: center;
      cursor: move;
  }

  {% if section.settings.enable_draggable_mode %}
    .zhd__icon-bar .icon-bar:hover span.drag-me { display: block; }
  {% endif %}

  .zhd__icon-bar .icon-bar a {
      display: block;
      text-align: center;
      padding: 16px;
      transition: all 0.3s ease;
      color: {{ section.settings.icon_color }};
      {%- case section.settings.icon_bar_size -%}
      {%- when 'standard' -%}
        font-size: 20px;
      {%- when 'large' -%}
        font-size: 36px;
      {%- endcase -%}
  }

  .zhd__icon-bar .icon-bar a:hover {
      background-color: {{ section.settings.hover_color }};
  }

  .zhd__icon-bar .icon-active {
      background-color: {{ section.settings.active_color }};
  }

  @media only screen and (max-width: 767px) {
    .zhd__icon-bar .icon-bar { width: 65px; }
    .zhd__icon-bar span.drag-me { font-size: 12px; }
    .zhd__icon-bar .icon-bar a { font-size: 20px; }
  }
{% endstyle %}
Drag Me {% for block in section.blocks %} {% endfor %}


{% schema %}
{
  "name": "ZHD Icon Bar",
  "max_blocks": 5,
  "enabled_on": { "groups": ["header"] },
  "class": "zhd__icon-bar",
  "settings": [
    {
      "type": "checkbox",
      "id": "enable_draggable_mode",
      "default": false,
      "label": "Draggable Bar?"
    },
    {
      "type": "select",
      "id": "icon_bar_size",
      "options": [
        { "value": "standard", "label": "Standard" },
        { "value": "large", "label": "Large" }
      ],
      "default": "standard",
      "label": "Bar Size"
    },
    { "type": "color", "id": "bg_color", "label": "Background", "default": "#555" },
    { "type": "color", "id": "icon_color", "label": "Icon", "default": "#fff" },
    { "type": "color", "id": "active_color", "label": "Active Color", "default": "#00BCD4" },
    { "type": "color", "id": "hover_color", "label": "Hover Color", "default": "#000000" }
  ],
  "blocks": [
    {
      "type": "icon",
      "name": "Icon",
      "settings": [
        { "type": "text", "id": "icon_code", "default": "fa-home", "label": "Icon code" },
        { "type": "url", "id": "icon_link", "label": "Icon Link" },
        { "type": "checkbox", "id": "icon_active", "label": "Icon Active?" }
      ]
    }
  ],
  "presets": [
    {
      "name": "ZHD Icon Bar",
      "blocks": [{ "type": "icon" }]
    }
  ]
}
{% endschema %}

{% javascript %}
  $(function() {
    $("#draggable").draggable();
    $("a, i").disableSelection();
  });

  $(document).ready(function() {
    $('.zhd__icon-bar .icon-bar a').each(function() {
      if (window.location.pathname === $(this).attr('href')) {
        $(this).addClass('icon-active');
      }
    });
  });
{% endjavascript %}
{% endraw %}

Step 2: Enable Font Awesome

This section uses Font Awesome icons (e.g. fa-home, fa-shopping-cart). If your theme doesn’t already have Font Awesome, add this link inside your <head> in theme.liquid:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">

Step 3: Add Icons via Theme Editor

Go to your Theme Customizer → Add Section → ZHD Icon Bar.
Then click “Add Icon” blocks for each icon you want to display.

  • 🏠 fa-home → Link to homepage
  • 🛒 fa-shopping-cart → Link to cart
  • 📞 fa-phone → Link to contact page
  • 📸 fa-instagram → Link to Instagram
Shopify Floating Icon Bar Example
✨ Tip: Turn on “Draggable Bar?” in settings if you want to reposition it while testing your layout.

Step 4: Customize Appearance

In the Theme Editor, you can change:

  • 🎨 Background color
  • ⭐ Icon color
  • 🔥 Hover and active colors
  • 📏 Bar size (Standard or Large)

🎉 Final Result

Once added, your Shopify store will display a beautiful floating icon bar that’s fully customizable and easy to drag. It’s perfect for quick navigation, social media shortcuts, or call-to-action icons.

Written by Zahidul Islam | Shopify Custom Design Tutorials

Back to blog

Leave a comment