Recently, my mind led me to the inevitable question: ‘How to create a carousel in Shopify and WordPress?’
I recently took on a task that required creating a carousel with captions in Shopify, without any plugins or apps. It’s a common scenario because companies prefer not to invest more in plugins when they’ve already hired a developer like me for website maintenance.
As we’re aware, not all Shopify themes come equipped with features like carousels, and it’s not as straightforward as WordPress, where you can easily find plugins at no extra cost.
When all else fails, it’s time to embrace the magic of coding! 🚀✨
I’ve decided to code a carousel using HTML, CSS, and jQuery, and tailor it to perfection with the assistance of Owl Carousel.
But hold on, no need to dive into coding! I’ve got the entire code right here for you. Simply copy and paste it onto your website, customize with your own images and text, and you’re good to go. It’s as simple as that!
Just like me, you might now be pondering the same question:
How to create a carousel in Shopify and WordPress?
Simply copy and paste the entire code onto your webpage — that’s all there is to it!
HTML Code
<div class="owl-carousel owl-theme">
<div class="item">
<a class="cele" href="#">
<img src="https://cdn.shopify.com/s/files/1/0301/4724/8221/files/Athiya_Shetty.webp?v=1669017167">
<p class="para">Title</p></a>
</div>
<div class="item">
<a class="cele" href="#">
<img src="https://cdn.shopify.com/s/files/1/0301/4724/8221/files/Divya_Khosla_Kumar.webp?v=1669017167">
<p class="para">Title</p></a>
</div>
<div class="item">
<a class="cele" href="#">
<img src="https://cdn.shopify.com/s/files/1/0301/4724/8221/files/Rakul_Preet_Singh.webp?v=1669015587">
<p class="para">Title</p></a>
</div>
<div class="item">
<a class="cele" href="#">
<img src="https://cdn.shopify.com/s/files/1/0301/4724/8221/files/Rakul_Preet_Singh_2.webp?v=1669015587">
<p class="para">Title</p></a>
</div>
<div class="item">
<a class="cele" href="#">
<img src="https://cdn.shopify.com/s/files/1/0301/4724/8221/files/Neha_Dhupia.webp?v=1669016126">
<p class="para">Title</p></a>
</div>
<div class="item">
<a class="cele" href="#">
<img src="https://cdn.shopify.com/s/files/1/0301/4724/8221/files/Mouni_Roy.webp?v=1669016126">
<p class="para">Title</p></a>
</div>
</div>CSS Code
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" integrity="sha512-tS3S5qG0BlhnQROyJXvNjeEM4UpMXHrQfTGmbQ1gKmelCxlSEBUaxhRBj/EFTzpbP4RVSrpEikbmdJobCvhE3g==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css" integrity="sha512-sMXtMNL1zRzolHYKEujM2AqCLUR9F2C4/05cdbxjjLSRvMQIciEPCQZo++nk7go3BtSuK9kfa/s+a4f4i5pLkw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
.para {
font-weight: 400;
font-size: 18px;
text-align: center;
}
.cele {
text-decoration: none;
color: black;
}jQuery Code
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js" integrity="sha512-aVKKRRi/Q/YV+4mjoKBsE4x3H+BkegoM/em46NNlCqNTmUYADjBbeNefNxYV7giUp0VxICtqdrbqU7iVaeZNXA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js" integrity="sha512-bPs7Ae6pVvhOSiIcyUClR7/q2OAsRiovw4vAkX+zJbw3ShAeeqezq50RIIcIURq7Oa20rW2n2q+fyXBNcU9lrw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script>$('.owl-carousel').owlCarousel({
loop:true,
margin:10,
nav:false,
autoplay: true,
autoplayTimeout: 3000,
responsive:{
0:{
items:1
},
600:{
items:3
},
1000:{
items:5
}
}
})
</script>I incorporated all the code directly into a single page, without creating separate files for CSS and jQuery.
Result
It’s device-responsive and boasts smooth sliding. Feel free to customize the code to reshape it, change the animation style, or adjust sliding timings – it’s completely up to you!
By the way, I’m a web developer. If you need assistance with PHP, JS, WordPress, or Shopify, I’m more than happy to serve as your freelance web developer.
Feel free to comment down below if you encounter any issues with this (How to create a carousel in Shopify and WordPress?) code. I’m here to help! Just post your concerns, and I’ll do my best to provide a quick solution.
Thank you so much, Pal! You saved my day. I tried getting a code through chatgpt, but it had a lot of bugs. However, this code is easy to insert and works perfectly on my Shopify website. This post is perfect for anyone who wants to create an image carousel on Shopify or WordPress without editing the liquid file.