Buy me a coffee

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=""></script>
$(document).ready(function() { 
$('<img src="" class="tp-search-icon"/>').insertBefore('.header-actions-action.header-actions-action--cart');
   setTimeout( function() {
        $(".tp-search-icon").click(function() {
    }, 3000);

#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;