Video Section

The Video Section allows you to add a video to your store pages, giving you the opportunity to engage customers with dynamic media. Whether you're showcasing a product demo, a brand video, or an instructional tutorial, the Video Section is a great way to present rich content. Here’s how you can add and customize the Video Section in your Shopify theme.

1. Access the Theme Editor

   • Login to Shopify Admin

     • From the Shopify Admin, go to Online Store > Themes.

   • Open Theme Customizer

     • Find the theme you wish to edit and click Customize. This opens the Theme Editor, where you can add and modify sections of your store.

2. Add the Video Section

   • Select the Page or Template

     • Choose the page or template where you want to add the Video Section (e.g., homepage, product page, or collection page).

   • Click on "Add Section"

     • In the left sidebar of the Theme Editor, you will see an Add Section button. Click it to view a list of available sections.

   • Select the Video Section

     • Look for the Video Section in the list and click Add. This will insert the video section into the page.

       

3. Customize the Video Section Once the Video Section has been added, you can start customizing it to suit your store's needs.

   • Add a Video Link

     • The Video Section requires a video URL, which can be added from platforms such as YouTube, Vimeo, or other video hosting services. Paste the URL of your video into the field provided.

     • You can use either a YouTube link or Vimeo link, depending on where your video is hosted.

   • Adjust the Video Settings

     • You can choose to display the video with or without a play button overlay. If your video hosting platform supports it, the video may automatically play when the user scrolls to the section.

   • Add a Cover Image (Optional)

     • For videos that don’t start automatically, you can add a cover image. This image will act as a thumbnail for the video before it’s played. You can upload an image that visually represents the content of the video (e.g., a screenshot or a custom thumbnail).

   • Add a Heading and Text

     • Alongside the video, you may want to add a heading and description text. This is useful for providing context or explaining what the video is about. You can format the text, change the font size, and adjust the alignment to match your design.

   • Adjust Layout and Alignment

     • You can adjust the layout of the section to control how the video appears in relation to other content on the page. For example, you can set the video to be centered, aligned to the left or right, or have the video take up full-width of the section.

     • Additionally, you can choose whether the video section appears on top of the page, in the middle, or at the bottom.

   • Background and Styling

     • Add a background color or background image to the section to make it stand out. This can be especially helpful if the video is embedded with a transparent background or if you want to make the video pop against a solid backdrop.

   • Configure Auto Play (Optional)

     • If supported by your video hosting platform, you can enable auto-play for your video. This will cause the video to start playing automatically when the user scrolls to it.

4. Preview the Section After adding and customizing the video section, it’s important to preview how it looks on different devices.

   • Desktop View

     • Ensure the video is displayed correctly and that the text and images are well-aligned.

   • Mobile View

     • The video section should adjust to a responsive layout. Ensure the video plays correctly and that the text and buttons are readable on smaller screens.

5. Save and Publish

   • Once you’re happy with the design and content of the Video Section, click Save to apply the changes.

   • If you are adding the video to the homepage or another template, the changes will reflect immediately on your live store once saved.