Is there a plugin of some sort to have an Icon next to a category?

Support
1

Hi, I am wondering if there is a plugin of some sort that allows to have an icon next to a category similar to something like this? I know there is one but I can’t remember the name.
image

2

Hi @Glow :wave:

No need for a plugin or theme component. Go to the Category Settings via the admin wrench in top right corner of each category you want an image icon for and go to the “images” tab and there you can upload images to appear like in your screenshot. The one you want is the first one “Category Image Logo”. Note that it will also appear the top of the Category page as well.

1 Like
3

Thanks! and is there a way to make it so that it is smaller? It is quite oversized

image
image1138×429 32.5 KB

4

In common - css of a theme or theme component, you can do this:

.category-logo.aspect-image {
    width: 100px;
}

Just change the width value to whatever you wish. Can also use percent instead of pixels. I hope this helps :slight_smile:

1 Like
5

hmm, im pretty sure there is still a plugin as i remember using such thing, because this looks pretty weird when i scale it down, and doesnt look like it exactly in the picture, but i cant remember the name.

image
image1184×412 14.9 KB

6

you can use CSS to further customize the image and it’s placement.

there is also this one but I’m not sure it’s what you want.

2 Likes
7

This is a code I wrote before…


:root {
    --category-logo-width: 70px;
    --category-spacing: 0px;
}

.desktop-view table.category-list .category-logo.aspect-image {
    width: var(--category-logo-width);
    height: calc(var(--category-logo-width) - 45px);
    margin: 0 5px 0 0;
    padding: 0;
    transform: translatey(-35px);
}
table.category-list .category-logo.aspect-image img{
    width: var(--category-logo-width);
    height: var(--category-logo-width);
}
.desktop-view .has-logo .category-text-title {
    margin-left: calc(var(--category-logo-width) + 5px); 
}
.mobile-view .category-title-link {
    display: flex;
}
.mobile-view .category-logo.aspect-image {
    margin: 0 5px 0 0;
    margin-top: 0 !important;
    padding: 0;
    order: -1
}
.mobile-view .category-text-title {
    margin: auto 0;
}


.desktop-view td.category {
    margin: var(--category-spacing);
}
.desktop-view table.category-list {
    border-collapse: separate;
    border-spacing: 0 var(--category-spacing);
}
.desktop-view table.category-list tr {
    margin: var(--category-spacing);
}
2 Likes