How to add a Lightbox Search Overlay in Squarespace

Note: The Lightbox plugin is required.

Search Overlay Demo

To add a search overlay, follow these steps:

1. Add a page Search Overlay with a Search Block. The URL of this page must be "search-overlay".

2. Add a link with this URL #lightbox>search-overlay

3. Add the code below to Code Injection

<!-- Search Overlay -->
<!-- Author: Dmitry Kiselyov @_dmitrykiselyov -->
<style>
[id="lightbox>search-overlay"] .c-lightbox__content {
  padding: 0;
  min-height: 104px;
  background: #fff;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.15);
}
@media (min-width: 1024px) {
  [id="lightbox>search-overlay"] .c-lightbox__content {
    max-width: 50%;
  }
}
[id="lightbox>search-overlay"] .sqs-block-search .search-input {
  padding: 17px 45px;
  font-size: 19px;
  border-color: #fff;
}
[id="lightbox>search-overlay"] .c-lightbox__close {
  top: -38px;
  -webkit-filter: brightness(0) invert(0.95);
  filter: brightness(0) invert(0.95);
}
@media (min-width: 768px) {
  [id="lightbox>search-overlay"] .c-lightbox__close {
    top: -28px;
    right: -28px;
  }
}
[id="lightbox>search-overlay"] .sqs-widget {
  top: -17px !important;
  left: auto !important;
}
[id="lightbox>search-overlay"] .sqs-search-ui-list {
  max-height: 360px;
}
@media (min-width: 768px) {
  [id="lightbox>search-overlay"] .sqs-search-ui-list {
    max-height: 460px;
  }
}
[id="lightbox>search-overlay"] .sqs-search-preview-ui {
  display: block !important;
  width: auto !important;
  position: relative !important;
}
[id="lightbox>search-overlay"] .sqs-search-ui-result {
  border: none !important;
  border-top: 1px solid #ddd !important;
}
</style>
<script src="https://cdn.jsdelivr.net/gh/ryanmorr/ready@1/dist/ready.min.js"></script>
<script>
(function() {
  var off1 = ready('[id="lightbox>search-overlay"]', function() {
    off1();
    var lightbox = pluginLightboxItems.filter(function(i) {
      return i.id === 'lightbox>search-overlay';
    })[0];
    lightbox.options.afterOpen = function() {
      var input = lightbox.element.querySelector('input[type="search"]');
      setTimeout(function() { if (input) input.focus() }, 10);
    }
  });
  var off2 = ready('.yui3-searchpreviewdropdown', function(widget) {
    off2();
    var lightboxContent = document.querySelector('.c-lightbox__content-inner .sqs-layout');
    if (!lightboxContent) return null;
    lightboxContent.appendChild(widget);
  });
})();
</script>
<!-- end Search Overlay -->