Clickable Round Collection Icons in Shopify Like Instagram Stories

How to Add Instagram-Style Round Collection Icons to Your Shopify Store (No App Needed)

Want to make your Shopify store look more modern and easier to navigate — just like Instagram’s story icons? 🎯

Ready to optimize your marketing and sales funnels? Contact us today for strategies and tools that will help you attract, engage, and convert leads faster than ever before!

In this guide, I’ll show you how to create clickable circular category icons (like “Fashion,” “Health,” “Home,” etc.) using just theme code — no apps, no extra cost.

This works for both:

• ✅ Classic (pre-2.0) Shopify themes
• ✅ Modern Shopify 2.0 themes using JSON templates

Let’s get started!

---

What You’ll Be Building

You’ll create a row of round images, each linking to a collection or category — just like Instagram story icons — that look great on both desktop and mobile.

---

Step 1: Prepare Your Images

1. Go to Shopify Admin → Content → Files
2. Upload each image you want to use as a category icon (make sure they’re square — e.g., 400x400px)
3. Use clean file names like:

   fashion.jpg, health.jpg, home.jpg

---

🔧 Step 2: Add the Section to Your Theme

For All Shopify Themes (Classic & 2.0)

1. Go to Online Store → Themes → Edit Code
2. In the Sections folder, click Add a new section
3. Name it:

   category-icons.liquid

4. Paste the code below into that new section file:

<style>
.category-icons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px;
  padding: 20px 0;
}
.category-icon {
  text-align: center;
  text-decoration: none;
  color: #2e2e2e;
}
.category-icon img {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #e0e0e0;
  transition: transform 0.2s ease;
}
.category-icon img:hover {
  transform: scale(1.05);
}
.category-icon span {
  display: block;
  margin-top: 8px;
  font-size: 14px;
  font-weight: 500;
}
</style>

<div class="category-icons">
  {% assign names = "Fashion,Health,Home,Jewellery,Cookware" | split: "," %}
  {% assign links = "/collections/fashion,/collections/health,/collections/home,/collections/jewellery,/collections/cookware" | split: "," %}
  {% assign images = "fashion.jpg,health.jpg,home.jpg,jewellery.jpg,cookware.jpg" | split: "," %}

  {% for i in (0..names.size) %}
    {% unless names[i] == blank %}
      <a href="{{ links[i] }}" class="category-icon">
        <img src="{{ images[i] | asset_url }}" alt="{{ names[i] }}">
        <span>{{ names[i] }}</span>
      </a>
    {% endunless %}
  {% endfor %}
</div>

✅ Tip: Be sure your image names in the code match the ones you uploaded.

---

Step 3: Add the Section to Your Store

For Classic Shopify Themes (pre-2.0)

If you’re using an older theme with .liquid templates:

1. Open index.liquid or any page template (e.g. page.liquid)
2. Paste this where you want the icons to appear:

   {% section 'category-icons' %}

---

For Shopify 2.0 Themes (Dawn and newer)

1. Go to the Templates folder
2. Click Add a new template

• Type: Page
• Format: JSON
• Name: category-icons

1. Replace the default content with:

{
  "name": "Category Icons Page",
  "sections": {
    "main": {
      "type": "category-icons",
      "settings": {}
    }
  },
  "order": ["main"]
}

4. Go to Online Store > Pages > Add Page

• Name: Shop by Category (or similar)
• Under Theme Template, choose: page.category-icons
• Save and view your new page 🎉

---

Optional: Use It on Your Homepage

If you’re using Shopify 2.0, you can also add this section through the theme editor:

1. Go to Online Store > Customize
2. Choose your homepage
3. Click “Add Section” → search for category-icons
4. Add and drag it where you like!

If it doesn’t show, you can manually add the section to your homepage template like this:

{
  "sections": {
    "hero": {
      "type": "hero"
    },
    "category-icons": {
      "type": "category-icons"
    }
  },
  "order": ["hero", "category-icons"]
}

---

Final Result

You now have a stylish, modern Instagram-style category menu on your Shopify store — 100% theme-integrated and mobile-friendly.

---

Want a Customizer-Friendly Version?

This guide uses hardcoded names/links for simplicity, but you can upgrade this to a drag-and-drop customizable section that lets you upload icons and add links visually from the Shopify theme editor.

Comment or contact me if you’d like that version too! 🙌

---

Summary

What You Built	✅
Circular icons with links	✔️
No apps used	✔️
Mobile responsive	✔️
Works on all Shopify themes	✔️

---

Got Questions?

Drop a comment or DM — happy to help!
If this helped you, please share it with other store owners or tag me on socials.