Where you can achieve what your competitors can’t

Moving Announcement Bar in Shopify

This custom code is completely free to use, but please note it does not include 1-on-1 technical support. If you need a bespoke, done-for-you solution to customize your Shopify store, my team is here to help! Head to my channel homepage and use the link in the trailer to reach out.

{%- comment -%}
<!-- Designed by ONHOW Studio - Anas El Medlaoui -->
{%- endcomment -%}

{%- if section.blocks.size > 0 -%}
{%- assign onhow_studio_mab_id = 'onhow-studio-mab-' | append: section.id -%}
{%- assign onhow_studio_mab_block = section.blocks.first -%}
{%- assign b = onhow_studio_mab_block.settings -%}

{%- liquid
  case b.onhow_studio_icon_svg
    when 'truck'
      assign onhow_studio_mab_svg_d = 'M1 3h15v13H1zM16 8h4l3 3v5h-7V8zM5.5 19a1.5 1.5 0 100-3 1.5 1.5 0 000 3zM18.5 19a1.5 1.5 0 100-3 1.5 1.5 0 000 3z'
    when 'tag'
      assign onhow_studio_mab_svg_d = 'M20.59 13.41l-7.17 7.17a2 2 0 01-2.83 0L2 12V2h10l8.59 8.59a2 2 0 010 2.82zM7 7h.01'
    when 'gift'
      assign onhow_studio_mab_svg_d = 'M20 12v10H4V12M22 7H2v5h20V7zM12 22V7M12 7H7.5a2.5 2.5 0 010-5C11 2 12 7 12 7zM12 7h4.5a2.5 2.5 0 000-5C13 2 12 7 12 7z'
    when 'star'
      assign onhow_studio_mab_svg_d = 'M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z'
    when 'clock'
      assign onhow_studio_mab_svg_d = 'M12 22a10 10 0 100-20 10 10 0 000 20zM12 6v6l4 2'
    when 'lock'
      assign onhow_studio_mab_svg_d = 'M19 11H5a2 2 0 00-2 2v7a2 2 0 002 2h14a2 2 0 002-2v-7a2 2 0 00-2-2zM7 11V7a5 5 0 0110 0v4'
    when 'heart'
      assign onhow_studio_mab_svg_d = 'M20.84 4.61a5.5 5.5 0 00-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 00-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 000-7.78z'
    when 'bolt'
      assign onhow_studio_mab_svg_d = 'M13 2L3 14h9l-1 8 10-12h-9l1-8z'
    when 'globe'
      assign onhow_studio_mab_svg_d = 'M12 22a10 10 0 100-20 10 10 0 000 20zM2 12h20M12 2a15.3 15.3 0 010 20M12 2a15.3 15.3 0 000 20'
    when 'percent'
      assign onhow_studio_mab_svg_d = 'M19 5L5 19M9 6.5a2.5 2.5 0 100-5 2.5 2.5 0 000 5zM15 22.5a2.5 2.5 0 100-5 2.5 2.5 0 000 5z'
    else
      assign onhow_studio_mab_svg_d = ''
  endcase
-%}

<style>
  {{ section.settings.onhow_studio_font | font_face }}

  #{{ onhow_studio_mab_id }} {
    --onhow-studio-mab-bg: {{ section.settings.onhow_studio_bg_color }};
    --onhow-studio-mab-text: {{ section.settings.onhow_studio_text_color }};
    --onhow-studio-mab-link: {{ section.settings.onhow_studio_link_color }};
    --onhow-studio-mab-link-hover: {{ section.settings.onhow_studio_link_hover_color }};
    --onhow-studio-mab-height: {{ section.settings.onhow_studio_bar_height }}px;
    --onhow-studio-mab-font-size: {{ section.settings.onhow_studio_font_size }}px;
    --onhow-studio-mab-font-weight: {{ section.settings.onhow_studio_font_weight }};
    --onhow-studio-mab-spacing: {{ section.settings.onhow_studio_letter_spacing }}em;
    --onhow-studio-mab-transform: {{ section.settings.onhow_studio_text_transform }};
    --onhow-studio-mab-speed: {{ section.settings.onhow_studio_scroll_speed }}s;
    --onhow-studio-mab-gap: {{ section.settings.onhow_studio_item_gap }}px;
    --onhow-studio-mab-border-w: {{ section.settings.onhow_studio_border_width }}px;
    --onhow-studio-mab-border-c: {{ section.settings.onhow_studio_border_color }};
    --onhow-studio-mab-icon-color: {{ b.onhow_studio_icon_color }};
    --onhow-studio-mab-icon-size: {{ b.onhow_studio_icon_size }}px;
  }

  #{{ onhow_studio_mab_id }} *,
  #{{ onhow_studio_mab_id }} *::before,
  #{{ onhow_studio_mab_id }} *::after { box-sizing: border-box; }
  #{{ onhow_studio_mab_id }} p,
  #{{ onhow_studio_mab_id }} h1,
  #{{ onhow_studio_mab_id }} h2,
  #{{ onhow_studio_mab_id }} h3,
  #{{ onhow_studio_mab_id }} ul { margin: 0; padding: 0; }

  #{{ onhow_studio_mab_id }} {
    position: relative;
    width: 100%;
    background: var(--onhow-studio-mab-bg);
    border-{{ section.settings.onhow_studio_border_position }}: var(--onhow-studio-mab-border-w) solid var(--onhow-studio-mab-border-c);
    font-family: {{ section.settings.onhow_studio_font.family }}, {{ section.settings.onhow_studio_font.fallback_families }};
    overflow: hidden;
    z-index: 200;
  }

  #{{ onhow_studio_mab_id }} .onhow-studio-mab-track {
    display: flex;
    align-items: center;
    height: var(--onhow-studio-mab-height);
    overflow: hidden;
  }

  #{{ onhow_studio_mab_id }} .onhow-studio-mab-marquee {
    flex: 1;
    overflow: hidden;
    height: 100%;
    display: flex;
    align-items: center;
  }

  #{{ onhow_studio_mab_id }} .onhow-studio-mab-marquee-track {
    display: flex;
    align-items: center;
    white-space: nowrap;
    animation: onhow-studio-mab-scroll-{{ section.id }} var(--onhow-studio-mab-speed) linear infinite;
    gap: var(--onhow-studio-mab-gap);
  }

  {%- if section.settings.onhow_studio_pause_hover -%}
  #{{ onhow_studio_mab_id }} .onhow-studio-mab-marquee-track:hover { animation-play-state: paused; }
  {%- endif -%}

  @keyframes onhow-studio-mab-scroll-{{ section.id }} {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
  }

  #{{ onhow_studio_mab_id }} .onhow-studio-mab-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0 calc(var(--onhow-studio-mab-gap) / 2);
    text-decoration: none;
    color: var(--onhow-studio-mab-text);
  }

  #{{ onhow_studio_mab_id }} .onhow-studio-mab-text {
    color: var(--onhow-studio-mab-text);
    font-family: {{ section.settings.onhow_studio_font.family }}, {{ section.settings.onhow_studio_font.fallback_families }};
    font-size: var(--onhow-studio-mab-font-size);
    font-weight: var(--onhow-studio-mab-font-weight);
    letter-spacing: var(--onhow-studio-mab-spacing);
    text-transform: var(--onhow-studio-mab-transform);
    line-height: 1.4;
  }

  #{{ onhow_studio_mab_id }} .onhow-studio-mab-text p { margin: 0; }

  #{{ onhow_studio_mab_id }} .onhow-studio-mab-text a {
    color: var(--onhow-studio-mab-link);
    text-decoration: underline;
    transition: color 0.2s;
  }

  #{{ onhow_studio_mab_id }} .onhow-studio-mab-text a:hover { color: var(--onhow-studio-mab-link-hover); }

  #{{ onhow_studio_mab_id }} .onhow-studio-mab-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--onhow-studio-mab-icon-color);
    width: var(--onhow-studio-mab-icon-size);
    height: var(--onhow-studio-mab-icon-size);
  }

  #{{ onhow_studio_mab_id }} .onhow-studio-mab-icon > span {
    font-size: var(--onhow-studio-mab-icon-size);
    line-height: 1;
  }

  #{{ onhow_studio_mab_id }} .onhow-studio-mab-icon svg {
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    display: block;
    width: 100%;
    height: 100%;
  }

  #{{ onhow_studio_mab_id }} .onhow-studio-mab-icon img {
    object-fit: contain;
    display: block;
    width: 100%;
    height: 100%;
  }

  @media (max-width: 749px) {
    #{{ onhow_studio_mab_id }} {
      --onhow-studio-mab-font-size: {{ section.settings.onhow_studio_font_size_mobile }}px;
      --onhow-studio-mab-height: {{ section.settings.onhow_studio_bar_height_mobile }}px;
    }
    {%- if section.settings.onhow_studio_hide_mobile -%}
    #{{ onhow_studio_mab_id }} { display: none !important; }
    {%- endif -%}
  }

  @media (min-width: 750px) {
    {%- if section.settings.onhow_studio_hide_desktop -%}
    #{{ onhow_studio_mab_id }} { display: none !important; }
    {%- endif -%}
  }
</style>

<div
  id="{{ onhow_studio_mab_id }}"
  class="onhow-studio-section-wrapper-{{ section.settings.onhow_studio_core_logic }}"
  style="--onhow-studio-bg: {{ section.settings.onhow_studio_bg_color }}; --onhow-studio-text: {{ section.settings.onhow_studio_text_color }};"
  data-section-id="{{ section.id }}"
  aria-label="Announcement"
  role="region"
>
  <div class="onhow-studio-mab-track">
    <div class="onhow-studio-mab-marquee">
      <div class="onhow-studio-mab-marquee-track" data-marquee>
        {%- for i in (1..2) -%}
          {%- if b.onhow_studio_link != blank -%}
            <a href="{{ b.onhow_studio_link }}" class="onhow-studio-mab-item" {{ onhow_studio_mab_block.shopify_attributes }}>
          {%- else -%}
            <span class="onhow-studio-mab-item" {{ onhow_studio_mab_block.shopify_attributes }}>
          {%- endif -%}

              {%- if b.onhow_studio_icon_type != 'none' -%}
                <span class="onhow-studio-mab-icon" aria-hidden="true">
                  {%- if b.onhow_studio_icon_type == 'emoji' -%}
                    <span>{{ b.onhow_studio_icon_emoji }}</span>
                  {%- elsif b.onhow_studio_icon_type == 'image' and b.onhow_studio_icon_image -%}
                    {{ b.onhow_studio_icon_image | image_url: width: 72 | image_tag: loading: 'lazy' }}
                  {%- elsif b.onhow_studio_icon_type == 'svg' and onhow_studio_mab_svg_d != '' -%}
                    <svg viewBox="0 0 24 24" aria-hidden="true"><path d="{{ onhow_studio_mab_svg_d }}"/></svg>
                  {%- endif -%}
                </span>
              {%- endif -%}

              <span class="onhow-studio-mab-text">{{ b.onhow_studio_text }}</span>

          {%- if b.onhow_studio_link != blank -%}</a>{%- else -%}</span>{%- endif -%}
        {%- endfor -%}
      </div>
    </div>
  </div>
</div>

<script>
(function() {
  'use strict';

  var onhowStudioCredit = atob('RGVzaWduZWQgYnkgT05IT1cgU3R1ZGlvIC0gU3Vic2NyaWJlIQ==');
  console.log('%c ' + onhowStudioCredit, 'background: #222; color: #00ff00; padding: 4px; border-radius: 4px;');

  function initBar(barId) {
    var bar = document.getElementById(barId);
    if (!bar) return;
    initMarquee(bar);
  }

  function initMarquee(bar) {
    var track = bar.querySelector('[data-marquee]');
    if (!track) return;
    var first = track.querySelector('.onhow-studio-mab-item');
    if (!first) return;
    var gap = parseFloat(getComputedStyle(track).columnGap) || 0;
    var itemW = first.offsetWidth + gap;
    if (itemW <= 0) return;
    var needed = Math.ceil(window.innerWidth / itemW) + 1;
    if (needed < 2) needed = 2;
    var template = first.outerHTML;
    var html = '';
    for (var i = 0; i < needed; i++) html += template;
    track.innerHTML = html + html;
  }

  var BAR_ID = '{{ onhow_studio_mab_id }}';
  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', function() { initBar(BAR_ID); });
  } else {
    initBar(BAR_ID);
  }

  document.addEventListener('shopify:section:load', function(e) {
    if (e.detail.sectionId === '{{ section.id }}') initBar(BAR_ID);
  });
})();
</script>

{%- endif -%}

{%- comment -%}
<!-- Designed by ONHOW Studio - Anas El Medlaoui -->
{%- endcomment -%}

{% schema %}
{
  "name": "Moving Announcement Bar",
  "tag": "div",
  "class": "onhow-studio-mab-section",
  "limit": 1,
  "settings": [
    {
      "type": "header",
      "content": "✨ Built by ONHOW Studio"
    },
    {
      "type": "paragraph",
      "content": "Get free sections & tutorials at youtube.com/@ONHOWStudio"
    },
    {
      "type": "text",
      "id": "onhow_studio_core_logic",
      "label": "Section Architecture (Do Not Edit)",
      "default": "built-by-onhow-studio",
      "info": "Modifying this will break the section's CSS layout."
    },
    {
      "type": "header",
      "content": "― Core Settings ―"
    },
    {
      "type": "color",
      "id": "onhow_studio_bg_color",
      "label": "Background Color",
      "default": "#DFDFDF"
    },
    {
      "type": "color",
      "id": "onhow_studio_text_color",
      "label": "Text Color",
      "default": "#000000"
    },

    {
      "type": "header",
      "content": "― Link Styling ―"
    },
    {
      "type": "color",
      "id": "onhow_studio_link_color",
      "label": "Link Color",
      "default": "#000000"
    },
    {
      "type": "color",
      "id": "onhow_studio_link_hover_color",
      "label": "Link Hover Color",
      "default": "#555555"
    },

    {
      "type": "header",
      "content": "― Dimensions ―"
    },
    {
      "type": "range",
      "id": "onhow_studio_bar_height",
      "label": "Bar Height",
      "min": 30,
      "max": 100,
      "step": 2,
      "unit": "px",
      "default": 46
    },
    {
      "type": "range",
      "id": "onhow_studio_bar_height_mobile",
      "label": "Bar Height (Mobile)",
      "min": 28,
      "max": 80,
      "step": 2,
      "unit": "px",
      "default": 40
    },

    {
      "type": "header",
      "content": "― Typography ―"
    },
    {
      "type": "font_picker",
      "id": "onhow_studio_font",
      "label": "Font Family",
      "default": "assistant_n4"
    },
    {
      "type": "range",
      "id": "onhow_studio_font_size",
      "label": "Font Size",
      "min": 10,
      "max": 24,
      "step": 1,
      "unit": "px",
      "default": 13
    },
    {
      "type": "range",
      "id": "onhow_studio_font_size_mobile",
      "label": "Font Size (Mobile)",
      "min": 10,
      "max": 20,
      "step": 1,
      "unit": "px",
      "default": 12
    },
    {
      "type": "select",
      "id": "onhow_studio_font_weight",
      "label": "Font Weight",
      "default": "500",
      "options": [
        { "value": "300", "label": "Light" },
        { "value": "400", "label": "Normal" },
        { "value": "500", "label": "Medium" },
        { "value": "600", "label": "Semi-bold" },
        { "value": "700", "label": "Bold" }
      ]
    },
    {
      "type": "select",
      "id": "onhow_studio_text_transform",
      "label": "Text Transform",
      "default": "none",
      "options": [
        { "value": "none", "label": "None" },
        { "value": "uppercase", "label": "Uppercase" },
        { "value": "lowercase", "label": "Lowercase" },
        { "value": "capitalize", "label": "Capitalize" }
      ]
    },
    {
      "type": "range",
      "id": "onhow_studio_letter_spacing",
      "label": "Letter Spacing",
      "min": 0.0,
      "max": 0.3,
      "step": 0.1,
      "unit": "em",
      "default": 0.0
    },

    {
      "type": "header",
      "content": "― Scroll Behavior ―"
    },
    {
      "type": "range",
      "id": "onhow_studio_scroll_speed",
      "label": "Scroll Speed",
      "min": 5,
      "max": 80,
      "step": 1,
      "unit": "s",
      "default": 20
    },
    {
      "type": "range",
      "id": "onhow_studio_item_gap",
      "label": "Item Spacing",
      "min": 10,
      "max": 500,
      "step": 5,
      "unit": "px",
      "default": 60
    },
    {
      "type": "checkbox",
      "id": "onhow_studio_pause_hover",
      "label": "Pause on Hover",
      "default": true
    },

    {
      "type": "header",
      "content": "― Border ―"
    },
    {
      "type": "range",
      "id": "onhow_studio_border_width",
      "label": "Width",
      "min": 0,
      "max": 6,
      "step": 1,
      "unit": "px",
      "default": 0
    },
    {
      "type": "color",
      "id": "onhow_studio_border_color",
      "label": "Color",
      "default": "#333333"
    },
    {
      "type": "select",
      "id": "onhow_studio_border_position",
      "label": "Position",
      "default": "bottom",
      "options": [
        { "value": "top", "label": "Top" },
        { "value": "bottom", "label": "Bottom" }
      ]
    },

    {
      "type": "header",
      "content": "― Visibility ―"
    },
    {
      "type": "checkbox",
      "id": "onhow_studio_hide_mobile",
      "label": "Hide on Mobile",
      "default": false
    },
    {
      "type": "checkbox",
      "id": "onhow_studio_hide_desktop",
      "label": "Hide on Desktop",
      "default": false
    }
  ],

  "blocks": [
    {
      "type": "announcement",
      "name": "Announcement",
      "limit": 1,
      "settings": [
        {
          "type": "header",
          "content": "― Content ―"
        },
        {
          "type": "richtext",
          "id": "onhow_studio_text",
          "label": "Text",
          "default": "<p>Free gift wrapping on all orders</p>"
        },
        {
          "type": "url",
          "id": "onhow_studio_link",
          "label": "Link"
        },

        {
          "type": "header",
          "content": "― Icon ―"
        },
        {
          "type": "select",
          "id": "onhow_studio_icon_type",
          "label": "Type",
          "default": "svg",
          "options": [
            { "value": "none", "label": "None" },
            { "value": "emoji", "label": "Emoji or Character" },
            { "value": "image", "label": "Custom Image" },
            { "value": "svg", "label": "Built-in Icon" }
          ]
        },
        {
          "type": "text",
          "id": "onhow_studio_icon_emoji",
          "label": "Emoji or Character"
        },
        {
          "type": "image_picker",
          "id": "onhow_studio_icon_image",
          "label": "Custom Image"
        },
        {
          "type": "select",
          "id": "onhow_studio_icon_svg",
          "label": "Built-in Icon",
          "default": "gift",
          "options": [
            { "value": "truck", "label": "Truck (Shipping)" },
            { "value": "tag", "label": "Tag (Sale)" },
            { "value": "gift", "label": "Gift" },
            { "value": "star", "label": "Star" },
            { "value": "clock", "label": "Clock" },
            { "value": "lock", "label": "Lock (Secure)" },
            { "value": "heart", "label": "Heart" },
            { "value": "bolt", "label": "Lightning (Flash)" },
            { "value": "globe", "label": "Globe (Worldwide)" },
            { "value": "percent", "label": "Percent (Discount)" }
          ]
        },
        {
          "type": "color",
          "id": "onhow_studio_icon_color",
          "label": "Color",
          "default": "#000000"
        },
        {
          "type": "range",
          "id": "onhow_studio_icon_size",
          "label": "Size",
          "min": 12,
          "max": 36,
          "step": 1,
          "unit": "px",
          "default": 16
        }
      ]
    }
  ],

  "presets": [
    {
      "name": "Moving Announcement Bar (By ONHOW Studio)",
      "blocks": [
        {
          "type": "announcement",
          "settings": {
            "onhow_studio_text": "<p>Free gift wrapping on all orders</p>",
            "onhow_studio_icon_type": "svg",
            "onhow_studio_icon_svg": "gift",
            "onhow_studio_icon_color": "#000000"
          }
        }
      ]
    }
  ]
}
{% endschema %}