카테고리 옆에 아이콘을 표시할 수 있는 플러그인이 있나요?

제품 지원
1

안녕하세요, 카테고리 옆에 아이콘을 표시할 수 있는 플러그인이 있는지 궁금합니다. 아래 이미지와 비슷한 스타일인데, 그런 플러그인이 있다는 건 알겠는데 이름이 기억나지 않네요.

image
image493×287 18.2 KB

2

안녕하세요 @Glow :wave:

플러그인이나 테마 컴포넌트가 필요하지 않습니다. 이미지 아이콘을 추가하려는 각 카테고리의 오른쪽 상단에 있는 관리자 렌치 아이콘을 클릭하여 카테고리 설정으로 이동한 후, ‘이미지’ 탭으로 가시면 스크린샷과 같이 표시되도록 이미지를 업로드할 수 있습니다. 원하시는 항목은 첫 번째인 '카테고리 이미지 로고’입니다. 참고로 이 이미지는 카테고리 페이지 상단에도 표시됩니다.

3

감사합니다! 그리고 더 작게 만들 수 있는 방법이 있을까요? 지금 꽤 크네요

image
image1138×429 32.5 KB

4

테마 또는 테마 컴포넌트의 일반 CSS에서 이렇게 할 수 있습니다:

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

너비 값을 원하는 값으로 변경하면 됩니다. 픽셀 대신 퍼센트도 사용할 수 있습니다. 도움이 되길 바랍니다 :slight_smile:

5

음, 그런 기능이 있는 플러그인이 아직 남아 있을 거라고 확신합니다. 제가 그런 것을 사용했던 기억이 있는데, 이렇게 축소하면 꽤 이상해 보이고 사진에 있는 것과 정확히 일치하지도 않거든요. 하지만 플러그인 이름은 기억이 안 나네요.

image
image1184×412 14.9 KB

6

CSS를 사용하여 이미지와 그 위치를 더 자세히 커스터마이징할 수 있습니다.

이것도 있지만, 이것이 원하시는 것인지 확신이 서지 않습니다.

7

이것은 내가 이전에 작성한 코드입니다…


: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);
}