Refresh Theme Vertical Video Played On Replay In Slideshow?

[davidmira8]

Hello, Shopify community! I was wondering if anyone knows the code for a vertical short form video to be played as soon as a customer lands on my page. I currently have a transparent header with a slideshow with two images but is it possible to turn that into a short form video that plays on the landing page? Does anyone know how to do this?

For reference you can check our website at monaieofficial.com

Thanks for your help! 

[DaisyVo]

Hi @davidmira8 

I understand you're looking to have a vertical video play automatically on your Shopify store's landing page using the Refresh theme. Let's walk through how you can achieve this.

Understanding the Refresh Theme's Capabilities

The Refresh theme in Shopify primarily supports images in its slideshow section and doesn't natively support videos. However, you can integrate a video by adding a custom section to your homepage.

Steps to Add a Video to Your Homepage

1-Access the Theme Editor:

• From your Shopify admin dashboard, navigate to Online Store > Themes.
• Find the Refresh theme and click on Customize.

2-Add a Custom Liquid Section:

• In the theme editor's sidebar, click on Add section.
• Scroll down and select Custom liquid.
• This will add a new section where you can input custom code.

3-Insert Video Code:

In the Custom liquid section, paste the following code:

<video autoplay loop muted playsinline style="width: 100%; height: auto;">

  <source src="YOUR_VIDEO_URL.mp4" type="video/mp4">

  Your browser does not support the video tag.

</video>

•  
• Replace "YOUR_VIDEO_URL.mp4" with the direct URL of your video file. Ensure the video is hosted on a reliable platform and is optimized for web playback.

4-Adjust Video Settings:

• The attributes autoplay, loop, muted, and playsinline ensure the video plays automatically, loops continuously, starts without sound, and plays inline on mobile devices.
• The inline style sets the video to be responsive, adjusting to different screen sizes.

5-Position the Video:

• Use the drag-and-drop feature in the theme editor to position the Custom liquid section where you want the video to appear on your homepage.

6-Save Your Changes:

• After positioning and configuring the video, click Save to apply the changes to your store.

Considerations

• Transparent Header: Since you're using a transparent header, ensure that the video content doesn't interfere with the visibility of your navigation links. You might need to adjust the header's styling or add overlays to maintain readability.
• Video Hosting: Hosting videos directly on your Shopify store can consume bandwidth and affect loading times. Consider hosting your video on platforms like YouTube or Vimeo and embedding them, or using Shopify's Files section to upload your video and get a URL.
• Mobile Experience: Mobile devices handle videos differently. Ensure that the video is optimized for mobile viewing and doesn't significantly impact page load times.

Alternative Approach: Using YouTube Videos

If you prefer to embed a YouTube video, you can follow a similar approach:

1-Obtain the Embed Code:

• Go to your video on YouTube.
• Click on Share > Embed.
• Copy the provided embed code.

2-Insert the Embed Code:

• In the Custom liquid section, paste the embed code.
• Adjust the width and height parameters to ensure responsiveness.