The video carousel on Shopify is a great layout for e-commerce that can engage visitors and boost sales via videos. It enhances your store’s visual appeal, keeps visitors interested, and helps showcase your products effectively.
In this blog, I’ll show you how to add a video carousel to your Shopify store using two simple methods. The first option uses the Shopify video slider code (which I will provide for free). And the second one is using a Shopify app like Essential Grid Gallery or Slider Revolution for a more flexible and easier way.
You’ll also learn about the benefits of video carousels and tips to maximize their impact. Read on to explore everything you need to know to enhance your store with the video carousel Shopify feature today!
What is a Video Carousel in Shopify?
A video carousel on Shopify is a multimedia display layout. It allows users to showcase multiple video clips in a sliding format. These carousels enable visitors to view multiple video contents without leaving the page.
Video carousels are more engaging than static image carousels. They can be product demonstrations, promotional videos, or customer testimonials. Users can scroll through videos manually or watch them transition automatically after a set time. This dynamic format keeps visitors interested and shows products in action. It helps build trust, provides useful information, and increases sales.
Moreover, adding a video carousel improves user experience and makes your store stand out. It can also boost SEO by keeping users on the page longer, reducing bounce rates, and driving sales through compelling visual storytelling.
Benefits of Using Video Carousel on Your Shopify Store
A Shopify video carousel is not just a design feature — it’s a strategic tool to engage your audience, enhance the user experience, and drive conversions. It helps you show multiple videos in one clean space, making your store look modern and professional.
When visitors view high-quality video content, they tend to stay longer, trust your brand, and feel confident about purchasing from you.
Here are the key benefits of using a video carousel on your website:
Add a Professional Look
A video carousel makes your store look polished and premium. It gives your website a clean and organized feel, which builds trust with visitors. A modern design also creates a strong first impression.
Increase Engagement
Videos in the banner section are proven to capture attention more effectively than static images or text. A carousel allows you to showcase multiple videos in a compact space, which encourages visitors to interact with your content.
Improve Conversions
Video content has a strong impact on buying decisions. By adding video to your Shopify store, you can showcase product features, demonstrate usage, and highlight benefits in an easy-to-understand way.
Besides, customer testimonials in video format add social proof. It builds trust and credibility. When users see product carousels and customer testimonial videos, they’re more likely to feel confident about making a purchase. Shopify video carousels also support call-to-action buttons. It guides customers to take the next step, such as “Buy Now” or “Learn More.”
Better User Experience
A video carousel keeps content organized and easy to watch. It works smoothly on mobile, tablet, and desktop, giving visitors a simple and enjoyable browsing experience.
Flexible Content Options
A video carousel supports a variety of content types, making it a versatile option for storytelling and marketing. You can include:
- Product Demonstrations: Show how your products work in real-life scenarios.
- Customer Testimonials: Build trust by featuring authentic feedback from satisfied customers.
- Promotional Clips: Highlight special offers, seasonal sales, or brand messages.
- Tutorials: Educate customers on how to use your products effectively.
This flexibility allows you to address different customer needs and deliver targeted messages, all within the same space.
SEO Benefits
Videos increase the time visitors spend on your site, which helps SEO for your Shopify store. When properly optimized with titles and keywords, your videos can also appear in search results, bringing more traffic.
How to Add Video Carousel to Shopify – [2 Methods]
You can add a video carousel to your Shopify store in 2 ways:
- Method 1 (Editing the Theme File): Customize your store’s code to manually integrate a video carousel.
- Method 2 (Using a Shopify App): Use Essential Grid Gallery or Slider Revolution and Sections app to create dynamic and engaging video carousels effortlessly.
Choose the method that best suits your needs and expertise!
Comparison Table: Custom Code vs Shopify App
Choosing the right method to add a video carousel to your Shopify store depends on your skills, budget, and goals. Whether you prefer hands-on customization or an easy-to-use app, each approach has its pros and cons. Below is a comparison to help you decide which option suits your needs best.
e app, each approach has its pros and cons. Below is a comparison to help you decide which option suits your needs best.
| Aspect | Editing Theme File | Using Video Carousel Shopify App |
| Coding Skill | Requires intermediate coding knowledge | No coding skills are required. |
| Time Investment | Time-intensive. | Quick setup. |
| Pricing | Free, but might incur developer costs if you hire one. | Subscription-based; Slider Revolution and Sections offer cost-effective plans. |
| Customization | Customizable but requires manual effort. | Pre-designed templates with extensive customization options. |
| Features | Limited. | Advanced features are built-in. |
| Scalability | Suitable for simple setups. | Suitable for creating professional, dynamic carousels. |
| Support | Limited to Shopify’s documentation and community forums. | A dedicated support team and tutorials by Slider Revolution and Sections. |
Method 1: Add Video Carousel with Theme Customization (Without App)
Here’s a step-by-step guide to adding a video carousel to your Shopify store by customizing your theme. This step-by-step guide provides clear instructions for creating a visually appealing and fully functional video slider. It will help you seamlessly integrate the carousel into your Shopify theme. This method enhances your store’s design and user experience all without the need of any third-party app.
Step 1: Add Custome Code in Theme Code Editor
Now go to Theme, click on the Three Dots button, and then select Edit Code
This will redirect you to the Theme Editor Page. Now navigate to the Sections option and select Add a new Section
Now, Select liquid on the popup. Write the File name and Click on the Done button. Here we have named the file “video-carousel”
Open the liquid file (video-carousel) and select the default code. Then Delete the code.
{%- style -%}
.section-{{ section.id }}-padding {
padding-top: {{ section.settings.padding_top }}px;
padding-bottom: {{ section.settings.padding_bottom }}px;
}
.video-slider .testimonial__image {
height: 500px;
max-width: 27rem;
}
.video-slider testimonials-component {
--block-width: 300px !important;
}
.video-slider .testimonial__image {
background: none;
}
.video-slider video {
height: 100% !important;
border-radius: 15px;
}
.video-slider .testimonial__image.media-wrapper {
margin-right: 0;
}
.video-slider .video-slider-list:before,
.video-slider .video-slider-list:after {
width: 0%;
}
.video-slider-item {
margin-left: 10px;
margin-right: 10px;
}
.video-slider-list {
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
scrollbar-width: auto;
-webkit-overflow-scrolling: auto;
scrollbar-color: #cccccc #ffffff;
scrollbar-width: thin;
padding-bottom: 10px;
}
.video-slider-list::-webkit-scrollbar-track {
background: white;
}
.video-slider-list::-webkit-scrollbar-thumb {
background: lightgray;
border: 4px solid transparent;
border-radius: 10px;
background-clip: padding-box;
}
.video-slider:hover .video-slider-list::-webkit-scrollbar-thumb {
background: gray;
}
.video-slider-list::-webkit-scrollbar-thumb:hover {
background: black !important;
}
.video-slider-list {
position: static;
display: flex;
}
@media only screen and (max-width: 800px) {
.video-slider .testimonial__image {
margin-left: 0;
}
.video-slider .video-slider-list {
width: 100%;
}
}
{%- endstyle -%}
<div class="video-slider section-{{ section.id }}-padding">
<div class="testimonials page-width">
{%- if section.settings.title != blank -%}
<h2 class="title inline-richtext {{ section.settings.heading_size }}{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %} {{ section.settings.heading_alignment }}">
{{ section.settings.title }}
</h2>
{%- endif -%}
{%- assign block_count = section.blocks.size -%}
{%- if block_count > 0 -%}
<svg class="visually-hidden">
<defs>
<clipPath id="testimonial-clip-path" clipPathUnits="objectBoundingBox"><path d="M0.11,0.09 C0.014,0.174,-0.003,0.398,0,0.499 C-0.003,0.618,0.015,0.849,0.125,0.919 C0.235,0.989,0.413,0.997,0.504,0.999 C0.604,0.999,0.719,0.999,0.869,0.924 C0.974,0.849,0.994,0.704,0.999,0.499 C1,0.295,0.984,0.155,0.879,0.075 C0.796,0.011,0.593,-0.003,0.504,0 C0.413,-0.005,0.206,0.006,0.11,0.09"></path></clipPath>
</defs>
</svg>
<testimonials-component data-slider="{% if block_count > 1 %}true{% else %}false{% endif %}" data-autorotate="{{ section.settings.autorotate }}" data-autorotate-speed="{{ section.settings.autorotate_speed | times: 1000 }}" style="--block-count: {{ block_count | minus: 1 }};">
<div class="testimonial__list-wrapper">
<div class="video-slider-list" id="Testimonials-{{ section.id }}">
{%- for block in section.blocks -%}
<div class="video-slider-item{% if section.blocks.first == true or block_count == 1 %} is-selected{% endif %}" {{ block.shopify_attributes }}>
<div class="testimonial__image media-wrapper media-wrapper--small">
{%- if block.settings.video != blank -%}
<!-- <video src="https://cdn.shopify.com/videos/c/o/v/176c5f40b3cb49d7b72a5dfaa681345b.mp4" muted playsinline autoplay loop></video> -->
{{ block.settings.video | video_tag:
image_size: "3840px",
autoplay: true,
loop: true,
controls: false,
muted: true,
playsinline: true
}}
<!-- <video autoplay="autoplay" loop="loop" muted playsinline>
<source src="{{ block.settings.video }}" type="video/mp4">
</video> -->
{%- else -%}
<div class="media media--square">
{{ 'image' | placeholder_svg_tag: 'placeholder' }}
</div>
{%- endif -%}
</div>
</div>
{%- endfor -%}
</div>
</div>
</testimonials-component>
{%- endif -%}
</div>
</div>
{% schema %}
{
"name": "Videos slider",
"tag": "section",
"class": "section",
"settings": [
{
"type": "inline_richtext",
"id": "title",
"default": "Video slider",
"label": "Videos title"
},
{
"type": "select",
"id": "heading_size",
"options": [
{
"value": "h2",
"label": "H1"
},
{
"value": "h1",
"label": "H2"
},
{
"value": "h0",
"label": "H3"
}
],
"default": "h1",
"label": "Heading size"
},
{
"type": "select",
"id": "heading_alignment",
"label": "Heading alignment",
"options": [
{
"value": "left",
"label": "Left"
},
{
"value": "center",
"label": "Center"
},
{
"value": "right",
"label": "Right"
}
],
"default": "center"
},
{
"type": "select",
"id": "heading_tag",
"options": [
{
"value": "h1",
"label": "H1"
},
{
"value": "h2",
"label": "H2"
},
{
"value": "h3",
"label": "H3"
},
{
"value": "h4",
"label": "H4"
},
{
"value": "h5",
"label": "H5"
},
{
"value": "h6",
"label": "H6"
},
{
"value": "div",
"label": "H7"
},
{
"value": "span",
"label": "H8"
},
{
"value": "p",
"label": "Normal"
}
],
"default": "h2",
"label": "H2",
"info": "Headings"
},
{
"type": "header",
"content": "Spacing"
},
{
"type": "range",
"id": "padding_top",
"min": 0,
"max": 100,
"step": 4,
"unit": "px",
"label": "Padding top",
"default": 36
},
{
"type": "range",
"id": "padding_bottom",
"min": 0,
"max": 100,
"step": 4,
"unit": "px",
"label": "Padding bottom",
"default": 36
}
],
"blocks": [
{
"type": "testimonial",
"name": "video",
"settings": [
{
"type": "video",
"id": "video",
"label": "Video link"
}
]
}
],
"presets": [
{
"name": "Videos slider",
"blocks": [
{
"type": "testimonial"
},
{
"type": "testimonial"
},
{
"type": "testimonial"
},
{
"type": "testimonial"
},
{
"type": "testimonial"
}
]
}
],
"disabled_on": {
"groups": ["header", "footer", "custom.overlay"]
}
}
{% endschema %}Select and Copy this Custom code from here.
Paste the custom code on the liquid file (video-carousel) and click on the Save button.
Click on the Back Button, this will redirect you to the Shopify dashboard.
Step 2: Add Video Carousel Section
Now, click on the Customization button.
Navigate to the Template. Then click on the Add Section button. Now, go to the Sections from the flyout menu and select Video Slider to create a video carousel on Shopify.
Step 3: Customize Video Slider
You can customize the Video Slider section by adjusting the title, heading size, alignment, and top and bottom padding to suit your preferences.
To upload videos, click on Video and then press the Select button.
After the video upload is complete, click on the Done button.
Once satisfied with the changes, click the save button to apply them.
Output
Method 2(A): Add Video Carousels on Shopify Using Essential Grid Gallery
Essential Grid Gallery is one of the best Shopify video carousel apps. This app allows merchants to create a carousel video with tagged products for a shopping experience. Here is how to create a video carousel using Essential Grid Gallery:
Step 1: Install the Essential Grid Gallery App
- First, install the Essential Grid Gallery Shopify app from the Shopify app store.
Step 2: Use a Template or Start from Scratch
- Open the Essential Grid Gallery app.
- Click on the “Use a Template” or “Start from Scratch”.
Step 3: Choose Your Gallery Type
- Now you need to select what type of gallery you want to create.
- You can select “Shoppable Gallery” for the Shopify uploaded video carousel.
Step 4: Install a Video Carousel Template
- Install a template from the Shoppable tab if you want to create a carousel with Shopify-uploaded videos.
- Go to the YouTube, Instagram, or Vimeo tab when you need to create a platform-based carousel video.
Step 5: Click on the “Edit Elements” to Replace the Video and Products
- Now you need to replace the demo video in the “Edit Elements”.
Step 6: Replace the Video Links
- Replace the video link with your real Shopify-uploaded videos.
Note: YouTube, Vimeo, or Instagram video links won’t work here. You need to enable the “Video & Social” extension or install a YouTube, Insta, or Vimeo template.
Step 7: Tag Product to Make the Video Shoppable (Optional)
If you want to make your video carousel gallery shoppable:
- Click on the “Shoppable.
- Search and select the specific product for the video.
- Click on the “Tag Product”.
- Click on the “Update & Refresh”.
Step 8: “Save” the Gallery and Click on the “Publish”
- Save the Gallery.
- Copy the Gallery ID.
- Select the page where you want to publish the video carousel.
- Click on the “Publish” button to go to the theme customizer.
Step 9: Provide the Gallery ID, Heading, and Save
- Essential Grid Galley has automatically added an App Block to your store.
- Now paste the gallery ID you copied in the previous step.
- Provide the heading name, if you want to.
- Then click on the Save button.
Step 10: Visit the Storefront to Preview the Video Carousel
Now visit your Shopify storefront and see how your video carousel looks. I hope you will be happy after seeing the carousel gallery. If you don’t like this style, there are a lot of different styles also available on the app.
Even if you have a carousel idea on your mind, you can explain it to the Essential Grid Gallery support chat, and they will build a custom carousel gallery for your Shopify store.
Method 2(B): Add Video Carousel to Shopify Store with Slider Revolution
The video carousel is not a standard feature in all Shopify themes. Some Shopify themes include it, but many popular ones, like Dawn, do not. Merchants without coding skills often seek apps to simplify this process. Ready-made templates and advanced customization are key needs. The Slider Revolution & Sections app is the best choice for video carousels in the Shopify App Store. It is reliable and easy to use.
Step 1: Open Slider Revolution
Go to your Shopify Dashboard, click on Apps, and select Slider Revolution. Install the Slider Revolution & Sections app from the Shopify App Store if you have not installed it yet.
Step 2: Select & Install Template
You can easily create video carousels using the Slider Revolution & Sections’ ready template.
Here is the step-by-step process of creating a video carousel Shopify using the “New Slider from Template” option of the Slider Revolution & Sections app.
1. Select New Slider from Template
On the Slider Revolution dashboard select the “New Slider from Template” button. This will redirect you to the Slider Revolution Theme Library.
2. Search Video Carousel Template
On the search box of the theme library, write “Tiny” to find the Templates suitable for the video carousel.
3. Install Video Carousel Template
Choose a template, click on the Plus icon of the Template, and then Click on Install Template.
Step 3: Template Customization
Go to My Slider and Click on the Pencil icon, it will redirect you to the Template Editor page.
On the top, you will find the Slides option. Click on Slides
If you have chosen the Tiny Slider Light template, #2 New Slide will have a video player feature. In the Tiny Slider Dark template, #3 New Slide comes with a video player feature.
Use the slide that comes with a video player ( in Tiny Slider Light template, #2 New Slide, and in Tiny Slider Dark template, #3 New Slide)
Note: If you want to create a carousel with both videos and images, use the remaining slides for images. Otherwise, delete the rest of the slides one by one by clicking the Delete button.
If you want to add multiple videos, click the Duplicate button to copy the slide that comes with the video player. Duplicate it as many times as the number of videos you want to include.
To attach a video to each slide:
- Go to the Slides option and select a slide.
- Click on the Video Player Screen.
- After clicking, the video upload option will appear on the right side of the template editor.
You can attach video to the slide in 3 ways:
1. From Youtube
2. From Vimeo
3. From the Computer Folder (HTML5 Video
1. From Youtube
If you want to attach a video from YouTube, go to YouTube and copy the Video ID from the video URL. On YouTube, the Video ID lies just after the equal (=) symbol in the URL.
2. From Vimeo
If you want to attach a video from Vimeo, go to Vimeo and copy the Video ID from the video URL. On Vimeo, the Video ID lies just after the vimeo.com/ in the URL.
3. From Computer Folder
If you want to attach a video from the computer folder, Select HTML5 Video and then click on Media Library.
Click on the Video text, it will redirect you to the Shopify Files folder.
Click the Upload Files button and select the video from your computer folder.
Now back to the Slider Revolution and Sections dashboard, click on the Media Library, and select the video from the library.
You can also set the Thumbnail of the video. To set a thumbnail, scroll down on the right settings bar, and go to Media Poster.
First, click the Remove Poster button to remove the default template thumbnail.
Then, if you want to set the video’s start frame as a thumbnail, click on the Get Start Frame button. To set a custom thumbnail from your computer folder, click on Media Library and upload the thumbnail from your computer.
Step 4: Save All the Customization & Preview
After completing the customization click on the Save button.
Note: Follow the same process, to attach the video and thumbnail on the different slides.
Preview
Step 5: Publish the Slider
Copy the Shortcode of the template from the Slider Revolution’s Editor.
NB: Don’t forget to save the template before copying the Shortcode.
Go to the Shopify Store dashboard. Navigate to Themes, and select Customize.
In the theme editor, navigate to the part where you want to add a new section.
Then click on the Add Section. Now, Click on Apps and choose General Slider.
Now Paste the shortcode on the right at the Slider Shortcode box and click the Save button. The video carousel will now be visible in your store.
Output
How to Maximize the Effectiveness of Your Video Carousel?
A video carousel is an effective way to engage website visitors and showcase your brand. Using it strategically, one can significantly promote their products or services. It also enhances user experience and increases conversions as well. To make the most out of your video carousel, consider the following things:
1. Content Quality
The foundation of an effective video carousel lies in high-quality content. Use videos that are visually appealing, and professionally edited. They should align with your brand values and resonate with your target audience. Also, ensure that the videos address the interests or needs of your audience. For instance, you can use storytelling visuals. These help convey your message effectively and make a lasting impression on viewers.
2. Strategic Placement
The location of your video carousel is crucial for its success. Place it on high-traffic pages, such as your homepage, product pages, landing pages, or FAQ page. This strategic placement ensures the majority of your visitors see it. A well-placed carousel can grab users’ attention right away and guide them to explore more about your brand, products, or services.
3. Customization
A well-designed Shopify video carousel should seamlessly blend with your brand aesthetic. Customize it to reflect your brand by adjusting colors, fonts, transitions, and layout. Consistency in style reinforces your brand identity and creates a cohesive user experience. Thoughtful customization demonstrates attention to detail. It also builds trust with your audience.
4. Conciseness
Attention spans online are short, so brevity is key. Keep your videos concise. Focus on compellingly delivering the core message. Short and engaging videos are more likely to capture viewer interest. Aim for videos packed with value and no longer than 60–90 seconds. This will keep your audience stays engaged.
Conclusion
Now you reached the end of the “How to Add a Video Carousel to Shopify” blog. In this post, I have provided 2 different methods of creating a video carousel. The first one is using custom code; I have provided the custom code for free. And the second one is using an app like Essential Grid Gallery or Slider Revolution & Sections.
If you are a developer or technical person, then it’s very easy to create a video carousel for free. But if you don’t want these technical hassles, using a Shopify app could be a great solution.
In this post, I have shown 2 different apps to create a video carousel. If you want a highly animated video carousel or slider then Slider Revolution is best for you. Or if you want to build easily, customization, YouTube, Instagram, or Shopify video carousel, Essential Grid Gallery is the best.
My recommendation will be to use Essential Grid Gallery with shoppable features. So that you not only display videos, but also offer shoppers the opportunity to buy directly from those video carousels.
With a well-designed video carousel, you can captivate visitors, boost engagement, and drive conversions.
Jakaria is an SEO Content Writer in Shopify, Ecommerce, WordPress, and Tech Industry with 5+ years of experience. He specialises in developing engaging, helpful content by simplifying complex topics into an amazing story for B2B, SaaS, and Shopify businesses. He’s also passionate about staying updated on growth marketing strategies and Shopify trends.
