사용자 지정 CSS 사용하기

시각 편집기로는 어려운 스타일링을 위해 Sami Product Labels에는 내장 CSS 편집기가 있습니다. z-index로 배지 겹침 순서를 제어하고, 마우스를 올렸을 때 나타나는 툴팁을 추가하고, 이미지 배지의 대체 텍스트를 설정할 수도 있어요.

사용자 지정 CSS 추가하는 방법

1. 배지 편집기 열기

   Sami Product Labels에서 Badges & Labels로 이동하세요. Create badge를 선택하거나, 기존 배지의 Actions 열에 있는 Edit badge/label 아이콘을 선택하세요.

2. Design 탭으로 이동하기

   배지 편집기에서 Design을 선택하세요. 편집기를 열면 이 탭이 기본으로 선택되어 있습니다.

3. Advanced Settings로 스크롤하기

   Design 탭 하단 근처의 Advanced settings를 펼치세요.

4. “Custom css” 켜기

   Advanced에서 Custom css를 켜세요.

5. 선택자를 삽입하고 CSS 추가하기

   CSS reference에 세 가지 옵션이 있는 CSS 편집기가 나타납니다.

   • .samita_productLabel-content는 배지 전체의 스타일을 지정합니다.
   • .samita_productLabel-content-text는 텍스트 배지의 스타일을 지정합니다.
   • .samita_productLabel-content img는 이미지 배지의 스타일을 지정합니다.

   필요한 옵션을 선택하세요. 앱이 .__content--94129처럼 현재 배지 ID가 포함된 선택자를 편집기에 삽입합니다. 선택자에서 배지별로 고유한 부분은 그대로 두고, 중괄호 안에 필요한 선언만 추가하세요.

   /* Use the badge ID inserted by the app in place of YOUR_BADGE_ID. */
   .samita_productLabel-content.__content--YOUR_BADGE_ID {
     box-shadow: 0 0 15px rgba(255, 215, 0, 0.6);
   }
   
   .samita_productLabel-content.__content--YOUR_BADGE_ID:hover {
     transform: scale(1.1);
     transition: transform 0.2s ease;
   }

   

   CSS reference에서 클래스를 선택하면 배지 범위로 한정된 선택자가 Custom CSS 편집기에 삽입됩니다.

6. 미리 보고 저장하기

   편집하는 동안 실시간 미리보기를 확인하세요. 결과가 만족스러우면 Save를 선택한 다음, 스토어프런트에서 해당 컬렉션 페이지나 제품 페이지의 배지를 확인하세요.

주의

사용자 지정 CSS는 이 배지와 함께 저장되지만, 어떤 스토어프런트 요소에 영향을 줄지는 선택자에 따라 결정됩니다. 앱이 생성한 배지 범위 선택자를 유지하세요. .samita_productLabel-content처럼 범위가 넓은 선택자만 단독으로 쓰면 다른 배지에도 적용될 수 있습니다.

Z-index 제어

제품 이미지 오버레이, 고정 헤더 또는 다른 배지 뒤에 가려진 배지를 해결하세요.

1. Advanced settings에서 Z-index를 켜세요.
2. 1에서 100 사이의 값을 입력하세요. 값이 클수록 z-index 값이 낮은 요소보다 앞에 표시됩니다.

z-index 값을 설정해 배지 겹침 순서를 제어합니다.

참고

z-index는 테마가 만드는 쌓임 맥락(stacking context)의 영향도 받습니다. 배지 값을 높여도 앞으로 나오지 않는다면 테마의 상위 컨테이너에 별도의 CSS 조정이 필요할 수 있어요.

마우스를 올렸을 때 툴팁

고객이 배지에 마우스를 올리면 나타나는 툴팁을 추가하세요. 제품 이미지를 복잡하게 만들지 않고도 “New Arrival”이나 “Limited Edition”이 무슨 뜻인지 설명할 때 유용합니다.

1. Advanced settings에서 Show tooltip on hover를 켜세요.
2. 마우스를 올렸을 때 표시할 툴팁 텍스트를 입력하세요.

고객이 배지에 마우스를 올릴 때 표시되는 툴팁 텍스트를 추가합니다.

중요한 정보를 툴팁에만 넣지 마세요. 터치스크린 사용자나 키보드로 탐색하는 고객은 마우스 오버 상태를 만들지 못할 수 있습니다.

이미지 배지의 SEO 대체 텍스트

스크린 리더가 이미지 배지의 의미를 설명할 수 있도록 대체 텍스트를 설정하세요. 설명이 충실한 대체 텍스트는 이미지 SEO에도 도움이 될 수 있습니다.

1. Advanced settings에서 Seo alt text를 켜세요.
2. “20% off sale badge”나 “Free shipping label”처럼 배지가 전달하는 메시지를 간결하게 설명하는 내용을 입력하세요. 키워드 나열이나 “image of” 같은 표현은 피하세요.

접근성과 SEO를 위한 대체 텍스트를 설정합니다.

다음 단계

• 배지 스타일 변경하기 — 시각 편집기 컨트롤로 배지를 사용자 지정하세요.
• 배지 위치 변경하기 — 페이지의 알맞은 위치에 배지를 배치하세요.

팁

도움이 필요하신가요?

다음 단계를 따라 하다가 어려움이 있다면 [email protected]로 문의해 주세요.