Where you can achieve what your competitors can’t

Custom Loading Screen 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 %}

{%- style -%}
  .onhow-studio-section-wrapper-{{ section.settings.onhow_studio_core_logic }} .onhow-studio-loading-logo {
    width: {{ section.settings.onhow_studio_logo_size }}px;
  }
{%- endstyle -%}

<div 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 }};">
  <div class="onhow-studio-loading-screen" data-loading-screen>
    <div class="onhow-studio-loading-container">
      {%- if section.settings.onhow_studio_logo != blank -%}
        {{- section.settings.onhow_studio_logo | image_url: width: 800 | image_tag: class: 'onhow-studio-loading-logo', alt: 'Loading', loading: 'eager' -}}
      {%- endif -%}
    </div>
  </div>
</div>

<style>
  .onhow-studio-section-wrapper-{{ section.settings.onhow_studio_core_logic }} * {
    box-sizing: border-box;
  }

  .onhow-studio-section-wrapper-{{ section.settings.onhow_studio_core_logic }} p,
  .onhow-studio-section-wrapper-{{ section.settings.onhow_studio_core_logic }} h1,
  .onhow-studio-section-wrapper-{{ section.settings.onhow_studio_core_logic }} h2,
  .onhow-studio-section-wrapper-{{ section.settings.onhow_studio_core_logic }} ul {
    margin: 0;
    padding: 0;
  }

  .onhow-studio-section-wrapper-{{ section.settings.onhow_studio_core_logic }} .onhow-studio-loading-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--onhow-studio-bg);
    transition: opacity 800ms ease-out, transform 800ms ease-out;
  }

  .onhow-studio-section-wrapper-{{ section.settings.onhow_studio_core_logic }} .onhow-studio-loading-screen.onhow-studio-loaded {
    opacity: 0;
    transform: scale(1.02);
    pointer-events: none;
  }

  .onhow-studio-section-wrapper-{{ section.settings.onhow_studio_core_logic }} .onhow-studio-loading-screen.onhow-studio-hidden {
    display: none;
  }

  .onhow-studio-section-wrapper-{{ section.settings.onhow_studio_core_logic }} .onhow-studio-loading-container {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .onhow-studio-section-wrapper-{{ section.settings.onhow_studio_core_logic }} .onhow-studio-loading-logo {
    max-width: 90vw;
    height: auto;
    animation: onhow-studio-pulse 2s ease-in-out infinite;
    will-change: transform, opacity;
    transform: translateZ(0);
    backface-visibility: hidden;
  }

  @keyframes onhow-studio-pulse {
    0%, 100% {
      opacity: 0.4;
      transform: scale(0.97) translateZ(0);
    }
    50% {
      opacity: 1;
      transform: scale(1) translateZ(0);
    }
  }
</style>

<script>
  (function() {
    const onhowStudioCredit = atob("RGVzaWduZWQgYnkgT05IT1cgU3R1ZGlvIC0gU3Vic2NyaWJlIQ==");
    console.log(`%c ${onhowStudioCredit}`, 'background: #222; color: #00ff00; padding: 4px; border-radius: 4px;');

    const loader = document.querySelector('[data-loading-screen]');
    if (!loader) return;

    const MIN_DISPLAY_TIME = 600;
    const MAX_DISPLAY_TIME = 3000;
    const FADE_DURATION = 800;

    let startTime = Date.now();
    let hasHidden = false;

    function hideLoader() {
      if (hasHidden) return;
      hasHidden = true;

      const elapsed = Date.now() - startTime;
      const remainingTime = Math.max(0, MIN_DISPLAY_TIME - elapsed);

      setTimeout(() => {
        loader.classList.add('onhow-studio-loaded');

        setTimeout(() => {
          loader.classList.add('onhow-studio-hidden');
        }, FADE_DURATION);
      }, remainingTime);
    }

    if (document.readyState === 'complete') {
      hideLoader();
    } else {
      window.addEventListener('load', hideLoader);
    }

    setTimeout(hideLoader, MAX_DISPLAY_TIME);
  })();
</script>

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

{% schema %}
{
  "name": "Loading Screen",
  "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": "#ffffff"
    },
    {
      "type": "color",
      "id": "onhow_studio_text_color",
      "label": "Text Color",
      "default": "#000000"
    },
    {
      "type": "header",
      "content": "― Logo ―"
    },
    {
      "type": "image_picker",
      "id": "onhow_studio_logo",
      "label": "Logo"
    },
    {
      "type": "range",
      "id": "onhow_studio_logo_size",
      "min": 100,
      "max": 400,
      "step": 10,
      "unit": "px",
      "label": "Logo Size",
      "default": 200
    }
  ],
  "presets": [
    {
      "name": "Loading Screen (By ONHOW Studio)"
    }
  ]
}
{% endschema %}