A collection slider is a great way to showcase your product collections in a visually engaging way. Instead of listing collections in a static grid, you can display them in a horizontal slider with circular images. Visitors can scroll through collections smoothly on desktop and mobile.

In this guide, we’ll build a custom Shopify section called “Circular Collection Slider”, where each collection image is displayed inside a circle with its label below. You’ll be able to control spacing, size, and margins directly from the theme customizer.

Step 1: Create a New Section

1. In your Shopify admin, go to Online Store → Themes.
2. Click Actions → Edit Code.
3. Under the Sections folder, click Add a new section.
4. Name the section collection-slider.liquid.

This will create a blank file where we’ll add our code.

Step 2: Add the Section Code

Paste the following code inside the new section file:

{{ 'component-image-with-text.css' | asset_url | stylesheet_tag }}

{%- liquid
assign fetch_priority = 'auto'
if section.index == 1
  assign fetch_priority = 'high'
endif
if section.settings.theme_color == section.settings.section_theme and section.settings.layout_style == 'no-overlap'
  assign skip_color_classes = true
endif
-%}

<div class="km-slider-wrap gradient color-{{ section.settings.section_theme }}">
  {% for block in section.blocks %}
    {% if block.settings.single_cat.title != '' or block.settings.single_cat.url != '' %}
      {% assign data_title = block.settings.single_cat.title %}
      {% assign data_url = block.settings.single_cat.url %}
      {% assign collection_name = block.settings.collection_name %}

      <div class="km-slider-item">
        <div class="km-slider-inner">
          <div class="km-circle-box">
            <a href="{{ data_url }}">
              <div class="km-circle-img">
                <div class="km-circle">
                  <img
                    loading="eager"
                    width="auto"
                    height="auto"
                    src="{{ block.settings.single_cat | img_url: '450x450' }}"
                    alt="{{ data_title }}"
                  >
                </div>
              </div>
            </a>
            <div class="km-cat-label" style="display: flex; flex-direction: column">
              {% if collection_name == '' %}
                {% assign final_name = data_title %}
              {% else %}
                {% assign final_name = collection_name %}
              {% endif %}
              <span>{{ final_name }}</span>
            </div>
          </div>
        </div>
      </div>
    {% endif %}
  {% endfor %}
</div>

<style>
.km-slider-wrap {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  height: {{ section.settings.slider_height }}px;
  align-items: center;
  justify-content: center;
  -webkit-overflow-scrolling: touch;
  padding-left: 10px;
  padding-right: 10px;
}
.km-slider-item {
  padding: 0 {{ section.settings.item_gap | divided_by: 2 }}px;
  margin: {{ section.settings.item_top_margin }}px {{ section.settings.item_gap | divided_by: 2 }}px {{ section.settings.item_bottom_margin }}px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.km-slider-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.km-circle-img {
  position: relative;
}
.km-circle {
  width: {{ section.settings.circle_diameter }}px;
  height: {{ section.settings.circle_diameter }}px;
  border-radius: {{ section.settings.circle_radius }}%;
  border: 1px solid {{ section.settings.border_color }};
  overflow: hidden;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
.km-circle img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: {{ section.settings.circle_radius }}%;
}
.km-cat-label {
  text-align: center;
  font-size: inherit;
  margin-top: 4px;
  text-wrap: nowrap;
  font-family: inherit;
}
.km-cat-label a {
  text-decoration: none;
  color: inherit;
  font-family: inherit;
}
.km-slider-wrap::-webkit-scrollbar {
  display: none;
}
.km-slider-wrap {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
@media (max-width: 768px) {
  .km-slider-wrap {
    height: auto;
    justify-content: flex-start;
  }
}
</style>

{% schema %}
{
  "name": "Collection Slider",
  "max_blocks": 30,
  "settings": [
    {
      "type": "color_scheme",
      "id": "section_theme",
      "label": "Color Scheme",
      "default": "scheme-1"
    },
    {
      "type": "range",
      "id": "slider_height",
      "min": 96,
      "max": 248,
      "step": 4,
      "unit": "px",
      "label": "Slider Height",
      "default": 148
    },
    {
      "type": "range",
      "id": "item_top_margin",
      "min": 0,
      "max": 60,
      "step": 4,
      "unit": "px",
      "label": "Item Top Margin",
      "default": 8
    },
    {
      "type": "range",
      "id": "item_bottom_margin",
      "min": 0,
      "max": 60,
      "step": 4,
      "unit": "px",
      "label": "Item Bottom Margin",
      "default": 8
    },
    {
      "type": "range",
      "id": "circle_diameter",
      "min": 64,
      "max": 200,
      "step": 4,
      "unit": "px",
      "label": "Circle Diameter",
      "default": 96
    },
    {
      "type": "range",
      "id": "circle_radius",
      "min": 0,
      "max": 50,
      "step": 5,
      "unit": "%",
      "label": "Circle Radius",
      "default": 50
    },
    {
      "type": "range",
      "id": "item_gap",
      "min": 4,
      "max": 48,
      "step": 4,
      "unit": "px",
      "label": "Gap Between Items",
      "default": 8
    },
    {
      "type": "color",
      "id": "border_color",
      "label": "Circle Border Color",
      "default": "#000000"
    }
  ],
  "blocks": [
    {
      "type": "collection",
      "name": "KM Collection",
      "settings": [
        {
          "id": "single_cat",
          "type": "collection",
          "label": "Collection"
        },
        {
          "id": "collection_name",
          "type": "text",
          "label": "Custom Collection Name"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "KM Round Collection Slider"
    }
  ]
}
{% endschema %}

Step 3: Customize in Theme Editor

1. Go to your Theme Customizer (Online Store → Customize).
2. Add the “Circular Collection Slider” section anywhere on your homepage or other template.
3. Inside the section:
   • Choose up to 30 collections.
   • Adjust circle size, spacing, top margin, and bottom margin.
   • Change border color or add custom collection names.

Now your slider will look like a horizontal scrollable row of circles with collection titles.

Step 4: Style & Polish (Optional)

• Circle Radius: You can adjust the radius to make the images fully round (100%) or rounded squares.
• Slider Height: Increase or decrease the height to better fit your design.
• Margins: Control spacing above and below items to match your layout.

Final Result

You now have a modern circular collection slider in Shopify that:

• Works on both desktop and mobile.
• Hides scrollbars for a cleaner look.
• Lets you adjust styling directly from the editor.
• Keeps everything lightweight with pure Liquid and CSS (no extra apps).