In today’s post, we’re going to show you how to add a beautiful animated circle collection section to your Shopify store — without using any paid apps!
This feature not only looks modern and interactive but also helps highlight your product collections in a visually appealing way. And the best part? You don’t need to know any coding or pay for any apps — it’s 100% free and beginner-friendly.
What Is a Circle Collection Section?
As shown in the video, a circle collection section is a visually animated layout where your collection images appear in circular frames with motion effects. It mimics the animated style of popular icons (like Instagram stories) and brings a sleek, professional look to your store homepage.
Why Use Circle Collections?
Most themes don’t provide a feature like this by default. Store owners usually install third-party apps to achieve this effect, which means paying monthly fees. But with this guide, you can:
- Add animated circle collections for free.
- Customize the look and feel easily.
- Avoid installing bulky apps that slow down your store.
Step-by-Step Guide to Add Circle Collection
Step 1: Open Your Shopify Admin
Log in to your Shopify admin and head to the Online Store → Themes section. Before making any changes:
- Duplicate your live theme to prevent breaking the live store if something goes wrong.
Step 2: Edit Code
Click the three dots next to your theme and choose Edit Code.
Inside the code editor:
- Find the “Sections” folder on the left.
- Click “Add a new section”.
- Name it something like
circle-collection-section.
Step 3: Paste the Code
Paste the code provided in the blog into the newly created section file. Then click Save.
<section class=”circle-collection-section”>
<div class=”circle-collection-container”>
{% for block in section.blocks %}
{% assign collection = block.settings.collection %}
{% if collection %}
<div class=”circle-collection-item”>
<a href=”{{ collection.url }}”>
<div class=”circle-wrapper”>
{% if section.settings.enable_animation %}
<svg class=”rotating-circle” xmlns=”http://www.w3.org/2000/svg” viewBox=”0 0 100 100″>
<defs>
<linearGradient id=”circle-gradient” x1=”0%” y1=”0%” x2=”100%” y2=”0%”>
<stop offset=”0%” stop-color=”{{ section.settings.gradient_color_1 }}” />
<stop offset=”50%” stop-color=”{{ section.settings.gradient_color_2 }}” />
<stop offset=”100%” stop-color=”{{ section.settings.gradient_color_3 }}” />
</linearGradient>
</defs>
<circle
cx=”50″
cy=”50″
r=”45″
stroke-width=”3″
fill=”none”
stroke-dasharray=”8 4″
stroke=”url(#circle-gradient)” />
</svg>
{% endif %}
{% if block.settings.custom_image %}
<img
src=”{{ block.settings.custom_image | img_url: ‘300×300’ }}”
alt=”{{ block.settings.custom_name | default: collection.title }}”
class=”circle-collection-image”>
{% else %}
<img
src=”{{ collection.image | img_url: ‘300×300’ }}”
alt=”{{ block.settings.custom_name | default: collection.title }}”
class=”circle-collection-image”>
{% endif %}
</div>
</a>
<p style=”color: {{ section.settings.name_color }}”>
{{ block.settings.custom_name | default: collection.title }}
</p>
</div>
{% endif %}
{% endfor %}
</div>
</section>
<style>
.circle-collection-container {
display: flex;
flex-wrap: nowrap;
gap: 30px;
overflow-x: auto;
justify-content: flex-start;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
align-items: center;
}
.circle-collection-item {
text-align: center;
width: 100px;
flex-shrink: 0;
scroll-snap-align: center;
}
.circle-wrapper {
position: relative;
width: 110px;
height: 110px;
display: flex;
justify-content: center;
align-items: center;
}
.rotating-circle {
position: absolute;
width: 100%;
height: 100%;
animation: rotate-circle 3s linear infinite;
transform-origin: center;
}
@keyframes rotate-circle {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.circle-wrapper:hover .rotating-circle {
animation-play-state: paused;
}
.circle-collection-image {
width: 85px;
height: 85px;
object-fit: cover;
border-radius: 50%;
position: absolute;
top: 12px;
left: 12px;
background: #fff;
}
.circle-collection-item p {
margin-top: 10px;
font-size: 14px;
}
.circle-collection-container::-webkit-scrollbar {
display: none;
}
.circle-collection-container {
-ms-overflow-style: none;
scrollbar-width: none;
}
@media (min-width: 769px) {
.circle-collection-container {
justify-content: center;
}
}
</style>
{% schema %}
{
“name”: “Circle Collection”,
“settings”: [
{
“type”: “checkbox”,
“id”: “enable_animation”,
“label”: “Enable Circle Animation”,
“default”: true
},
{
“type”: “color”,
“id”: “name_color”,
“label”: “Collection Name Color”,
“default”: “#333333”
},
{
“type”: “color”,
“id”: “gradient_color_1”,
“label”: “Gradient Color 1”,
“default”: “#f58529”
},
{
“type”: “color”,
“id”: “gradient_color_2”,
“label”: “Gradient Color 2”,
“default”: “#dd2a7b”
},
{
“type”: “color”,
“id”: “gradient_color_3”,
“label”: “Gradient Color 3”,
“default”: “#8134af”
}
],
“blocks”: [
{
“type”: “collection”,
“name”: “Collection Item”,
“settings”: [
{
“type”: “collection”,
“id”: “collection”,
“label”: “Select Collection”
},
{
“type”: “text”,
“id”: “custom_name”,
“label”: “Custom Collection Name”
},
{
“type”: “image_picker”,
“id”: “custom_image”,
“label”: “Custom Collection Image”
}
]
}
],
“presets”: [
{
“name”: “Circle Collection”,
“category”: “Custom Sections”
}
]
}
{% endschema %}
Step 4: Customize Your Theme
Now go back and click on “Customize” under your theme.
Inside the theme editor:
- Click “Add Section”.
- You’ll find the new section listed as “Circle Collection”.
- Click on it to add to your homepage.
You can drag the section to position it wherever you want.
Features You Can Customize
Once the section is added, you’ll be able to customize several features:
1. Choose Your Collections
Select any collection from your store that you want to display.
2. Custom Collection Names
Don’t want to use your default collection title? No problem! Add a custom name that will appear instead of the original.
3. Custom Images
Want a different image instead of the collection image? Upload and select any image of your choice.
4. Text & Animation Colors
You can easily change:
- Collection title color
- Circle animation color using gradient options
- Enable or disable the animation completely
5. Responsive Design
The section works great on both desktop and mobile:
- If there are many collections, they will display in a slider or scrollable format.
6. Pause on Hover
A cool feature: When you hover over a collection, the animation will pause automatically, giving a clean hover effect.
👉 If you face any problems or need help with the setup, feel free to contact us — we’re here to help!
