Versatile "Video" Section: Enables embedding videos from various sources (YouTube, Vimeo, direct uploads). Supports customization of playback options (autoplay, loop, mute), display of controls, and the addition of a custom poster image. Easily adjust the video aspect ratio and size to fit the page layout.
Step 01: From Shopify Admin, click on Online Store > Select Themes > In the Current theme section, click the Customize button.
Step 02: In the theme editor (Customize), click the Sections button > Click the Add section button > In the Sections tab, scroll through the list or use the search bar to find and select the Video.
After adding the Video section, you can customize its settings using the sidebar—located on the right or left side of your screen depending on your device.
Video: Upload a direct video file to play within this section. Note: If you also provide an external video link, this uploaded video will take precedence.
Replaces external video if both are set.
External link video: Enter the embed link of the video from platforms like YouTube or Vimeo to embed it in this section. This is a convenient way to use videos already hosted online.
Video ratio (Adapt video, 4:3, 16:9, 21:9): Choose the desired aspect ratio for the video display. The "Adapt video" option will attempt to maintain the video's original aspect ratio. Other options allow you to set a fixed ratio to fit the layout.
Color: Choose the background color for the video container when the video is loading or does not fully occupy the space.
Full width: Enable this option to make the video span the entire horizontal width of its immediate container. This is commonly used for creating full-width background videos or introductory videos.
Section padding
Top padding: This option allows you to set the amount of space (padding) at the top of the slider section. You can drag the slider or directly enter a numerical value to adjust this spacing
Bottom padding: This option allows you to set the amount of space (padding) at the bottom of the slider section. You can drag the slider or directly enter a numerical value to adjust this spacing
Rate padding (mobile): This option allows you to set the aspect ratio-based padding for mobile view (in percentage). For example, 75% means the height will be 75% of the width.
Custom CSS
Allows users to customize by adding CSS rules, beyond the limitations of default settings. This allows for fine-tuning the design to every detail, to suit specific needs.
Add custom styles to this section only.
To add custom styles to your entire online store, go to theme settings.
