아래 소스코드를 헤더 또는 푸터의 HTML 섹션에 입력하면 품절된 상품 썸네일 디자인을 변경할 수 있어요.
•
사용 중인 템플릿의 테마에 맞는 소스코드를 적용해 주세요.
•
데스크탑과 모바일에서 다른 디자인을 사용하려면, HTML 섹션의 콘텐츠 유형을 기기별로 선택한 후 모바일 코드와 데스크탑 코드 편집 창에 각각 입력해 주세요.
•
판매 스케줄러 판매 기간 전, 판매 기간 종료 상품에도 적용됩니다.
Essential 테마
Grid, Round 테마
<style>
[class*="CatalogItem_image-cover"] {
/* 배경색 */
background-color: rgba(255, 255, 255, 0);
}
[class*="CatalogItem_image-cover"] {
/* 숨기기 */
display: none;
/* 글자 크기 */
font-size: 30px;
/* 글자 색상 */
color: #000000;
}
</style>
<script>
document.querySelectorAll('[class*="CatalogItem_image-cover"]').forEach(function(elem) {
elem.textContent = "원하는 문구 입력";
});
</script>
HTML
복사
<style>
[class*="ProductImage_sold-out"] {
/* 배경색 */
background-color: rgba(255, 255, 255, 0);
}
[class*="ProductImage_sold-out"] p {
/* 숨기기 */
display: none;
/* 글자 크기 */
font-size: 30px;
/* 글자 색상 */
color: #000000;
}
</style>
<script>
document.querySelectorAll('[class*="ProductImage_sold-out"] p').forEach(function(elem) {
elem.textContent = "원하는 문구 입력";
});
</script>
HTML
복사
소스코드 수정하기
① 배경색
배경색으로 사용할 색상의 RGB 값을 입력하고, 네 번째 항목에는 투명도를 0부터 1 사이의 숫자로 입력해 주세요.
기본 배경색은 흰색(255, 255, 255), 기본 투명도는 0.6입니다.
배경색을 사용하지 않는다면 0을 입력해 주세요.
② 숨기기
품절 상품에 안내 문구를 표시하지 않으려면, display: none;를 입력해 주세요.
품절 상품에 표시되는 안내 문구가 보이도록 하려면, ②의 display: none; 코드를 삭제해 주세요.
③ 글자 크기
품절 상품에 표시되는 안내 문구에 입력한 글자 크기를 변경할 수 있어요.
④ 글자 색상
품절 상품에 표시되는 안내 문구에 입력한 글자 색상을 변경할 수 있어요.
⑤ 원하는 문구 입력
품절 상품 이미지에 표시될 안내 문구를 입력해 주세요.
HTML 섹션 안내서로 돌아가기
식스샵 프로 가이드로 돌아가기