Magnific Popup NOT working on Shopify theme

Question

I have been trying to add a magnific popup to my Shopify theme. I have tried multiple magnific popup code examples but none of them worked.

Can someone please help me? The error is saying that magnificPopup is not a function.

You can preview my Shopify theme using this link - https://vgco4oed26ha7dfp-14256082.shopifypreview.com

I added the magnific popup just above the footer.

Here's my magnific popup code:

// Example 1: From an element in DOM

$('.open-popup-link').magnificPopup({
  type:'inline',
  midClick: true // allow opening popup on middle mouse click. Always set it to true if you don't provide alternative source.
});

.white-popup {
  position: relative;
  background: #FFF;
  padding: 20px;
  width:auto;
  max-width: 500px;
  margin: 20px auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<a href="#test-popup" class="open-popup-link">Show inline popup</a>
<!--
Alternative markup with data-mfp-src attribute:
<a href="mobile-friendly-page.html" data-mfp-src="#test-popup" class="open-popup-link">Show inline popup</a>
-->

<!-- Popup itself -->
<div id="test-popup" class="white-popup mfp-hide">
  Popup content
  Lorem ipsum dolor sit amet, consectetur adipiscing elit,
  sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
  Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
</div>