In today’s competitive eCommerce landscape, capturing customer attention is more critical than ever. A visually engaging product display can make the difference between a bounce and a sale. Enter the Circle Carousel Slider for Shopify—a stunning, interactive, and fully customizable way to showcase your products, collections, or brand logos.
In this blog post, we’ll explore:
✔ Why this slider is a game-changer for Shopify stores
✔ Key features & customization options
✔ SEO benefits of using an interactive carousel
✔ How to implement it on your store
🚀 Why Use a Circle Carousel Slider?
1. Higher Engagement & Visual Appeal
- Circular designs naturally draw the eye, increasing dwell time.
- Interactive hover effects (rotate, shake, zoom, fade) encourage exploration.
- Perfect for fashion, cosmetics, portfolios, and brand logos.
2. Mobile-Optimized & Responsive
- Auto-adjusts for perfect display on all devices (desktop, tablet, mobile).
- Different settings for mobile vs. desktop (custom sizing, arrows, and spacing).
3. Improved User Experience (UX)
- Smooth animations powered by Splide.js (lightweight and fast).
- Clean, distraction-free product presentation.
4. SEO Benefits
✅ Reduced bounce rate (engaging content keeps visitors longer).
✅ Increased click-through rates (CTR) on featured products.
✅ Mobile-friendly design boosts Google rankings.
✨ Key Features of the Circle Carousel Slider
1. Multiple Hover Effects
Choose from:
- 360° Rotate
- Shake Animation
- Zoom Effect
- Fade Transition
- Grayscale to Color
2. Fully Customizable Design
- Adjust circle size, spacing, and shadows.
- Customize overlay colors, opacity, and text styling.
- Control border width, radius, and colors.
3. Smart Content Display
- Show/hide titles, descriptions, and buttons per slide.
- Optimized call-to-action (CTA) buttons with hover effects.
4. Professional Navigation
- Custom arrows (size, color, position).
- Adjustable pagination dots (active/inactive states).
🛠️ How to Add the Circle Carousel to Your Shopify Store
Step 1: Copy the Code
The slider uses Splide.js (a lightweight, high-performance carousel library). Simply paste the provided HTML, CSS, and JS into your Shopify theme.
Step 2: Customize in Shopify Admin
No coding needed! Adjust settings via:
- Slide content (images, text, buttons)
- Styling (colors, animations, spacing)
- Responsive behavior (mobile vs. desktop)
Step 3: Optimize for SEO
- Add alt text to all images.
- Use descriptive slide titles (H2/H3 tags).
- Ensure fast loading (Splide.js is optimized for speed).
📈 Real-World Use Cases
1. Fashion & Apparel Stores
- Showcase new arrivals in a visually engaging way.
- Highlight bestsellers with shake/zoom effects.
2. Beauty & Cosmetics Brands
- Display product variants (hover to see color changes).
- Feature before/after effects with fade transitions.
3. Logo Showcases for Brands
- Rotating client logos with grayscale hover effects.
- Interactive team member displays.
🎯 Final Thoughts: Is This Slider Right for You?
✅ Best for: Stores wanting higher engagement, better visuals, and mobile-friendly displays.
✅ Great for: Product galleries, featured collections, testimonials, and portfolios.
✅ SEO impact: Reduces bounce rate, improves UX, and boosts mobile rankings.
Ready to try it? Implement the Circle Carousel Slider today and watch your engagement soar!
📢 Call to Action
🔹 Want this slider for your store? Get the code here
{%- style -%}
#shopify-section-{{ section.id }} {
--circle-size: {{ section.settings.circle_size }}px;
--circle-size-mobile: {{ section.settings.circle_size_mobile }}px;
--item-spacing: {{ section.settings.item_spacing }}px;
--content-color: {{ section.settings.content_color }};
--content-bg: {{ section.settings.content_bg }};
--arrow-color: {{ section.settings.arrow_color }};
--arrow-bg: {{ section.settings.arrow_bg }};
--dot-color: {{ section.settings.dot_color }};
--dot-active-color: {{ section.settings.dot_active_color }};
--overlay-color: {{ section.settings.overlay_color }};
--overlay-opacity: {{ section.settings.overlay_opacity | divided_by: 100.0 }};
--border-radius: {{ section.settings.border_radius }}px;
--border-width: {{ section.settings.border_width }}px;
--border-color: {{ section.settings.border_color }};
--shadow-opacity: {{ section.settings.shadow_opacity | divided_by: 100.0 }};
--shadow-horizontal: {{ section.settings.shadow_horizontal }}px;
--shadow-vertical: {{ section.settings.shadow_vertical }}px;
--shadow-blur: {{ section.settings.shadow_blur }}px;
--shadow-spread: {{ section.settings.shadow_spread }}px;
--shadow-color: {{ section.settings.shadow_color }};
padding-top: {{ section.settings.padding_top }}px;
padding-bottom: {{ section.settings.padding_bottom }}px;
background-color: {{ section.settings.section_bg }};
}
.splide__slide {
display: flex;
justify-content: center;
padding: 0 var(--item-spacing);
}
.circle-slide {
position: relative;
width: var(--circle-size);
height: var(--circle-size);
border-radius: 50%;
overflow: hidden;
border: var(--border-width) solid var(--border-color);
box-shadow: var(--shadow-horizontal) var(--shadow-vertical) var(--shadow-blur) var(--shadow-spread) rgba(var(--shadow-color), var(--shadow-opacity));
transition: transform 0.3s ease;
}
.circle-slide:hover {
transform: scale(1.05);
}
.circle-slide-image {
width: 100%;
height: 100%;
object-fit: cover;
}
.circle-slide-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(var(--overlay-color), var(--overlay-opacity));
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
color: var(--content-color);
padding: 20px;
border-radius: 50%;
}
.circle-slide-content {
background-color: var(--content-bg);
padding: 10px 15px;
border-radius: var(--border-radius);
}
/* Splide Arrows */
.splide__arrow {
width: {{ section.settings.arrow_size }}px;
height: {{ section.settings.arrow_size }}px;
background: var(--arrow-bg);
color: var(--arrow-color);
opacity: {{ section.settings.arrow_opacity | divided_by: 100.0 }};
transition: all 0.3s ease;
}
.splide__arrow:hover {
opacity: 1;
transform: scale(1.1);
}
.splide__arrow--prev {
left: {{ section.settings.arrow_offset }}px;
}
.splide__arrow--next {
right: {{ section.settings.arrow_offset }}px;
}
/* Splide Dots */
.splide__pagination {
bottom: -20px;
}
.splide__pagination__page {
width: {{ section.settings.dot_size }}px;
height: {{ section.settings.dot_size }}px;
background: var(--dot-color);
opacity: 0.5;
transition: all 0.3s ease;
}
.splide__pagination__page.is-active {
background: var(--dot-active-color);
opacity: 1;
transform: scale(1.2);
}
@media (max-width: 768px) {
.circle-slide {
width: var(--circle-size-mobile);
height: var(--circle-size-mobile);
}
.splide__arrow {
width: {{ section.settings.arrow_size_mobile }}px;
height: {{ section.settings.arrow_size_mobile }}px;
}
.splide__arrow--prev {
left: {{ section.settings.arrow_offset_mobile }}px;
}
.splide__arrow--next {
right: {{ section.settings.arrow_offset_mobile }}px;
}
}
{%- endstyle -%}
<!-- Load Splide CSS & JS from CDN -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@splidejs/splide@4.1.4/dist/css/splide.min.css">
<script src="https://cdn.jsdelivr.net/npm/@splidejs/splide@4.1.4/dist/js/splide.min.js"></script>
<div class="splide"
data-splide='{
"type": "loop",
"perPage": {{ section.settings.items_visible }},
"perMove": 1,
"gap": "{{ section.settings.item_spacing }}px",
"autoplay": {{ section.settings.autoplay }},
"interval": {{ section.settings.autoplay_speed | times: 1000 }},
"arrows": {{ section.settings.show_arrows }},
"pagination": {{ section.settings.show_dots }},
"breakpoints": {
"768": {
"perPage": {{ section.settings.items_visible_mobile }}
}
}
}'>
<div class="splide__track">
<div class="splide__list">
{% for block in section.blocks %}
<div class="splide__slide">
<div class="circle-slide">
{% if block.settings.image != blank %}
<img
class="circle-slide-image"
src="{{ block.settings.image | img_url: '800x800' }}"
alt="{{ block.settings.image.alt | escape }}"
loading="lazy">
{% else %}
{{ 'image' | placeholder_svg_tag: 'circle-slide-image' }}
{% endif %}
<div class="circle-slide-overlay">
<div class="circle-slide-content">
{% if block.settings.title != blank %}
<h3>{{ block.settings.title }}</h3>
{% endif %}
{% if block.settings.text != blank %}
<p>{{ block.settings.text }}</p>
{% endif %}
{% if block.settings.button_label != blank %}
<a href="{{ block.settings.button_link }}" class="button">{{ block.settings.button_label }}</a>
{% endif %}
</div>
</div>
</div>
</div>
{% endfor %}
</div>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
// Initialize Splide
new Splide('.splide').mount();
// Reinitialize in theme editor
if (typeof Shopify === 'object' && Shopify.designMode) {
document.addEventListener('shopify:section:load', function(e) {
if (e.detail.sectionId === '{{ section.id }}') {
new Splide('.splide').mount();
}
});
}
});
</script>
{% schema %}
{
"name": "Circle Carousel (Splide)",
"tag": "section",
"class": "section",
"max_blocks": 12,
"settings": [
{
"type": "header",
"content": "Layout"
},
{
"type": "range",
"id": "circle_size",
"min": 100,
"max": 500,
"step": 10,
"unit": "px",
"label": "Circle Size (Desktop)",
"default": 300
},
{
"type": "range",
"id": "circle_size_mobile",
"min": 80,
"max": 300,
"step": 10,
"unit": "px",
"label": "Circle Size (Mobile)",
"default": 180
},
{
"type": "range",
"id": "items_visible",
"min": 1,
"max": 5,
"step": 0.1,
"label": "Items Visible (Desktop)",
"default": 3.5
},
{
"type": "range",
"id": "items_visible_mobile",
"min": 1,
"max": 3,
"step": 0.1,
"label": "Items Visible (Mobile)",
"default": 1.3
},
{
"type": "range",
"id": "item_spacing",
"min": 0,
"max": 50,
"step": 1,
"unit": "px",
"label": "Item Spacing",
"default": 20
},
{
"type": "header",
"content": "Carousel Settings"
},
{
"type": "checkbox",
"id": "autoplay",
"label": "Auto-rotate",
"default": true
},
{
"type": "range",
"id": "autoplay_speed",
"min": 1,
"max": 10,
"step": 1,
"unit": "s",
"label": "Autoplay Speed",
"default": 5
},
{
"type": "checkbox",
"id": "show_arrows",
"label": "Show Arrows",
"default": true
},
{
"type": "checkbox",
"id": "show_dots",
"label": "Show Dots",
"default": true
},
{
"type": "header",
"content": "Arrow Settings"
},
{
"type": "range",
"id": "arrow_size",
"min": 20,
"max": 60,
"step": 2,
"unit": "px",
"label": "Arrow Size (Desktop)",
"default": 40
},
{
"type": "range",
"id": "arrow_size_mobile",
"min": 20,
"max": 40,
"step": 2,
"unit": "px",
"label": "Arrow Size (Mobile)",
"default": 30
},
{
"type": "range",
"id": "arrow_offset",
"min": 20,
"max": 100,
"step": 5,
"unit": "px",
"label": "Arrow Offset (Desktop)",
"default": 50
},
{
"type": "range",
"id": "arrow_offset_mobile",
"min": 10,
"max": 60,
"step": 5,
"unit": "px",
"label": "Arrow Offset (Mobile)",
"default": 30
},
{
"type": "range",
"id": "arrow_opacity",
"min": 10,
"max": 100,
"step": 5,
"unit": "%",
"label": "Arrow Opacity",
"default": 80
},
{
"type": "color",
"id": "arrow_color",
"label": "Arrow Color",
"default": "#000000"
},
{
"type": "color",
"id": "arrow_bg",
"label": "Arrow Background",
"default": "#ffffff"
},
{
"type": "header",
"content": "Dot Settings"
},
{
"type": "range",
"id": "dot_size",
"min": 4,
"max": 20,
"step": 1,
"unit": "px",
"label": "Dot Size",
"default": 8
},
{
"type": "color",
"id": "dot_color",
"label": "Dot Color",
"default": "#cccccc"
},
{
"type": "color",
"id": "dot_active_color",
"label": "Active Dot Color",
"default": "#000000"
}
],
"blocks": [
{
"type": "slide",
"name": "Slide",
"settings": [
{
"type": "image_picker",
"id": "image",
"label": "Image",
"info": "Recommended: 800x800px (Square)"
},
{
"type": "text",
"id": "title",
"label": "Title",
"default": "Collection"
},
{
"type": "text",
"id": "text",
"label": "Description",
"default": "Shop now"
},
{
"type": "text",
"id": "button_label",
"label": "Button Label",
"default": "View All"
},
{
"type": "url",
"id": "button_link",
"label": "Button Link"
}
]
}
],
"presets": [
{
"name": "Circle Carousel (Splide)",
"blocks": [
{
"type": "slide",
"settings": {
"title": "New Arrivals"
}
},
{
"type": "slide",
"settings": {
"title": "Bestsellers"
}
},
{
"type": "slide",
"settings": {
"title": "On Sale"
}
}
]
}
]
}
{% endschema %}
🔹 Need help installing? Contact our Shopify experts
🔹 Have questions? Drop them in the comments!