How can I create a full screen intro video for my site?

mattkilliconic
Tourist
8 0 1

I am trying to create a full screen 'intro' video to my site (taste theme) that will play through a ~30 sec video (no audio) and have a button on top or below that says 'enter' or that appears at the end of the video.

 

Once clicked, you will be directed to the home page. Mobile & desktop please

 

Thanks!

Replies 12 (12)

sahilsharma9515
Shopify Partner
976 122 183

Hi @mattkilliconic This can be possible with few workarounds that I can think of for now.

 

  1. You need to create a different page in which you will add the video inside your store and then with the help of custom coding you need to show that page as your first page like the password page use to show up when your store is password protected.
  2. The another way through which you can achieve this is just create a html page and host it on the hosting server and link that page to your shopify store i.e. once someone will click on the video or on the enter button it will redirect the customer from that html page to your home page.

If you will unable to implement the same then I'm happy to do this for you, let me know. I can implement the code changes so that this will work well for you.

 

Hopefully it will help you. If yes then Please don't forget hit Like and Mark it as solution!

 

Best Regards

Sahil

- Your

 Coffee Tip 

can create magic in coding ❤️❤️

- Need a Shopify Developer? CHAT ON WHATSAPP or EMAIL ME !


- Hopefully the solution will help you. If yes then Please hit

 Like 

and

 Mark it as solution! ❤️


mattkilliconic
Tourist
8 0 1

I have no problem creating the page for option 1, but I unfortunately do not know how to code that onto the home page. 

 

option 2 sounds like what I am trying to do, however I do not know how to link it to show up before my homepage. Should I add this page as a section to my homepage? I tried that last night and it did not seem to do anything. 

 

Thanks!

Matt

sahilsharma9515
Shopify Partner
976 122 183

Hi @mattkilliconic If you are using option 1 then you need to add custom code through which you can show a page before the home page.

 

If you are using option 2 then you just need to add the video and button in the page and host it on the separate server and link that page to you shopify store so that once anyone click on that video or button then they will land on the home page.

 

Please note : For option one your link should look like this: www.xyz.com/page name

For option 2 your link should look like this: www.pagename.xyz.com i.e. you need to have the subdomain.

 

If you will unable to implement the same then I'm happy to do this for you, let me know. I can implement the code changes so that this will work well for you.

 

Hopefully it will help you. If yes then Please don't forget hit Like and Mark it as solution!

 

Best Regards

Sahil

- Your

 Coffee Tip 

can create magic in coding ❤️❤️

- Need a Shopify Developer? CHAT ON WHATSAPP or EMAIL ME !


- Hopefully the solution will help you. If yes then Please hit

 Like 

and

 Mark it as solution! ❤️


mattkilliconic
Tourist
8 0 1

option 1 would be easiest for sure. so I would create a page, then how would I code it to show before the home page?

 

thank you for the help! 🙂

Mallz
Visitor
1 0 0

I have the same problem can you add this intro button with a code for me pls? And i have another questions dear sahilsharma [REDACTED]

sahilsharma9515
Shopify Partner
976 122 183

Hi @Mallz Yes I would love to help you and you can specify me your question?

 

If you want we can move this conversation from here to whatsapp or email or in shopify private message, which ever is suitable to you.

 

Best Regards

Sahil 

- Your

 Coffee Tip 

can create magic in coding ❤️❤️

- Need a Shopify Developer? CHAT ON WHATSAPP or EMAIL ME !


- Hopefully the solution will help you. If yes then Please hit

 Like 

and

 Mark it as solution! ❤️


deepaksharma
Shopify Partner
448 63 93

Hello there @mattkilliconic 
Do you want to show the video from your youtube channel or upload the file directly, based on that I can provide you the code along with the guide

Deepak Sharma || Shopify Developer || Helping eCommerce Stores
- Was my reply helpful? Accept it as solution
- Was your question answered? Mark it as an Accepted Solution.
-CHAT ON WHATSAPP | BUY ME A COFFEE | MAIL ME: ds2305187@gmail.com
mattkilliconic
Tourist
8 0 1

Hello!

thank you for reaching out. 

 

I have the video file already uploaded into my shopify 'files'. if I could get the code for that, that would be incredible! thank you. just so you know my final goals for this, I am trying to have the video play (full screen) and have a button in the lower center that says 'enter' and then it could just close out the video overlay and go to my homepage. thank you!

mattkilliconic
Tourist
8 0 1

hello, just following up on this! It would be greatly appreciated! thanks!

deepaksharma
Shopify Partner
448 63 93

Open theme customization add a new section called custom liquid.

paste below code

Replce the video link with yours video link

<style>
    video {
      min-width: 100%;
      min-height: 100%;
      width: 100%;
      height: auto;
      z-index: 1;
    }
  </style>
  <video autoplay="" loop="" muted="" playsinline="">
    <source src="your-video.mp4" type="video/mp4">
    Your browser does not support the video tag contact developer.
  </video>

  <script>
    document.addEventListener('DOMContentLoaded', function() {
      var video = document.querySelector('video');
      video.addEventListener('click', function() {
        video.paused ? video.play() : video.pause();
      });
    });
  </script>

before pasting the code make sure to change the video link

 

src="your-video-link.mp4"

 

If you are unable to implement the same then I'm happy to do this for you, let me know. I can implement the code changes so that this will work well for you.

 

Hopefully, it will help you. If yes then Please don't forget to hit Like and Mark it as the solution!

Deepak Sharma || Shopify Developer || Helping eCommerce Stores
- Was my reply helpful? Accept it as solution
- Was your question answered? Mark it as an Accepted Solution.
-CHAT ON WHATSAPP | BUY ME A COFFEE | MAIL ME: ds2305187@gmail.com
mattkilliconic
Tourist
8 0 1

in middle of the code it says "Your browser does not support the video tag contact developer." 

 

I tried this but it just showed up as a regular video banner on my site and not as a whole page display. I want it to be a separate page as a 'first destination' before the homepage with a video playing across the whole screen with an 'enter' button on it that then brings the customer to the home page.

 

Thanks! I appreciate the help!

 

Thanks!

cubanlinks
Visitor
1 0 0

you definitely saw those guys on tiktok doing insane shopify animated intro's