Re: Adding video to slideshow/main page to shopify

Adding video to slideshow/main page to shopify

Korsa
New Member
8 0 0

Hi guys!

My store is launching soon: www.korsaclo.com

Password: jerjeff to enter

The main page currently looks like this

Korsa_0-1635393401110.png

 

 

I want to know how to add the video as an embed youtube video but without the youtube buttons to play, pause, volume adjust etc. Basically remove anything popping up when the mouse hovers over

The video must be playing but in the background, play automatically and just be part of the website instead of like a video that looks like it's got the embedded code pasted.

 

Similar to this website

https://www.earlscollection.com/

 

 

I have the Retina theme.

 

Thanks for your help!

Replies 4 (4)

TuanLe
Shopify Partner
12 0 4

In order to add a video background to your homepage similar to that website. Follow these steps below

Duplicate your theme first in case you mess something up. 

Step 1: Go to your store Admin dashboard ->Online store->Actions->Themes

videobackground1.jpg

Step 2: Add a new section to Sections

videobackground2.jpg

Step 3: Replace the default code with the code on this link (sorry, the code's a bit long so I store it on Github) 

videobackground3.jpg

videobackground4.jpg

Step 4: Add background video section to the homepage

videobackground5.jpg

Step 5: Upload your video to Shopify files
From your store admin dashboard, navigate to Settings -> Files then upload your video here.

videobackground6.jpg

Note: you need to have a Shopify plan in order to upload video
Step 6: Copy video link

videobackground7.jpg

Step 7: Navigate to the video background section, paste the video link and hit save

videobackground8.jpg

Step 8: Go to your website again to check

videobackground9.jpg

That's it. If you want to see more guides like this, feel free to grab a copy of this eBook "Top 12 DIY Shopify customizations to drive sales" here. It's a step-to-step guide to do some of the trending customizations to your Shopify store. Easy to follow even for a non-coder. 

If you have any difficulties following the steps, just reply to me here. 

 

HappyPoints | Shopify SEO Experts
- Generate long-term traffic with our free SEO project.
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
GirayDadali
Visitor
1 0 1

Hello TuanLe,

Great tutorial. It worked for me to upload a video. However, the aspect ratio is limited to 800x500 it seems. I've tried manipulating some of the code to get it wider but I can't get it to change. Could you please provide a modification for a something more like 1080 x 250 please?

abbyG
Visitor
1 0 0

Hi! i can't copy and paste the code

MRamzan
Shopify Partner
339 3 35

You can add vertical videos as well:

 

Hire Me:

WhatsApp: +91-9145985880
Email: mohdramzaan112@gmail.com
Skype: mohdramzaan112