How to change category name into image on shop page

If you want to change these category names into Images

You can follow these steps

#1. First, find category url. In my example, it is:

• Bike: /store-2/bike
• Brand: /store-2/brand
• Design: /store-2/design

#2. Use this code to Custom CSS box

a.nested-category-breadcrumb-link[href="/store-2/bike"] {
    background-image: url(https://cdn.pixabay.com/photo/2023/10/10/15/37/motorcycle-8306765_1280.jpg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    color: transparent !important;
}
a.nested-category-breadcrumb-link[href="/store-2/brand"] {
    background-image: url(https://cdn.pixabay.com/photo/2021/11/05/19/30/animal-6771900_1280.jpg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    color: transparent !important;
}
a.nested-category-breadcrumb-link[href="/store-2/design"] {
    background-image: url(https://cdn.pixabay.com/photo/2021/07/18/04/43/laughing-kookaburra-6474620_1280.jpg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    color: transparent !important;
}

#3. Result

#4. If you want to remove lines between Category Name/Images, you can use this CSS code

span.breadcrumb-separator {
    display: none;
}

#5. If you want to increase image size, just add width/height
width: 300px;
height: 200px;