Menu
Products
Products
Video Hosting
Upload and manage your videos in a centralized video library.
Image Hosting
Upload and manage all your images in a centralized library.
Galleries
Choose from 100+templates to showcase your media in style.
Video Messaging
Record, and send personalized video messages.
CincoTube
Create your own community video hub your team, students or fans.
Pages
Create dedicated webpages to share your videos and images.
Live
Create dedicated webpages to share your videos and images.
For Developers
Video API
Build a unique video experience.
DeepUploader
Collect and store user content from anywhere with our file uploader.
Solutions
Solutions
Enterprise
Supercharge your business with secure, internal communication.
Townhall
Webinars
Team Collaboration
Learning & Development
Creative Professionals
Get creative with a built in-suite of editing and marketing tools.
eCommerce
Boost sales with interactive video and easy-embedding.
Townhall
Webinars
Team Collaboration
Learning & Development
eLearning & Training
Host and share course materials in a centralized portal.
Sales & Marketing
Attract, engage and convert with interactive tools and analytics.
"Cincopa helped my Enterprise organization collaborate better through video."
Book a Demo
Resources
Resources
Blog
Learn about the latest industry trends, tips & tricks.
Help Centre
Get access to help articles FAQs, and all things Cincopa.
Partners
Check out our valued list of partners.
Product Updates
Stay up-to-date with our latest greatest features.
Ebooks, Guides & More
Customer Stories
Hear how we've helped businesses succeed.
Boost Campaign Performance Through Video
Discover how to boost your next campaign by using video.
Download Now
Pricing
Watch a Demo
Demo
Login
Start Free Trial
A video slider in Shopify is a section that allows multiple videos to be displayed inside a carousel. Instead of showing one video, users can move through several, much like image sliders that are common in themes. Shopify does not provide a video slider by default, so it must be created manually by adding a new custom section and integrating it with a JavaScript carousel library. Create a Custom Section Create a new section file, for example, video-slider.liquid . This section defines how the input fields and settings will appear in the Theme Editor. In the schema of the section, you can create blocks where each block represents one video. Each block includes settings such as a video URL and a poster image. This way, when the section is added through the theme editor, user can enter their own video URLs and upload poster images without touching the code. {% schema %} { 'name': 'Video Slider', 'settings': [], 'blocks': [ { 'type': 'video', 'name': 'Video', 'settings': [ { 'id': 'video_url', 'type': 'url', 'label': 'Video URL' }, { 'id': 'poster', 'type': 'image_picker', 'label': 'Poster Image' } ] } ], 'max_blocks': 6, 'presets': [{ 'name': 'Video Slider' }] } {% endschema %} Add Slider Markup and Logic Once the schema is ready, you need to write the Liquid and HTML markup that will display the videos on the storefront. The section will loop through the blocks defined in the schema and create a video element for each block. At this stage, the videos are stacked in HTML, but the logic is ready for a carousel to take over. This connects the inputs from the Shopify admin to the actual visual output on the storefront.
{% for block in section.blocks %}
{% endfor %}
Add Carousel Library The videos alone will only appear one after another. To make them act as a slider, you need a JavaScript carousel library such as Swiper.js. This library is included in the theme with its CSS and JavaScript files.
After including the files, you initialize the carousel on the video slider container. The library then adds navigation buttons, looping, and sliding animations, turning the simple list of videos into a functioning video slider. var swiper = new Swiper('.video-slider', { slidesPerView: 1, loop: true, navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev', }, }); Add Section to Theme After creating the section and configuring the carousel, you make it available in the theme editor. This allows the user to add the video slider to the homepage, product page, or any template that supports sections. The section becomes part of the theme customization process, meaning it can be placed and configured directly from the Shopify interface without requiring further editing of the theme code. Optimize for Performance Videos are large files and can slow down a page if they are not managed carefully. To keep the slider fast, poster images are used so that the video files do not load until they are needed. Lazy loading ensures that only the active or visible video loads, instead of all videos at once. JavaScript logic can also pause all videos when the slide changes and play only the video in the active slide. swiper.on('slideChange', function () { document.querySelectorAll('.video-slide video').forEach(v => v.pause()); let activeSlide = document.querySelector('.swiper-slide-active video'); if (activeSlide) activeSlide.play(); });