Adding videos to Debut Theme

Tourist
15 0 0

Hey Guys!

 

New to shopify!  I wanted to see if there was a way to add a section to the product page where I can add quick video clips that showcase the products use!

 

Thanks in advance!!

0 Likes

Hi @kuchak,

 

I think the best option would be to add a custom video tag via HTML within the product page. I've seen this request a few times from clients and this is the approach I take.


1. Navigate to the "Edit Code" section of the Shopify backend (more info on that here) then navigate to footer.liquid and insert the following code snippet below </footer> 

<script src="https://cdn.plyr.io/3.5.6/plyr.js"></script>
<script>
    const player = new Plyr('#player');
</script>

 

2. Then navigate to header.liquid and insert the following code snippet

<link rel="stylesheet" href="https://cdn.plyr.io/3.5.6/plyr.css" />

Note: If you feel comfortable, you can also download the plyr.js and plyr.css files here and upload them to your "Assets" section in your Theme editor interface then load them via the below code snippets. This does take a little more understanding though (you can find info on the topic here).

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

 

3. After embedding the plyr files, then navigate to the product page that you want to insert the video for and insert the following following code snippet where you wish to display the video...

<video playsinline loop poster="path/to/poster.jpg" id="player">
    <source src="path/to/video-file.mp4" type="video/mp4">
    <source src="path/to/video-file.webm" type="video/webm">
</video>

 

NOTE: You will have to update these to their correct values: path/to/poster.jpg and path/to/video-file.mp4. This Shopify guide tells you how to upload files to your store.

Alternatively, if you upload your video to YouTube - you could simply embed the YouTube embed code instead of the code snippet I share above.


That should do it. If you have any questions, let me know. :)

Was my answer helpful? Be sure to give it a "Like" and mark it as the solution - this way others can find it easily.
- Need help with a Shopify build or custom solution? Feel free to get in touch via hello@stonedigital.com.au !
- Did my reply help solve your problem? The above email is my Paypal too ʘ‿ʘ
0 Likes