Where you can achieve what your competitors can’t

New 3D Intro Section on 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 %}

{%- assign onhow_studio_section_id = section.id | replace: '-', '_' -%}
{%- assign onhow_studio_desktop_vid = section.settings.onhow_studio_desktop_video -%}
{%- assign onhow_studio_mobile_vid = section.settings.onhow_studio_mobile_video -%}
{%- assign onhow_studio_has_video = false -%}
{%- if onhow_studio_desktop_vid != blank or onhow_studio_mobile_vid != blank -%}
  {%- assign onhow_studio_has_video = true -%}
{%- endif -%}

{%- if section.settings.onhow_studio_enable_section and onhow_studio_has_video -%}
  <div id="onhow-studio-video-intro-{{ section.id }}"
       class="onhow-studio-section-wrapper-{{ section.settings.onhow_studio_core_logic }}"
       data-session-type="{{ section.settings.onhow_studio_session_type }}"
       data-auto-close-delay="{{ section.settings.onhow_studio_auto_close_delay }}"
       style="--onhow-studio-bg: {{ section.settings.onhow_studio_bg_color }};
              --onhow-studio-text: {{ section.settings.onhow_studio_text_color }};
              --onhow-studio-overlay-opacity: {{ section.settings.onhow_studio_overlay_opacity | divided_by: 100.0 }};
              --onhow-studio-text-size: {{ section.settings.onhow_studio_text_size }}px;
              --onhow-studio-logo-size: {{ section.settings.onhow_studio_logo_size }}px;">

    <div class="onhow-studio-video-container">

      {%- if onhow_studio_desktop_vid != blank -%}
        <video class="onhow-studio-desktop-video onhow-studio-video-element" muted playsinline preload="auto">
          {%- for source in onhow_studio_desktop_vid.sources -%}
            <source src="{{ source.url }}" type="{{ source.mime_type }}">
          {%- endfor -%}
        </video>
      {%- endif -%}

      {%- if onhow_studio_mobile_vid != blank -%}
        <video class="onhow-studio-mobile-video onhow-studio-video-element" muted playsinline preload="auto">
          {%- for source in onhow_studio_mobile_vid.sources -%}
            <source src="{{ source.url }}" type="{{ source.mime_type }}">
          {%- endfor -%}
        </video>
      {%- endif -%}

      <div class="onhow-studio-video-overlay"></div>

      <div class="onhow-studio-content-overlay onhow-studio-position-{{ section.settings.onhow_studio_content_position }}">
        {%- if section.settings.onhow_studio_overlay_text != blank -%}
          <div class="onhow-studio-text-content">
            {{ section.settings.onhow_studio_overlay_text }}
          </div>
        {%- endif -%}

        {%- if section.settings.onhow_studio_overlay_logo != blank -%}
          <div class="onhow-studio-logo-content">
            {{ section.settings.onhow_studio_overlay_logo | image_url: width: 500 | image_tag: alt: 'Video Overlay Logo', loading: 'eager', class: 'onhow-studio-logo-img' }}
          </div>
        {%- else -%}
          <div class="onhow-studio-logo-content">
            {{ 'image' | placeholder_svg_tag: 'onhow-studio-logo-placeholder' }}
          </div>
        {%- endif -%}
      </div>

      <button type="button"
              class="onhow-studio-skip-button onhow-studio-skip-{{ section.settings.onhow_studio_skip_position }}"
              aria-label="{{ section.settings.onhow_studio_skip_text | default: 'Skip Intro' }}"
              onclick="onhowStudioCloseVideo_{{ onhow_studio_section_id }}()">
        {{ section.settings.onhow_studio_skip_text | default: 'Skip Intro' }}
      </button>

    </div>
  </div>

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

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

    #shopify-section-{{ section.id }} .onhow-studio-section-wrapper-{{ section.settings.onhow_studio_core_logic }} {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100vh;
      z-index: 999999;
      background: var(--onhow-studio-bg, #000000);
      opacity: 1;
      visibility: visible;
      transition: opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
      will-change: opacity;
    }

    #shopify-section-{{ section.id }} .onhow-studio-section-wrapper-{{ section.settings.onhow_studio_core_logic }}.onhow-studio-fade-out {
      opacity: 0;
      pointer-events: none;
    }

    #shopify-section-{{ section.id }} .onhow-studio-section-wrapper-{{ section.settings.onhow_studio_core_logic }}.onhow-studio-hidden {
      display: none;
    }

    #shopify-section-{{ section.id }} .onhow-studio-video-container {
      position: relative;
      width: 100%;
      height: 100%;
      cursor: pointer;
      background: #000;
    }

    #shopify-section-{{ section.id }} .onhow-studio-video-element {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      z-index: 1;
    }

    #shopify-section-{{ section.id }} .onhow-studio-desktop-video {
      display: block;
    }

    #shopify-section-{{ section.id }} .onhow-studio-mobile-video {
      display: none;
    }

    #shopify-section-{{ section.id }} .onhow-studio-video-overlay {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, var(--onhow-studio-overlay-opacity));
      z-index: 2;
      pointer-events: none;
    }

    #shopify-section-{{ section.id }} .onhow-studio-content-overlay {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      z-index: 3;
      text-align: center;
      pointer-events: none;
      max-width: 90%;
    }

    #shopify-section-{{ section.id }} .onhow-studio-position-top {
      top: 20%;
      transform: translateX(-50%) translateY(-50%);
    }

    #shopify-section-{{ section.id }} .onhow-studio-position-center {
      top: 50%;
      transform: translateX(-50%) translateY(-50%);
    }

    #shopify-section-{{ section.id }} .onhow-studio-position-bottom {
      bottom: 20%;
      transform: translateX(-50%) translateY(50%);
    }

    #shopify-section-{{ section.id }} .onhow-studio-text-content {
      color: var(--onhow-studio-text, #ffffff);
      font-size: var(--onhow-studio-text-size);
      font-weight: 700;
      text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
      line-height: 1.2;
      margin-bottom: 1rem;
      font-family: var(--font-heading-family);
    }

    #shopify-section-{{ section.id }} .onhow-studio-logo-content {
      display: flex;
      justify-content: center;
      align-items: center;
    }

    #shopify-section-{{ section.id }} .onhow-studio-logo-img {
      max-width: var(--onhow-studio-logo-size);
      height: auto;
      filter: drop-shadow(2px 2px 8px rgba(0, 0, 0, 0.6));
    }

    #shopify-section-{{ section.id }} .onhow-studio-logo-placeholder {
      max-width: var(--onhow-studio-logo-size);
      height: auto;
    }

    #shopify-section-{{ section.id }} .onhow-studio-skip-button {
      position: absolute;
      background: rgba({{ section.settings.onhow_studio_skip_bg_color.red }}, {{ section.settings.onhow_studio_skip_bg_color.green }}, {{ section.settings.onhow_studio_skip_bg_color.blue }}, 0.85);
      color: {{ section.settings.onhow_studio_skip_text_color }};
      border: 1px solid rgba(255, 255, 255, 0.2);
      padding: 0.75rem 1.5rem;
      border-radius: 2rem;
      font-size: 0.875rem;
      font-weight: 600;
      font-family: var(--font-body-family);
      cursor: pointer;
      z-index: 4;
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
      white-space: nowrap;
      opacity: 0;
      animation: onhowStudioSkipFadeIn_{{ section.id | replace: '-', '_' }} 0.4s ease forwards;
      animation-delay: 2s;
    }

    @keyframes onhowStudioSkipFadeIn_{{ section.id | replace: '-', '_' }} {
      from { opacity: 0; transform: translateY(4px); }
      to { opacity: 1; transform: translateY(0); }
    }

    #shopify-section-{{ section.id }} .onhow-studio-skip-button:hover {
      background: rgba({{ section.settings.onhow_studio_skip_bg_color.red }}, {{ section.settings.onhow_studio_skip_bg_color.green }}, {{ section.settings.onhow_studio_skip_bg_color.blue }}, 1);
      transform: translateY(-2px) scale(1.02);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    }

    #shopify-section-{{ section.id }} .onhow-studio-skip-button:active {
      transform: translateY(0) scale(0.98);
    }

    #shopify-section-{{ section.id }} .onhow-studio-skip-top-right {
      top: 2rem;
      right: 2rem;
    }

    #shopify-section-{{ section.id }} .onhow-studio-skip-top-left {
      top: 2rem;
      left: 2rem;
    }

    #shopify-section-{{ section.id }} .onhow-studio-skip-bottom-right {
      bottom: 2rem;
      right: 2rem;
    }

    #shopify-section-{{ section.id }} .onhow-studio-skip-bottom-left {
      bottom: 2rem;
      left: 2rem;
    }

    #shopify-section-{{ section.id }} .onhow-studio-skip-bottom-center {
      bottom: 2rem;
      left: 50%;
      transform: translateX(-50%);
    }

    body.onhow-studio-video-playing {
      overflow: hidden;
      height: 100vh;
    }

    @media (max-width: 768px) {
      #shopify-section-{{ section.id }} .onhow-studio-desktop-video {
        display: none;
      }

      #shopify-section-{{ section.id }} .onhow-studio-mobile-video {
        display: block;
      }

      #shopify-section-{{ section.id }} .onhow-studio-skip-button {
        padding: calc(0.75rem * 0.75) calc(1.5rem * 0.75);
        font-size: 0.8125rem;
      }

      #shopify-section-{{ section.id }} .onhow-studio-skip-top-right,
      #shopify-section-{{ section.id }} .onhow-studio-skip-top-left {
        top: 1rem;
      }

      #shopify-section-{{ section.id }} .onhow-studio-skip-top-right {
        right: 1rem;
      }

      #shopify-section-{{ section.id }} .onhow-studio-skip-top-left {
        left: 1rem;
      }

      #shopify-section-{{ section.id }} .onhow-studio-skip-bottom-right,
      #shopify-section-{{ section.id }} .onhow-studio-skip-bottom-left,
      #shopify-section-{{ section.id }} .onhow-studio-skip-bottom-center {
        bottom: 1rem;
      }

      #shopify-section-{{ section.id }} .onhow-studio-skip-bottom-right {
        right: 1rem;
      }

      #shopify-section-{{ section.id }} .onhow-studio-skip-bottom-left {
        left: 1rem;
      }

      #shopify-section-{{ section.id }} .onhow-studio-text-content {
        font-size: calc(var(--onhow-studio-text-size) * 0.8);
      }

      #shopify-section-{{ section.id }} .onhow-studio-logo-img,
      #shopify-section-{{ section.id }} .onhow-studio-logo-placeholder {
        max-width: calc(var(--onhow-studio-logo-size) * 0.8);
      }
    }

    @media (prefers-reduced-motion: reduce) {
      #shopify-section-{{ section.id }} .onhow-studio-section-wrapper-{{ section.settings.onhow_studio_core_logic }},
      #shopify-section-{{ section.id }} .onhow-studio-skip-button {
        transition: none;
        animation: none;
        opacity: 1;
      }
    }
  </style>

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

      var onhow_studio_root_{{ onhow_studio_section_id }} = document.querySelector('#shopify-section-{{ section.id }}');
      var onhow_studio_section_{{ onhow_studio_section_id }} = onhow_studio_root_{{ onhow_studio_section_id }}?.querySelector('#onhow-studio-video-intro-{{ section.id }}');
      var onhow_studio_container_{{ onhow_studio_section_id }} = onhow_studio_section_{{ onhow_studio_section_id }}?.querySelector('.onhow-studio-video-container');
      var onhow_studio_desktop_{{ onhow_studio_section_id }} = onhow_studio_section_{{ onhow_studio_section_id }}?.querySelector('.onhow-studio-desktop-video');
      var onhow_studio_mobile_{{ onhow_studio_section_id }} = onhow_studio_section_{{ onhow_studio_section_id }}?.querySelector('.onhow-studio-mobile-video');

      var onhow_studio_current_{{ onhow_studio_section_id }} = null;
      var onhow_studio_playing_{{ onhow_studio_section_id }} = false;
      var onhow_studio_timer_{{ onhow_studio_section_id }} = null;

      function onhowStudioGetActiveVideo_{{ onhow_studio_section_id }}() {
        var isMobile = window.innerWidth <= 768;
        var preferred = isMobile ? onhow_studio_mobile_{{ onhow_studio_section_id }} : onhow_studio_desktop_{{ onhow_studio_section_id }};
        return preferred || onhow_studio_desktop_{{ onhow_studio_section_id }} || onhow_studio_mobile_{{ onhow_studio_section_id }};
      }

      function onhowStudioCheckSession_{{ onhow_studio_section_id }}() {
        var sessionType = onhow_studio_section_{{ onhow_studio_section_id }}?.dataset.sessionType;
        var sessionKey = 'onhow_studio_video_played_{{ onhow_studio_section_id }}';
        if (sessionType === 'once' && sessionStorage.getItem(sessionKey)) {
          onhowStudioCloseVideo_{{ onhow_studio_section_id }}(true);
          return false;
        }
        return true;
      }

      function onhowStudioStartTimer_{{ onhow_studio_section_id }}() {
        var delay = parseInt(onhow_studio_section_{{ onhow_studio_section_id }}?.dataset.autoCloseDelay) || 0;
        if (delay > 0) {
          onhow_studio_timer_{{ onhow_studio_section_id }} = setTimeout(function() {
            onhowStudioCloseVideo_{{ onhow_studio_section_id }}();
          }, delay * 1000);
        }
      }

      function onhowStudioPlayVideo_{{ onhow_studio_section_id }}() {
        if (!onhow_studio_current_{{ onhow_studio_section_id }} || onhow_studio_playing_{{ onhow_studio_section_id }}) return;
        var playPromise = onhow_studio_current_{{ onhow_studio_section_id }}.play();
        if (playPromise !== undefined) {
          playPromise.then(function() {
            onhow_studio_playing_{{ onhow_studio_section_id }} = true;
            document.body.classList.add('onhow-studio-video-playing');
            if (onhow_studio_timer_{{ onhow_studio_section_id }}) {
              clearTimeout(onhow_studio_timer_{{ onhow_studio_section_id }});
            }
          }).catch(function() {});
        }
      }

      window.onhowStudioCloseVideo_{{ onhow_studio_section_id }} = function(immediate) {
        if (onhow_studio_timer_{{ onhow_studio_section_id }}) {
          clearTimeout(onhow_studio_timer_{{ onhow_studio_section_id }});
        }
        document.body.classList.remove('onhow-studio-video-playing');
        var sessionType = onhow_studio_section_{{ onhow_studio_section_id }}?.dataset.sessionType;
        if (sessionType === 'once') {
          sessionStorage.setItem('onhow_studio_video_played_{{ onhow_studio_section_id }}', 'true');
        }
        if (immediate) {
          onhow_studio_section_{{ onhow_studio_section_id }}.style.display = 'none';
          return;
        }
        onhow_studio_section_{{ onhow_studio_section_id }}.classList.add('onhow-studio-fade-out');
        setTimeout(function() {
          onhow_studio_section_{{ onhow_studio_section_id }}.style.display = 'none';
        }, 800);
      };

      function onhowStudioInit_{{ onhow_studio_section_id }}() {
        if (!onhow_studio_section_{{ onhow_studio_section_id }} || !onhowStudioCheckSession_{{ onhow_studio_section_id }}()) return;
        onhow_studio_current_{{ onhow_studio_section_id }} = onhowStudioGetActiveVideo_{{ onhow_studio_section_id }}();
        if (!onhow_studio_current_{{ onhow_studio_section_id }}) {
          onhowStudioCloseVideo_{{ onhow_studio_section_id }}(true);
          return;
        }
        document.body.classList.add('onhow-studio-video-playing');
        onhow_studio_current_{{ onhow_studio_section_id }}.addEventListener('ended', function() {
          onhowStudioCloseVideo_{{ onhow_studio_section_id }}();
        });
        if (onhow_studio_container_{{ onhow_studio_section_id }}) {
          onhow_studio_container_{{ onhow_studio_section_id }}.addEventListener('click', function() {
            onhowStudioPlayVideo_{{ onhow_studio_section_id }}();
          });
        }
        onhowStudioStartTimer_{{ onhow_studio_section_id }}();
        onhowStudioPlayVideo_{{ onhow_studio_section_id }}();
        window.addEventListener('resize', function() {
          var newVideo = onhowStudioGetActiveVideo_{{ onhow_studio_section_id }}();
          if (newVideo !== onhow_studio_current_{{ onhow_studio_section_id }}) {
            onhow_studio_current_{{ onhow_studio_section_id }} = newVideo;
            onhow_studio_playing_{{ onhow_studio_section_id }} = false;
          }
        });
      }

      if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', onhowStudioInit_{{ onhow_studio_section_id }});
      } else {
        onhowStudioInit_{{ onhow_studio_section_id }}();
      }
    })();
  </script>
{%- endif -%}

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

{% schema %}
{
  "name": "OnHOW 3D Intro",
  "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": "checkbox",
      "id": "onhow_studio_enable_section",
      "label": "Enable Intro Video",
      "default": true
    },
    {
      "type": "color",
      "id": "onhow_studio_bg_color",
      "label": "Background Color",
      "default": "#000000"
    },
    {
      "type": "color",
      "id": "onhow_studio_text_color",
      "label": "Text Color",
      "default": "#ffffff"
    },
    {
      "type": "header",
      "content": "― Video Sources ―"
    },
    {
      "type": "video",
      "id": "onhow_studio_desktop_video",
      "label": "Desktop Video"
    },
    {
      "type": "video",
      "id": "onhow_studio_mobile_video",
      "label": "Mobile Video"
    },
    {
      "type": "header",
      "content": "― Text Overlay ―"
    },
    {
      "type": "textarea",
      "id": "onhow_studio_overlay_text",
      "label": "Overlay Text"
    },
    {
      "type": "range",
      "id": "onhow_studio_text_size",
      "min": 24,
      "max": 120,
      "step": 2,
      "unit": "px",
      "label": "Text Size",
      "default": 48
    },
    {
      "type": "header",
      "content": "― Logo Overlay ―"
    },
    {
      "type": "image_picker",
      "id": "onhow_studio_overlay_logo",
      "label": "Overlay Logo"
    },
    {
      "type": "range",
      "id": "onhow_studio_logo_size",
      "min": 50,
      "max": 500,
      "step": 10,
      "unit": "px",
      "label": "Logo Size",
      "default": 200
    },
    {
      "type": "header",
      "content": "― Content Position ―"
    },
    {
      "type": "select",
      "id": "onhow_studio_content_position",
      "label": "Content Position",
      "options": [
        { "value": "top", "label": "Top Center" },
        { "value": "center", "label": "Center Center" },
        { "value": "bottom", "label": "Bottom Center" }
      ],
      "default": "center"
    },
    {
      "type": "header",
      "content": "― Skip Button ―"
    },
    {
      "type": "text",
      "id": "onhow_studio_skip_text",
      "label": "Skip Button Text",
      "default": "Skip Intro"
    },
    {
      "type": "select",
      "id": "onhow_studio_skip_position",
      "label": "Skip Button Position",
      "options": [
        { "value": "top-right", "label": "Top Right" },
        { "value": "top-left", "label": "Top Left" },
        { "value": "bottom-right", "label": "Bottom Right" },
        { "value": "bottom-left", "label": "Bottom Left" },
        { "value": "bottom-center", "label": "Bottom Center" }
      ],
      "default": "top-right"
    },
    {
      "type": "color",
      "id": "onhow_studio_skip_bg_color",
      "label": "Skip Button Background",
      "default": "#000000"
    },
    {
      "type": "color",
      "id": "onhow_studio_skip_text_color",
      "label": "Skip Button Text Color",
      "default": "#ffffff"
    },
    {
      "type": "header",
      "content": "― Effects ―"
    },
    {
      "type": "range",
      "id": "onhow_studio_overlay_opacity",
      "min": 0,
      "max": 80,
      "step": 5,
      "unit": "%",
      "label": "Dark Overlay Opacity",
      "default": 20
    },
    {
      "type": "range",
      "id": "onhow_studio_auto_close_delay",
      "min": 0,
      "max": 30,
      "step": 1,
      "unit": "s",
      "label": "Auto Close Delay",
      "default": 10,
      "info": "Set to 0 to disable auto-close"
    },
    {
      "type": "header",
      "content": "― Session Management ―"
    },
    {
      "type": "select",
      "id": "onhow_studio_session_type",
      "label": "Show Video",
      "options": [
        { "value": "once", "label": "Once Per Session" },
        { "value": "always", "label": "Every Visit" }
      ],
      "default": "once"
    }
  ],
  "presets": [
    {
      "name": "OnHOW 3D Intro (By ONHOW Studio)"
    }
  ]
}
{% endschema %}