Banner VIDEO instead of banner IMAGE?

Highlighted
Shopify Partner
4 0 0

Instead of the banner IMAGE in the top of my shop, can I add a banner VIDEO? 

I want to add a welcome video in the top of my shop. Hopefully a video that will play right there.

Alternatively I could put in an image of the video, with a PLAY botton on it, and when people click it, they will be taken to a page where the video is located and set to autoplay. 

But I prefer the first option.

Is this possible? 

 

Best

Jonathan

0 Likes
Highlighted
Shopify Partner
175 0 34

Great question Jonathan. Video can be used as a conversion tool if it tells a good story or highlights the advantages of uring the products you sell. 

Here's how you can add a video to the homepage at the top:

Step 1) Go to the themes section of your store. URL format: myshopify.com/admin/themes

Step 2) Near the top right, Click on [...] which is just besides the 'Customize theme' option

 

Step 3) Click on 'Edit HTML/CSS'

Step 4) Choose the theme template from the left menu. In this case it is 'theme.liquid'

 

Step 4) In the page, now search for '  <!-- Begin content-->' or the first instance of 'content'. 

You now need to add 2-3 lines of code to embed the video just below the main navigation 

Snapshot preview (the code should be pasted as shown below between 'end navigation' and begin of content')

Step 6) Code to enter: 
 
{% if template == "index" %}
<div id="feature_video">
Paste your YouTube Video embed code here
</div>  
{% endif %}

Step 7) Save and refresh your Home Page.

The video should show up now. Minor alignment may be needed to be adjusted with a bit of code but anyone with basic html knowledge will be able to help you on that. 

Here's a glimpse of my test hompage after following the above steps: 

 

Hope this helped you to setup a neat looking video on your homepage. Do share how it works for you. Feel free to reply here if you need any help. Cheers
 

0 Likes
Highlighted
Shopify Partner
4 0 0

Hey Tejaswi

It works! With minor changes. 

I couldn´t fint the <--- Begin content ---> so I had to throw in the code several places and trying it out, before I found the right spot (for me it was in line number 123). 

The size of the video (from YouTube) you can edit in the embed code itself. It´s the bold numbers below (I´m sure you know this, but I write it for the other readers of this post). 

 
<iframe width="853" height="480" src="https://www.youtube.com/embed/U_4XWcDSR8w?

 

One question: 

How do I center the video? It is located to the left in my shop. How do I push it into the middle? 

 

Thank you for your help. 

Best 

Jonathan

 

 

0 Likes
Highlighted
Tourist
52 0 1

Hey Tejaswi. Thanks for sharing your informative and valuable information. It is really helpful for those who want to add banner video rather than banner image. Really Appreciable.

http://nationkart.com/
0 Likes
Highlighted
Shopify Partner
175 0 34

Glad it worked Jonathan. 

To align to center, here's the code. You need to add a parameter in <div which comes before the embed code:

<div align='center' id="feature_video">YOUTUBE EMBED CODE
</div> 
 

0 Likes
Highlighted
Shopify Partner
4 0 0

It works! 

Amazing :-)

Thanks Tejaswi

 

0 Likes
Highlighted
New Member
5 0 0

Many thanks, yeah it works

0 Likes
Highlighted
New Member
1 0 0

Hey,

I use the turbo theme for my website and want to integrate a video into my slideshow (only needs to be one video-no need for multiple pics)

I checked the theme template and haven't found any of the codes mentioned in this discussion. Would anyone know to get that working out ?

 

Thanks in advance

 

0 Likes
Highlighted
Explorer
131 1 13

@Tejaswi i dont have it " <!-- Begin content-->"

using in brooklyn theme 

preview link to my store - https://1ec6rgvil62zdr9t-37071880332.shopifypreview.com

 

0 Likes
Highlighted
New Member
4 0 0

Hi 

 

Can anyone help me to add a video banner in the slideshow part of my homepage on Prestige theme?

I am unable to find the code

0 Likes