[Shopify] How to implement modal video video playback using modaal.js

It's so cool when we have the modal oce you start playing the video.

I've actually tried to customize it in Shopify, but we didn't really have exact article online, so for future me, or for someone who are struggling in the same issue, I've decided to summarize it.

When we customize it, it will be like below.↓↓↓↓

Open the modal

Which modal plugin should we choose?

Modal is one of the most popular function and we have a lot of choices of modal plugins.

As doing the further research, I have decided to use "modaal.js", which seemed most superior.

By the way, we can use not only movies but also images, iframe, image gallery in the modal!

DEMO（Official demos from Modaal.js website）

https://humaan.com/modaal/

Downloading modaal zip files from Github

So we will proceed to the next step.

First, we need to download modaal.js zip file from it's github.

https://github.com/humaan/Modaal

When pressing the "Download ZIP",the zip file『Modaal-master.zip』 will be downloaded!

Select only the files that we will use

Next we need to unzip the file.

The files are like below. From those files, we will pick up the necessary files.

Lets move those files to the Shopify store.

The place that we are transferring is the "Assets" folder in Shopify. And to embed to the Shopify store, we need to add below code on the theme.liquid file.

 {{ 'modaal.css' | asset_url | stylesheet_tag }} {{ 'modaal.js' | asset_url | script_tag}}

At the same time, we need jQuery to let modaal move.

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

Get jquery cdn from GoogleHostedLibraries（ https://developers.google.com/speed/libraries#jquery ）

The order to embed is

I guess it doesn't really matter for 1 and 2, but the order of jquery and modaal.js is very important.

Realize video modaal in Shopify

So we have finished setting up the preparation. Lets move on to the actual modal.

This time, we will show the video inside the modaal window.

<a href="https://www.youtube.com/embed/09R8_2nJtjg" class="modaal-video">Open the modal</a>

<script> $('.modaal-video').modaal({type: 'video'}); </script>

That's actually it.

When we click the a tag link, video modal will popup like this.

Isn't it very easy?

But we have to be careful for the Youtube link!

How to get YouTube link for modal

1.To open the video inside the modal, we need to include Youtube link, but this link is not just a link of a video. We need to get the link from Youtube embed link.

First go to the Youtube and pick the video. This time I've picked the "Sugar" from Maroon5.

Press share button in the right below, and select embed.

Then you can see the screen like below, so copy the url part of it. (Make sure that the link includes the word embed.)

And paste the link to modaal part.

Check the function in Shopify Pages

Make the new page, and make the template called page.modaal.liquid, and copy paste the below code.（You need to embed the modaal.js and modaal.css in theme.liquid though.）

<!-- Text link to show modal --> <a href="https://www.youtube.com/embed/09R8_2nJtjg" class="modaal-video">Open the modaal</a> <script> $('.modaal-video').modaal({type: 'video'}); </script>

Customize the Shopify modal

If you don't like the ordinary design of this modaal, I'll state some ways to customize it!

Change the modal background color

In the CSS, with selector（.modaal-outer-wrapper）, you can change the background color of the modaal.

.modaal-outer-wrapper{ background-color: red; }

Maybe background color red is too much haha

Don't scroll back when the modal has opened

Sometimes, when we have long page, the page might go back to the top after closing the modal.

In that case

 $('.modaal-video').modaal({ // Function before opening modaal before_open: scrollFunction, type: 'video', background_scroll: true, // let the scroll position back before opening the modal before_close: function() { $(window).scrollTop(sc); } }); // get scroll position before opening the modaal function scrollFunction() { sc = $(window).scrollTop(); }

The way to use modaal in Shopify store summary

So that's all for today.

We can always embed the movie in Shopify store, but when we use the modaal plugin and use it to open the video, the store will become more elegant and classy than before.

And when we care about those small but important things, we can show more positive brand image to the customer.

Thanks for reading and have a great day!