Click Search icon > Show Search Lightbox

See screenshot for detail.

Click Search Show Lightbox1 Min

#1. First, add a page in Not Linked

  • Name: Search Box Lightbox
  • URL: /search-box-lightbox

Click Search Show Lightbox2 Min

#2. Next, install Section Loader Plugin

You will have some code like this in Code Injection Header

Click Search Show Lightbox3

and Footer

Click Search Show Lightbox4

#3. Use this code to Code Injection Footer, under Section Loader Plugin code

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
$(document).ready(function() { 
$('<img src="https://assets.squarespace.com/universal/images-v6/icons/icon-searchqueries-20-dark.png" class="tp-search-icon"/>').insertBefore('.header-actions-action.header-actions-action--cart');
   setTimeout( function() {
        $(".tp-search-icon").click(function() {
            $('[data-wm-plugin]').toggleClass('show-search');
        });
    }, 3000);
});
</script>

#4. Add this to Custom CSS

div[data-wm-plugin] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9999999;
    background-color: white;
    box-shadow: 3px 5px 14px 0px rgba(0,0,0,0.2);
    padding: 20px;
    transform: translateY(-150%);
   transition: all 0.5s;
}
  div[data-wm-plugin].show-search {
  	transform: translateY(150px);
    transition: all 0.5s;
  }
  .tp-search-icon {
  	cursor: pointer;
  }