How to make your Shopify header Transparent

{% comment %}
  ============================================================
  Transparent Header -- by EcomRanks
  https://www.youtube.com/@EcomRanks
  Fiverr: https://fvrr.co/3BsbtyA
  ============================================================
{% endcomment %}

{%- assign s = section.settings -%}

{%- if s.enable_transparent -%}

<style>
  @media screen and (min-width: 750px) {
    .section-header::after,
    .section-header::before,
    .section-header > *::after,
    .section-header > *::before,
    .section-header header::after,
    .section-header header::before,
    .section-header .header-wrapper::after,
    .section-header .header-wrapper::before {
      display: none !important;
      border: none !important;
      height: 0 !important;
    }
  }
</style>

<script>
  (function() {
    'use strict';
    var TEXT_COLOR = {{ s.text_color | json }};
    var INVERT_LOGO = {{ s.invert_logo | json }};

    function getHeaderSection() {
      return document.querySelector('.section-header');
    }

    function applyTransparent() {
      if (window.innerWidth < 750) return;
      var section = getHeaderSection();
      if (!section) return;

      var bgEls = [section];
      section.querySelectorAll(
        'sticky-header, .header-wrapper, header,'+
        ' .header, [class*="color-"], .gradient'
      ).forEach(function(el) { bgEls.push(el); });
      if (section.firstElementChild)
        bgEls.push(section.firstElementChild);

      bgEls.forEach(function(el) {
        el.style.setProperty('background',
          'transparent', 'important');
        el.style.setProperty('background-color',
          'transparent', 'important');
        el.style.setProperty('background-image',
          'none', 'important');
        el.style.setProperty('box-shadow',
          'none', 'important');
        el.style.setProperty('border',
          'none', 'important');
        el.style.setProperty('border-bottom',
          'none', 'important');
      });

      /* Text and icon colors */
      section.querySelectorAll(
        'a, button, summary, span, p, h1, h2'
      ).forEach(function(el) {
        el.style.setProperty('color',
          TEXT_COLOR, 'important');
      });

      section.querySelectorAll('svg')
        .forEach(function(el) {
        el.style.setProperty('color',
          TEXT_COLOR, 'important');
        el.style.setProperty('fill',
          TEXT_COLOR, 'important');
      });
      section.querySelectorAll('svg path')
        .forEach(function(el) {
        el.style.setProperty('stroke',
          TEXT_COLOR, 'important');
      });

      if (INVERT_LOGO) {
        section.querySelectorAll(
          '.header__heading img,'+
          ' .header__heading-logo-wrapper img'
        ).forEach(function(el) {
          el.style.setProperty('filter',
            'brightness(0) invert(1)', 'important');
        });
      }

      var h = section.offsetHeight;
      if (h > 0) {
        section.style.setProperty('margin-bottom',
          (-h) + 'px', 'important');
      }
      section.style.setProperty('z-index',
        '4', 'important');
      section.style.setProperty('position',
        'relative', 'important');

      var mainFirst = document.querySelector(
        '#MainContent > .shopify-section:first-child');
      if (mainFirst && h > 0) {
        mainFirst.style.setProperty('margin-top',
          (-h) + 'px', 'important');
      }
    }

    function clearTransparent() { /* mobile cleanup */ }
    function run() {
      if (window.innerWidth >= 750) applyTransparent();
      else clearTransparent();
    }

    if (document.readyState === 'loading')
      document.addEventListener('DOMContentLoaded', run);
    else run();
    window.addEventListener('load', function() {
      setTimeout(run, 100);
    });
    /* + MutationObserver for live customizer */
  })();
</script>

{%- endif -%}

{% schema %}
{
  "name": "Header Style",
  "settings": [
    { "type": "checkbox",
      "id": "enable_transparent",
      "label": "Enable Transparent Header",
      "default": true },
    { "type": "color",
      "id": "text_color",
      "label": "Text + Icon Color",
      "default": "#ffffff" },
    { "type": "checkbox",
      "id": "invert_logo",
      "label": "Invert logo to white",
      "default": true },
    { "type": "checkbox",
      "id": "show_credit",
      "label": "Show credit link",
      "default": true }
  ],
  "presets": [
    { "name": "Header Style" }
  ]
}
{% endschema %}