- eCommerce Thesis

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

First, circular designs naturally draw the eye, which increases dwell time.
Additionally, interactive hover effects encourage visitors to explore your products.
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

You can show or hide titles, descriptions, and buttons for each slide.
Moreover, the CTA buttons come with hover effects to grab attention.

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

This slider uses Splide.js, a small and fast carousel library. You only need to copy the HTML, CSS, and JS into your Shopify theme. It’s easy and quick to set up.

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!

Our Services

Subscribe to Our YouTube Channel

🎓 Free YouTube Course

Carousel Slider for Shopify: Interactive Circle Design to Boost Engagement