상품 목록에서 배지를 상품 이미지 위에 표시하려면, 아래 소스 코드를 사용해 주세요.
top이나 left , gap 값을 조정해 배지 위치나 간격을 세밀하게 조절할 수 있어요. 배지 이름이 길거나 개수가 많으면 자동으로 줄바꿈 되어 표시됩니다.
디자인 에디터의 헤더 영역에 HTML 섹션을 추가해 주세요.
HTML 섹션의 코드 편집 버튼을 눌러 아래 소스코드를 입력하고 저장해 주세요.
<style>
.custom-badge-over-image {
position: absolute !important;
top: 10px; /* 상단 위치 조정 */
left: 10px; /* 좌측 위치 조정 */
display: flex !important;
flex-wrap: wrap;
gap: 4px; /* 배지 사이 간격 조정 */
max-width: calc(100% - 20px);
z-index: 10;
pointer-events: none;
}
</style>
HTML
복사
테마 설정의 커스텀 코드의 <body> 영역에 아래 소스코드를 입력해 주세요.
<script>
function moveBadgeOverImage(retry = 0) {
const badges = document.querySelectorAll('[class*="CatalogItem_badge-list"]');
badges.forEach((badgeList) => {
if (badgeList.classList.contains('custom-badge-over-image')) return;
const product = badgeList.closest('[data-product-id]');
if (!product) return;
const imageContainer = product.querySelector('img')?.closest('div');
if (!imageContainer) return;
product.style.position = 'relative';
badgeList.classList.add('custom-badge-over-image');
});
if (badges.length === 0 && retry < 10) {
setTimeout(() => moveBadgeOverImage(retry + 1), 300);
}
}
const observer = new MutationObserver(() => moveBadgeOverImage());
observer.observe(document.body, { childList: true, subtree: true });
</script>
HTML
복사
상품 섹션이나 상품 목록 페이지에서 배지 보이기에 체크해 배지 노출 설정을 완료해 주세요.
HTML 섹션 안내서로 돌아가기
식스샵 프로 가이드로 돌아가기