Shopify Question posted in
The Shopify help center can be found here.

magnific popup not working In shopify

I am working on custom magnific popup with shopify site.In my header.liquid file am calling the magnific popup content.

<button id="open-popup" >Open popup</button>
<div id="my-popup" class="mfp-hide">
  popup  content here.
</div>

Here i have added the script in theme.js.liquid 

$('#open-popup').magnificPopup({
  items: [
    {
      src: '#my-popup',
      type: 'inline'
    }
  ],
  gallery: {
    enabled: true
  },
  type: 'image'
});

But It shows the following error

TypeError: $(...).magnificPopup is not a function

If anyone please tell me if am i miss something like js library files.

Thanks in advance.

Tags:

3

Answers


  1. Chosen as BEST ANSWER
    0

    I am found the actual problem for this issue.Some of the themes having default magnific pop-up library in theme.js.liquid file.

    My new theme brooklyn was having magnific pop-up library already.So it was working fine now.

    So check with theme.js.liquid file having magnific popup library present or not.


  2. 0

    are you sure that jQuery is included? if so, is it imported before magnificPopup?

    Login or Signup to reply.
  3. 0

    I had a similar issue even though the magnificPopup code was included in my theme.js.

    Don’t ask me why – after wrapping the magnificPopup call in the window.onload it started working.

    <script>
window.onload = function() {

  $('.open-popup').magnificPopup({
    type:'inline',
    midClick: true
  });
}

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search