Add Looping Video With Text Overlay in Shopify - eCommerce Thesis

Add Looping Video With Text Overlay in Shopify

Foysal 0

Video content gives customers a positive impression of the brand. Animoto: Free video maker company found that as many as 73% of customers are more inclined to purchase a product after watching an explainer video about it

In Shopify is does not easy to Add Looping Video With Text Overlay on the home page instead of Default Slider. Though there has another way to do this with an app not always free and add too many apps make the website slow and down in the search rank.

Also, In the shopify community I found many users looking a easy guideline to add Looping Video With Text Overlay. In the below I have shared one of user inquiry in shopify community.

Looping Video With Text Overlay

Hey there,

I’m using the Debut theme, and I’ve been obsessed with trying to find a way to implement a mute looping video to my homepage. 

There is a section in the Debut theme called ‘Image with text overlay, ‘ and it gives you the option to add a picture bar to your homepage and control its size on the page, and add text and a button to it if you wish. It’s such a great tool, and I like that it’s flexible and gives you options.

So I went to take a look at the HTML/CSS of that particular section, and I thought it would be relatively easy to DUPLICATE that section and REPLACE the image part with a video part, add that it must be mute and loop forever.

With Shopify’s 20MB restriction, a good-quality video would be kind of hard to upload directly. So Youtube or Vimeo would need to be used. However, I would like to remove any traces of these platforms if I could. No pause and play button, no bar at the bottom, etc. just nothing but the video I made.

I would be so grateful if someone would help me with this. I could post the section’s HTML code if you’d like to take a look at it.

Thanks for anyone’s help in advance.

Finally, I am going to share the easy guideline for any user of shopify.

How to add video to Shopify debut theme

1. Upload your video to files in Shopify (home – settings – files – upload)

2. Add custom content (edit homepage – add section – custom content – add content – custom html

3. Then we added the following HTML code

<video class="video-background" loop="" muted="" no-controls="" autoplay="" src="YOUR URL TO THE VIDEO FROM STEP 1" playsinline="" style="transform: scale(1.27563, 1.27563);">
  <source type="video/mp4" src="YOUR URL TO THE VIDEO FROM STEP 1">
  </source>
</video>

4. Then we added below CSS code in shopify (Sales Channels – Themes – Actions – Edit Code – theme.scss.liquid

.video-background {
width: 100%;
height: auto;
left: 0;
top: 0;
}

.template-index #shopify-section-1555664398946 .page-width {max-width: initial !important;}
.template-index .main-content{padding-top: 28px;}

@media only screen and (min-width: 750px){

#shopify-section-1551278267809 .section-header {

margin-top: 20px;

}

}

Thank you for your time to visit my website. Learn More About Me

Shopify Expert
Shopify Expert

Foysal

I'm a Web Designer, eCommerce Business Developer based in Habiganj. I specialize in creating e-commerce business websites for great individuals and small-medium sized businesses, helping them to market their products or services successfully on the web. Interested in working together? Get in touch so we can discuss your requirements.

Leave a Reply